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
– krtek, Commented Feb 25, 2011 at 11:23
@Krtek: Collecting only the values is easy, but I need all html. — bobo
– bobo, Commented Feb 25, 2011 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
– Lightness Races in Orbit, Commented Feb 25, 2011 at 12:49
I think I understand what you want. May I rewrite your question? — Šime Vidas
– Šime Vidas, Commented Feb 25, 2011 at 13:10

xkeshav · Accepted Answer · 2011-02-25 11:34:59Z

1

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

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

answered Feb 25, 2011 at 11:34

xkeshav

54.2k47 gold badges183 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

trollchen · Accepted Answer · 2011-02-25 11:37:56Z

1

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

answered Feb 25, 2011 at 11:37

trollchen

784 bronze badges

Comments

Imrul · Accepted Answer · 2011-02-25 12:38:25Z

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, 2011 at 12:38

answered Feb 25, 2011 at 12:30

Imrul

3,5165 gold badges34 silver badges27 bronze badges

Comments

Šime Vidas · Accepted Answer · 2011-02-25 12:47:57Z

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, 2011 at 12:47

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

answered Feb 25, 2011 at 11:26

kgiannakakis

104k28 gold badges163 silver badges197 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:04:11Z

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, 2017 at 12:04

CommunityBot

11 silver badge

answered Feb 28, 2011 at 6:46

bobo

8,79711 gold badges61 silver badges83 bronze badges

Collectives™ on Stack Overflow

Getting HTML with the data using jQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related