asp.net and jQuery problem: Client elements don't get updated when the form is posted back

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'); } }

Any thoughts on why this is happening?

EDITED:

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.