jquery setting hidden input value not working as expected in IE7 and IE8

Question

Continuing adopting my code to work with IE...

I have a hidden div containing a form to edit some information. When the user selects the item to edit, this div is shown and the fields are populated with the information for the item. That divs (in simplified terms) looks like this:

<div id="editform">
<form action="" method="post" id="qform" name="qform">
    First param: <input name="field1" id="field1"/> <br/>
    Second param: <input name="field2" id="field2"/> <br/>
    ...

    <input type="hidden" name="qid" id="qid" value=""/>

    <img id="submit" src="..." alt="..." title="..." />
</form>

I use jquery to set the values into the fields. My function for opening up the editing div looks something like this:

function edit_item(item_id) {
    item = get_item(item_id);    //this will return a JS object
    $('#field1').val(item.property1);
    $('#field2').val(item.property2);
    ...
    $('#qid').val(item_id);
    $('#submit').click(function() {
        alert($('#qid').val());
        $('#qform').ajaxSubmit();
    });
}

All of this works fine in FF, Opera, Webkit and IE 9, however in IE7 and IE8, I'm having a strange problem. I can see the item_id being set correctly in the edit_item function, however as soon as that function completes, the hidden input value (qid) gets reset to the empty string. When the form is being ajax-submitted, the alert shows the value to be an empty string despite it being set correctly. Interestingly, all other fields are fine. And it works correctly in IE 9.

What am I missing here? Many thanks in advance.

Answer 1

This is totally stupid, and it shouldn't be the case, however:

$('#field1').val(item.property1);

did not work. Yet

$('#field1').attr("value", item.property1);

worked fine. I'm leaving it at that.

Answer 2

Solution for IE without JQuery in pure JavaScript does not look too complicated:

document.getElementById(id).setAttribute('value', value);

Answer 3

In addition to Aleks G's answer, I found out that value attribute must not be defined implicitly in the hidden element in order to jQuery .setAttr() and .val() work without issue in IE8.

See here for more details: jQuery .val() setter not working?