CODEWITHSUNDEEP
phpjquerysymfonydisabled-input
Darkstarone
Darkstarone

Reputation: 4730

Symfony 3 undisabled select not submitting

I have a read only select defined by the formbuilder:

    ->add('sampledBy', EntityType::class, array(
        'class' => 'AppBundle:FOSUser',
        'query_builder' => function (EntityRepository $er) {
            return $er->createQueryBuilder('u')
                ->orderBy('u.cn', 'ASC');
        },
        'choice_label' => 'cn',
        'disabled' => true
    ))

Which I use JQuery to update from another field in my form. Following this answer, I've set the select up so that it can't be changed by the user:

*Set it to disabled on create.

*Before submit set it to disabled = false:

 $(form).on('submit', function() {
     $("select[id$='sampledBy']").prop('disabled', false);
 });

Now, on submit I see the select field change to disabled = false (the colour changes back to white and it's clickable while the form submits. However, the data isn't saved.

Has anyone seen similar behavior? The JQuery appears to work correctly, so I'm wondering if it's a Symfony specific issue.

Upvotes: 0

Views: 115

Answers (2)

Darkstarone
Darkstarone

Reputation: 4730

I ended up using css to skip mouse events, and JQuery to deal with keyboard focusing: 

self.blur_field = function (field) {
    $(field).css('background-color', '#eee');
    $(field).css('pointer-events', 'none');

    $(field).focus(function () {
        $(this).blur();
    });
};

Upvotes: 0

Chopchop
Chopchop

Reputation: 2949

The state is not changed in the browser even if the html said so.

To by pass this, I changed the field to readonly through javascript and changed the CSS to make it look like it's disabled.

->add('sampledBy', EntityType::class, array(
        'class' => 'AppBundle:FOSUser',
        'query_builder' => function (EntityRepository $er) {
            return $er->createQueryBuilder('u')
                ->orderBy('u.cn', 'ASC');
        },
        'choice_label' => 'cn',
        'disabled' => false
    ))

in the css 

.readonly{
background-color: transparent !important;
  border : 0px !important;
    box-shadow: none;
}
.disabled{
background-color: transparent !important;
  border : 0px !important;
    box-shadow: none;
}

Upvotes: 1

Related Questions