jquery - 动态添加字段到表单 - 提交表单时缺少数据

Question

背景信息

我有一个表单，除其他外，它允许用户使用 jquery 动态添加名字/姓氏文本字段。

问题

当用户提交数据时，POST 中缺少通过 jquery 创建的附加字段和数据。

测试详情

使用“添加名称”按钮，除了表单上的默认 fname / lname 字段外，我还添加了两个或三个附加名称。然后我提交数据。数据缺少动态添加的字段。

我尝试过/检查过的内容

1. 确保当我添加新行“名字”/“姓氏”文本框时，每个控件都有一个唯一的“名称”。如您所见，我为名字字段分配了一个自定义类名，然后在 jquery 中我计算了我已经拥有的名字字段的数量。我将该值增加 1，然后将新数字烘焙到我创建的新文本字段的名称中。使用 F12 调试窗口，我可以看到 HTML 代码将这些计数器烘焙到名称中。

2. 确保动态添加的数据行在<FORM>内

3. 确保我在 FORM 中有一个提交按钮。

我不确定我还应该检查什么。

如果您有任何建议，我将不胜感激。

//Here's of the two jquery methods I have that allows users to dynamically add new fields / data to the form: 

$("#addname").click(function() {
  var numItems = $('.widgetname').length; //count all items with widgetname class
  numItems += 1;
  htmlstring = "<tr>";
  htmlstring += "<td><input class='form-control widgetname' type='input' placeholder='First Name' name='fname" + numItems + "'/></td>";
  htmlstring += "<td colspan='2'><input class='form-control' type='input' placeholder='Last Name' name='lname" + numItems + "' /></td>";
  htmlstring += "</tr>";
  $("#tcsection").before(htmlstring);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <tr>
    <td colspan="3" class="btn-warning">
      <?php echo validation_errors(); ?>
    </td>
    <tr>
      <?php echo form_open( 'widget/assign'); ?>
      <tr>
        <td colspan="3">
          <div class="form-group">
            <select class="form-control" name="widgetlist" id="widgetnum">
            </select>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <div class="form-group">
            <select class="form-control" placeholder="Site:" name="site" id="site">
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input class="form-control" type="input" placeholder="Location" name="location" />
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input class="form-control" type="input" placeholder="Department" name="department" />
        </td>
      </tr>
      <tr id="listofnames">
        <td>
          <input class="form-control widgetname" type="input" placeholder="First Name" name="fname" />
        </td>
        <td>
          <input class="form-control" type="input" placeholder="Last Name" name="lname" />
        </td>
        <td>
          <button id='addname' type="button" class="btn btn-info btn-circle"><i class="fa fa-plus"></i>
          </button>
        </td>
      </tr>
      <tr id="tcsection">
        <td colspan="3">&nbsp;</td>
      </tr>
</table>
<table class="table table-bordered table-hover">
  <tr>
    <td colspan="5">
      <h2>TC</h2>
    </td>
  </tr>
  <tr id="tcs">
    <td>
      <input class="form-control starttc" type="input" placeholder="UTC Start Time (format 00:00:00)" name="starttime" />
    </td>
    <td>
      <input class="form-control" type="input" placeholder="UTC End Time (format 00:00:00)" name="endtime" />
    </td>
    <td>
      <input class="form-control" type="input" placeholder="Extension" name="extension" />
    </td>
    <td>
      <input class="form-control" type="input" placeholder="Domain" name="domain" />
    </td>
    <td>
      <button id='addtc' type="button" class="btn btn-success btn-circle"><i class="fa fa-plus"></i>
      </button>
    </td>
  </tr>
  <tr id="submitbtnsection">
    <td colspan="5">
      <input type="submit" name="submit" class="btn btn-primary" value="Assign Widget" />
    </td>
  </tr>
  </form>
</table>

Answer 1

尝试将表单移到表格外打开。

我现在看到奇怪的 html：

<tr> <?php echo form_open( 'widget/assign'); ?> <tr> 

我期待

<?php echo form_open( 'widget/assign'); ?>
<table class="table table-bordered table-hover">
  <tr>
    <td colspan="3" class="btn-warning">
      <?php echo validation_errors(); ?>
    </td>

PS：如果您打算使用脚本提交表单，则绝不应将 name="submit" 用于任何表单元素。它将覆盖任何提交事件处理程序