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

Solution 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());
    });
});

Solution 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());
        }
    }
});

Solution 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());
        }
    }
});