Get HTML code of Filled form using jQuery

Question

I have a webpage with different controls. I have to get html source on button click for a particular div element's controls with values.

jQuery .html() method gives me html source of controls without values, but I require html source with user selected values.

Answer 1

Try iterating over each <input> and setting it's value attribute to it's DOM value before accessing the html.

jsFiddle: http://jsfiddle.net/AWK9S/3/

$('form input').each(function()
{
    this.setAttribute('value',this.value);
    if (this.checked)
        this.setAttribute('checked', 'checked');
    else
        this.removeAttribute('checked');
});

$('form select').each(function()
{
    var index = this.selectedIndex;
    var i = 0;
    $(this).children('option').each(function()
    {
        if (i++ != index)
            this.removeAttribute('selected');
        else
            this.setAttribute('selected','selected');
    });
});

$('form textarea').each(function()
{
    $(this).html($(this).val());
});

jsFiddle: http://jsfiddle.net/AWK9S/3/