How to get form html() via jQuery including updated value attributes?

Question

Is it possible to get the html of a form with updated value attributes via the .html() function?

The (simplified) HTML:

<form>
    <input type="radio" name="some_radio" value="1" checked="checked">
    <input type="radio" name="some_radio" value="2"><br><br>
    <input type="text" name="some_input" value="Default Value">
</form><br>
<a href="#">Click me</a>

The jQuery:

$(document).ready(function() 
{
    $('a').on('click', function() {
        alert($('form').html());
    });
});

Here is an example of what I am trying to do: http://jsfiddle.net/brLgC/2/

After changing the value of the input and pressing "click me" it still returns the HTML with the default values.

How can I simply get the updated HTML via jQuery?

Answer 1

If you really must have the HTML, you need to actually update the "value" attribute manually: http://jsfiddle.net/brLgC/4/

$(document).ready(function() 
{
    $('a').on('click', function() {
        $("input,select,textarea").each(function() {
           if($(this).is("[type='checkbox']") || $(this).is("[type='checkbox']")) {
             $(this).attr("checked", $(this).attr("checked"));
           }
           else {
              $(this).attr("value", $(this).val()); 
           }
        });
        alert($('form').html());
    });
});

Answer 2

RGraham's answer wasn't working for me so I modified it to:

$("input, select, textarea").each(function () {
    var $this = $(this);

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
        if ($this.prop("checked")) {
            $this.attr("checked", "checked");
        }
    } else {
        if ($this.is("select")) {
            $this.find(":selected").attr("selected", "selected");
        } else {
            $this.attr("value", $this.val());
        }
    }
});

Answer 3

Lachlan's works "almost" perfect. The issue is when the form is saved and then restored then saved again the radio and checkboxs do not uncheck and instead just keep compounding. Simple fix below.

$("input, select, textarea").each(function () {
    var $this = $(this);

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
        if ($this.prop("checked")) {
            $this.attr("checked", "checked");
        } else {
            $this.removeAttr("checked");
        }
    } else {
        if ($this.is("select")) {
            $this.find(":selected").attr("selected", "selected");
        } else {
            $this.attr("value", $this.val());
        }
    }
});

Answer 4

The working version along with textarea is below

$("input, select, textarea").each(function () {
    var $this = $(this);

    if ($this.is("[type='radio']") || $this.is("[type='checkbox']")) {
        if ($this.prop("checked")) {
            $this.attr("checked", "checked");
        } else {
            $this.removeAttr("checked");
        }
    } else {
        if ($this.is("select")) {
            $this.find(":selected").attr("selected", "selected");
        } else if ($this.is("textarea")) {
                $this.html($this.val());
        } else {
            $this.attr("value", $this.val());
        }
    }
});