Question

I have a web form that contains lots of JavaScript functionalities to manipulate the DOM.
This is achieved using AJAX to call a service that will return me whatever I have to do, such as hiding elements, cascading drop downs, removing and inserting new items to a select, etc.

Everything works as expected apart from one particular function. This function only disables and sets a default value in a select element depending on what my AJAX call returned. For instance, let’s say I had selected “foo” from the following select and saved the record:

<select id="mySelect2">
  <option value="0">Default</option>
  <option value="foo">Foo</option>
  <option value="another_foo">Foo 2</option>
</select>

Great! Now I have changed other element in my web form that triggered off my AJAX call. The returned data tells me that I should select Default and disable the select element. This works just fine. But, when I save the record again and verify it in the DB the Default value of 0 in this case is not being saved. The record remains with the previous selected item (“foo”).

If you are curious, I using the following code to accomplish this:

1. Binds the AJAX call

   $('myElement').change(GetData);
   

2. GetData method

   $.ajax({
       type: 'POST',
       url: 'myUrl',
       data: "{'id':'" + myIdFromMyElement + "'"}",
       contentType: 'application/json; charset=utf-8',
       dataType: 'json',
       success: OnSuccess,
       error: OnError
   });
   

3. Manipulate the select element according to the returned data:

   function OnSuccess(data, textStatus) { 
       if (data.d.DisableMySelect2){
           $('#mySelect2').val('0');
           $('#mySelect2').attr('disabled', 'disabled');
       }
   }
   

Why is this happening?

EDIT:

Further investigations shown that my web form does not unbind the changed value correctly but when I go Request.Form["mySelect2"] I can actually see the updated value, so apparently there is nothing wrong with the client side of things.

Answer 1

I think that this is happening because the form elements that are disabled aren’t submitted with the form.

You may want to handle form submission trough an AJAX call or use a hidden input to store the value of the selected option of the disabled SELECT element.