Question

This is very puzzling and I am not even sure what code should I post here. Yet the problem is very simple.
I have a form in a JQuery modal dialog where I am doing some price calculations. Among others, I have a field Discount. Presented as:

<div class="editor-label">
    @Html.LabelFor(model => model.Discount)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Discount, new { size = 10 })
</div>

I see in the Firebug debugger, DOM tab, that this field has a value of 20. And it is visible on the form, of course. But calling:

 $('#Discount').val()

returns an empty string.
And this is the only field that has this problem. Calling val() for other fields returns correct values. Even clicking submit and debugging the MVC action for the model submitted, I see that the value for Discount is there. It is just the JQuery function that returns an empty string and only for this field.

I know this is a bit of an abstract question, but has anyone ever had an experience like this?

Thank you

Generated HTML:

<div class="editor-label">
  <label for="Discount">Popust (%)</label>
</div>
<div class="editor-field">
  <input id="Discount" class="text-box single-line valid" type="text" value="0" name="Discount" data-val-range-min="0" data-val-range-max="100" data-val-range="Vredonst mora biti izmedju 0 i 100" data-val-number="Polje Popust (%) mora biti broj" data-val="true" size="10">
</div>

While DOM tab in Firebug for this element shows value: “20”

Answer 1

Check that id ‘Discount’ is unique.

When putting multiple forms on a single page I leave the ‘name’ alone but always prefix the id of the ‘form’ element to the id of each ‘value’.

Saves me alot of headaches.