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?

Phoenix has your answer and you should check out the selectors that are available for forms: http://docs.jquery.com/Selectors — Mottie, Sep 19 '09 at 07:15
Dupe: http://stackoverflow.com/questions/1388893/jquery-html-in-firefox-uses-innerhtml-ignores-dom-changes — gnarf, Sep 19 '09 at 08:14

score 1 · Answer 1 · edited May 23 '17 at 10:27

1

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.

edited May 23 '17 at 10:27

Community

1
1

answered Sep 19 '09 at 08:17

gnarf

105,192
25
127
161

Thanks, i didn't even know this issue even existed... And for actually reading the OP question... :) – J.C. Inacio Sep 19 '09 at 09:31
I didn't realize this was confined to a browser issue. The other question didn't even come up when I searched before asking. – techguytom Sep 19 '09 at 21:51

score 1 · Accepted Answer · answered Sep 19 '09 at 12:16

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.)

I agree on the strategy being wrong on this. I'll come up with another way, so much for the easy way :) — techguytom, Sep 19 '09 at 21:50

rahul · Answer 3 · 2009-09-19T05:59:46.127

0

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");

edited Sep 19 '09 at 05:59

answered Sep 19 '09 at 05:47

rahul

184,426
49
232
263

Although I'm realizing now that you might be on a browser other than Firefox (which displays this bug) - This doesn't solve the problem at all: http://jsbin.com/uniko – gnarf Sep 19 '09 at 08:34

score 0 · Answer 4 · answered Sep 19 '09 at 06:39

0

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.

answered Sep 19 '09 at 06:39

Asim Sajjad

2,526
10
36
73

score 0 · Answer 5 · answered Sep 19 '09 at 08:56

0

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);

answered Sep 19 '09 at 08:56

Pim Jager

31,965
17
72
98

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

5 Answers5