JQuery val() returns empty string

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.

Answer 2

Daren's answer definitely hit the nail on the head.

However, there are times when you want to return the value of multiple elements that have the same ID. (Note: IDs should be unique. Classes, on the other hand, don't need to be unique.)

To accomplish this you need to iterate with the .each() method. Most jQuery methods that return an object implicitly iterate. .val() returns a string, not an object. Because of that, it needs an explicit iteration loop.

You can do use the .each() method like this.

$('.discount').each(function(){
    $(this).val()
});

Please note that I changed the OP's ID to a class so that it is correct HTML.