jquery - 动态地向表单添加字段 - 当您提交表单时，post缺少数据

Question

背景资料

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

问题

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

测试细节

使用“addname”按钮，除了表单上的默认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”。 它将覆盖任何提交事件处理程序