在Jquery中添加一组字段的最佳方法

时间:2012-12-05 05:04:34

标签: php jquery ajax

我正在创建一个CRM,我有一个名为“添加记录”的按钮当他们点击添加记录时我需要将以下内容附加到我的表单字段:

<div class="record">
Record Name: <br /><input name="recordName" type="text" /><br />
Record: <br /><input name="record" type="text" />
</div>

他们可以添加他们想要的任意数量的“记录”。

我的问题是,这样做的好方法是我可以收集未知数量的这些记录的所有数据并通过ajax提交。我知道所有ajax的东西,我只知道动态字段比我正在考虑做的更简单。

2 个答案:

答案 0 :(得分:1)

跟踪您在javascript中添加的数量,然后使用此“ID”。例如。如果你已经有一条记录(记录#0),则id = 1;

<div class="record" id="record-1">
  Record Name: <br /><input name="record[1][name]" type="text" /><br />
  Record: <br /><input name="record[1][record]" type="text" />
</div>

如果您在div上设置了ID,则可以在将来删除它,如果他们认为他们不想要它。如果您检测到验证错误等,请跳转到该div。

当发送到php时,您可以访问,

echo $_REQUEST['record'][0]['name'];

foreach($_REQUEST['record'] as $r)
  echo $r['name'];

有关详细信息,请参阅http://php.net/manual/en/faq.html.php#faq.html.arrays

答案 1 :(得分:0)

使用knockoutJS可以轻松实现这一目标

           var appVM = {
                  records: ko.observableArray(),

                  addRecord: function(){

                      records.push({ recordName:"" })
                  }
           }

           $(function(){
                  ko.applyBindings(appVM);
           });


           <div data-bind="foreach: records">
                <div data-bind="recordName"></div>
           </div>
           <form action="">
                <button data-bind="click: addRecord">Add Record</button>
                <input data-bind="value: records[records.length-1].recordName></input>
                <input type="submit">Save</input>
           </form>