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) {
             }
         });
     });
 })

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

首选结果应该是：

<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 properties没有更新用户输入....元素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();可以。

要将值和属性存储回html，您需要在表单上循环并映射这些值以在原始html中指定为属性

这样的事情会让你开始

ghci

我没有涵盖所有类型的表单控件，只是一些基础知识来启动它

的 DEMO

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

1 个答案: