Getting HTML with the data using jQuery

Question

I have a form which has many elements (e.g. textarea, input, select), after users have entered some data the states of these elements should change.

For example, an input[type="radio"] element will have the attribute checked="checked" if a user has checked it. The value attribute of an input[type="text"] element will contain the text entered by user.

The problem is that the html string returned by $('#form1').html() does not contain these data.

Feel free to take a look at this example:

http://jsfiddle.net/cmNmu/

You can see that no matter what your inputs are, the html returned is still the same (having no attribute data).

Is there any easy way to collect the html including their states?

Thanks in advance.

Is it important to collect all the html or only the values ? — krtek, Feb 25 '11 at 11:23
@Krtek: Collecting only the values is easy, but I need all html. — bobo, Feb 25 '11 at 11:42
It's usually wrong to collect HTML, which is serialised data in text form. Iterate over DOM elements instead to preserve meaning and, incidentally, to make your life a lot easier. — Lightness Races in Orbit, Feb 25 '11 at 12:49
I think I understand what you want. May I rewrite your question? — Šime Vidas, Feb 25 '11 at 13:10

score 1 · Answer 1 · edited Feb 25 '11 at 12:47

1

People usually use $('#form1').serialize() to get the values. If html() doesn't return both the source and data, I don't think that there is something you can other than manually constructing the full html by looking at the data.

Live demo: http://jsfiddle.net/cmNmu/6/

edited Feb 25 '11 at 12:47

Šime Vidas

182,163
62
281
385

answered Feb 25 '11 at 11:26

kgiannakakis

103,016
27
158
194

score 1 · Answer 2 · answered Feb 25 '11 at 11:34

1

use below code getting the value of input type text via jQuery

alert($("input:text").val())

answered Feb 25 '11 at 11:34

xkeshav

53,360
44
177
245

score 1 · Answer 3 · answered Feb 25 '11 at 11:37

1

Maybe you could use the 'onblur' event handler to set the value of the element when you leave it

answered Feb 25 '11 at 11:37

trollchen

78
4

Imrul · Answer 4 · 2011-02-25T12:38:25.723

1

You should get the value using :

$('#form1').find(':input').val();
$('#form1').find(':radio[name=gender]:checked').val();

if you have multiple input then you can filter them bu their name or class or even id. Then you will need to select input using .find(':input[name=input_field_name]'). My Suggestion is : use name property instead of other property if you want to use form.

edited Feb 25 '11 at 12:38

answered Feb 25 '11 at 12:30

Imrul

3,456
5
32
27

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

By using the jQuery formhtml plugin written by gnarf:

jQuery html() in Firefox (uses .innerHTML) ignores DOM changes

The changes in the input elements can be reflected in the html string returned by formhtml().

Thank you very much everyone.

edited May 23 '17 at 12:04

Community

1
1

answered Feb 28 '11 at 06:46

bobo

8,439
11
57
81

Getting HTML with the data using jQuery

5 Answers5