Question

我有一个html表单

    <form action="/create" method="POST" class="form-group">

  <div class="form-group row">
    <label for="title" class="col-sm-2 form-control-label">Title</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="title" placeholder="Title" name="title">
    </div>
  </div>

  <div class="form-group row add-field-form ">
    <label for="pv" class="col-sm-12 form-control-label ">pv</label>
    <div class="entry input-group col-sm-10">
      <input class="form-control" name="pv" type="text" placeholder="Type something" />
      <span class="input-group-btn">
                            <button class="btn btn-success btn-add" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>

  <div class="form-group row add-field-form ">
    <label class="col-sm-12 form-control-label ">Options</label>
    <div class="entry input-group col-sm-10">
      <input type="text" class="form-control" id="options1title" name="options[1][title]" />
      <span class="input-group-btn">
                            <button class="btn btn-success btn-add" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>
</form>

在这种形式中，我动态地为＆＃34; pv＆＃34;添加新的输入。和＆＃34;选项＆＃34;。

选项将像一个子对象，它将拥有自己的子属性，我将需要回发一个带有子属性的选项数组。

JS动态添加新项目：

$(document).ready(function() {
  var index = 1;
  $(document).on('click', '.btn-add', function(e) {
    e.preventDefault();
    index++;

    var controlForm = $(this).parents('.add-field-form'),
      clonedEntry = $(this).parents('.entry:first').clone(),
      newEntry = $(clonedEntry).appendTo(controlForm);

    newEntry.find('input').val('');
    newEntry.find('input').each(function() {
       var newName = $(this).attr('name').replace(/[0-9]/g, index);
       var newId = $(this).attr('id').replace(/[0-9]/g , index);
       $(this).attr('name', newName);
       $(this).attr('id', newId);
    });

    controlForm.find('.entry:not(:last) .btn-add')
      .removeClass('btn-add').addClass('btn-remove')
      .removeClass('btn-success').addClass('btn-danger')
      .html('<span class="glyphicon glyphicon-minus"></span>');
  }).on('click', '.btn-remove', function(e) {
    $(this).parents('.entry:first').remove();

    e.preventDefault();
    return false;
  });


});

所以当我向＆＃34; pv＆＃34;添加项目时它会回发数组。当我将项目添加到＆＃34;选项＆＃34;它只回发原始项目（不是JQ添加的输入）。我检查了网络日志，但没有回发。

我猜html结构没有问题，如果我将JQ生成的确切html复制/粘贴到我原来的html文件中，我可以回发数据。

Answer 1

看来，要使表单成为有效的HTML元素，它应该有一个块元素。所以我在<div>元素中包含了一个全局<form>，它开始工作。

我更新的html如下所示：

<form action="/create" method="POST" class="form-group">
 <div>
  <div class="form-group row">
    <label for="title" class="col-sm-2 form-control-label">Title</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="title" placeholder="Title" name="title">
    </div>
  </div>

  <div class="form-group row add-field-form ">
    <label for="pv" class="col-sm-12 form-control-label ">pv</label>
    <div class="entry input-group col-sm-10">
      <input class="form-control" name="pv" type="text" placeholder="Type something" />
      <span class="input-group-btn">
                            <button class="btn btn-success btn-add" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>

  <div class="form-group row add-field-form ">
    <label class="col-sm-12 form-control-label ">Options</label>
    <div class="entry input-group col-sm-10">
      <input type="text" class="form-control" id="options1title" name="options[1][title]" />
      <span class="input-group-btn">
                            <button class="btn btn-success btn-add" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
      </button>
      </span>
    </div>
  </div>
 </div>
</form>

表单不会发布JQ添加的输入字段

1 个答案: