jQuery - results of DOM manipulation can't be assigned to a variable?

Using jQuery, I change the value of an input text field through some process. After the process is done, I need to capture this change and apply it to another process. My problem is that I can't seem to capture this change and assign it to a variable. I know the changes are happening because the DOM is getting updated. Furthermore, this variable assignment works in IE, but not for the other browsers I tested.

Below is a snippet to prove my point (and you can see this online here: http://jsfiddle.net/xMwAE/).

<form>
    <input type="hidden" name="my_hidden" value="Hidden Field" />
    <input type="text"   name="my_text"   value="Text Field"   />
</form>


$().ready(function() {
    $('input[name=my_hidden]').val('Hello Hidden Field');
    $('input[name=my_text]').val('Hello Text Field');

    // Display
    var temp = $('form').html();

    // Though the DOM is updated with the ne开发者_开发技巧w values. The variable temp
    // does not capture the changes to the input text field, but captures
    // the change in the hidden field. When in IE, temp captures the 
    // changes in both fields.
    alert(temp);
});

Obviously, I need consistent behavior across browsers. Any ideas what's going on?

I don't get any trusted idea what happens, but somehow there should be a difference between setting the value as a member (input.value) or setting the value as a attribute-node.

This works for me :

$('input[name=my_text]').each(function()           
{ this.setAttribute('value','Hello Text Field');});

I guess its a bug in innerHTML, see bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=535992

Alternatively, you can store the values of your fields into array and use however you like like this:

var data = [];
$('form :input').each(function(){
  data.push(this.value);
});

Now you can check for values like this:

alert(data[0]);
alert(data[1]);