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

Question

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.

Gabriele Petrioli · Accepted Answer · 2017-09-28 19:33:00Z

1

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

answered Sep 28, 2017 at 19:33

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xiao Han Over a year ago

Thanks, 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.

Gabriele Petrioli Over a year ago

@XiaoHan to make it not editable use the readonly attribute.

Xiao Han Over a year ago

Thank you, it seems I have to use readonly and apply some background-color style to the input field to make it looks like not editable.

Dzmitriy Salodki · Accepted Answer · 2024-08-15 15:45:21Z

0

the same for me I use

$('.dataFields').find('input[type="text"]').prop('disabled', true);
$('.dataFields').find('input[type="number"]').prop('disabled', true);

instead of jquery val('')

answered Aug 15, 2024 at 15:45

Dzmitriy Salodki

1371 gold badge2 silver badges9 bronze badges

1 Comment

Dzmitriy Salodki Over a year ago

I set val('') and submit data. Asp.net core return some not empty datas but fields empty

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related