Getting HTML with the data using jQuery

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.开发者_如何学Cnet/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.

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

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

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

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.

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/

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.