How to alter the HTML of the value attribute for an input box?

Question

What I want to be able to do is alter the "value=" of an input text box using jQuery. The ultimate goal is to grab a form using .html() so I have all of the code, along with the values typed into the input boxes.

As an example I have this:

<span id="example">
<input type="text" value="" id="rate" />
</span>

If a user types into the input box I can save the data using .val, but what I want to do is grab the HTML so I can re-display the input box with the value.

If an user types "bob" into the input. Then I use:

var test = $('#example').html();

The variable 'test' holds the following:

<input type="text" value="" id="rate" />

What I want is:

<input type="text" value="bob" id="rate" />

How do I achieve this?

Answer 1

To alter the value of an input element with id rate you can use this.

$("#rate").val(newvalue);

To set the value to bob use

$("#rate").val("bob");

Answer 2

I have check your code and it is working fine. The only thing which is missing is the type of the input filed. You can try the following things

$('#example')[0].innerHTML

And Second one is the

$("#rate")[0].outerHTML

Hope that will help.

Answer 3

I believe this question a duplicate of: SO138893: jQuery html() in firefox (uses .innerHTML) ignores DOM changes. The answer there should solve your problem. I don't think this newer question should get deleted though - it might help someone else find their way to the other one.

Answer 4

How about not saving the actual HTML, but saving the attributes?

var attr = {
'value' : $('#rate').val(),
'type' : $('#rate').attr('type') }
//later on in the code or something:
var inp = $('<input />').attr('id', 'rate').attr(attr);

Answer 5

The ultimate goal is to grab a form using .html() so I have all of the code, along with the values typed into the input boxes.

You are on to a loser with this strategy. Form values are a separate layer of data which is stored apart from HTML attributes. The HTML value attribute is reflected in the defaultValue property of the object, not the value property.

Setting the value or checked/selectedness of a form control does not change the HTML DOM attributes; consequently serialising a form using innerHTML or html() will not give you form values — except in IE, due to a bug.

(And there are other bugs in IE regarding serialising forms with changed names. Just avoid using serialisation; remembering the values themselves from value or val() is much more reliable.)