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

Posted 2023-05-09

【中文标题】表单不发布 JQ 添加的输入字段

【英文标题】：Form does not post JQ added input fields

【发布时间】：2016-07-25 02:53:05

【问题描述】：

我有一个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>

在这种形式中，我动态地向“pv”和“options”添加新的输入。

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

动态添加新项目的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;
  );


);

因此，当我将项目添加到“pv”时，它确实会回发数组。当我将项目添加到“选项”时，它只会回发原始项目（而不是 JQ 添加的输入）。我检查了网络日志，它没有被发回。

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

【参考方案1】：

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

我更新后的 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>