jquery - 使用 jQuery 保存 html 表单布局和值

Question

我正在尝试保存表单布局，包括完整的 html 以及复选框状态和字段输入值。这是示例表单:

<div id="formRaw">
  <div class="block-group">
    <label class="checkbox">
      <input value="Internet Explorer" name="checkd[]" type="checkbox">
      Internet Explorer</label>
    <label class="checkbox">
      <input value="Firefox" name="checkd[]" type="checkbox">
      Firefox</label>
    <label class="checkbox">
      <input value="Chrome" name="checkd[]" type="checkbox">
      Chrome</label>
  </div>
  <div class="block-group">
    <input name="fullname" type="text">
  </div>
</div>

这是js部分:

 $(document).ready(function() {
     $('body').on('click', 'button[name=dotemp]', function() {
         $.ajax({
             type: "post",
             url: "process.php",
             dataType: 'json',
             data: {
                 htmlcode: $("#formRaw").html()
             },
             success: function(json) {
             }
         });
     });
 })

我希望能够捕获复选框状态以及输入框的输入值。一切正常，但无论我选择一个或多个复选框或在全名字段中输入值，它都不会被捕获。

首选结果应该是这样的:

<div id="formRaw">
  <div class="block-group">
    <label class="checkbox">
      <input value="Internet Explorer" name="checkd[]" type="checkbox">
      Internet Explorer</label>
    <label class="checkbox">
      <input value="Firefox" name="checkd[]" type="checkbox" checked="checked">
      Firefox</label>
    <label class="checkbox">
      <input value="Chrome" name="checkd[]" type="checkbox" checked="checked">
      Chrome</label>
  </div>
  <div class="block-group">
    <input name="fullname" type="text" value="My Name">
  </div>
</div>

Answer 1

问题是 html attributes 不会在用户输入时更新....元素 properties 会。

要将值和属性存储回 html，您需要循环返回表单并将这些值映射为原始 html 中的属性

这样的事情会让你开始

var $form = $("#formRaw");

var $clone = $form.clone()
$clone.find(':input').each(function () {
    var $input = $(this);
    // start an attribute object later use with attr()
    var attrs = {
        value: $input.val()
    }
    // case for radios and checkbox
    if ($input.is(':radio,:checkbox')) {
        if (this.checked) {
            attrs.checked = 'checked'
        }else{
            // make sure attributes are removed that might be there from initial load
            $input.removeAttr('checked');
        }
    }
    // add the attributes to element
    $input.attr(attrs);

});

 var html = $clone.html();

我没有涵盖所有类型的表单控件，只是一些入门的基础知识

DEMO