Search code examples
jqueryasp.net-mvc

input field value is empty when submit form after JQuery set value to the input field


I have a drop down list and a input field on the page using MVC. I use JQuery to get the value from Controller to set value for this input field depends on the drop down list selection. I noticed the input field is populated on the page, but the value attribute is still empty checked using browser Developer Tool. I use

 @Html.EditorFor(model => model.inputFieldID, new { htmlAttributes = new { @id = "inputFieldID"} })

In JQuery ajax I set the value like:

$("#inputFieldID").val(NewValueFromDB);

and I can see value is set using

alert($("#inputFieldID").val());

but on the page, the value attribute field is empty, what did I miss?

UPDATE:

I figured out that because I try to make the input field not editable, so I gave @disabled = "disabled" to it. That seems stopping the value get passed to Controller.

But my question is, if I want to make the input field not editable, but still can pass the value to Controller what should I do?

ANSWER Use readonly instead of disabled attribute and give a grey background-color to make it look like not editable.

Thank you.


Solution

  • The jQuery .val() method updates the element's value property and not the attribute value.

    The attribute is mainly used to initialize the property.

    Normally you do not have a need for the value attribute of input elements.

    See Properties and Attributes in HTML