动态添加表单元素，将它们存储到 MySQL 并在将来更改/删除它们答案

【问题标题】：Dynamical add form elements, store them to MySQL and change/delete them in future动态添加表单元素，将它们存储到 MySQL 并在将来更改/删除它们
【发布时间】：2013-12-02 21:00:32
【问题描述】：

我为我的问题找到了这个解决方案，但我需要一些额外的帮助：

How to use jQuery to add form elements dynamically

我有一个表格（这里我将复制一个简短的版本），它用于用户输入一些任务。用户可以在 2 年内输入任意数量的任务。 脚本运行正常，但我遇到了元素 ID 计数器的问题。大概稍微修改一下javascript就可以解决。

所以这里是html：

<div class="extraNew">
    <div class="row">
        <label>Task:</label>
        <textarea class="span3" placeholder="Task" type="text" name="task"></textarea>
        <label>Description:</label>
        <textarea class="span3" placeholder="Description" type="text" name="description"></textarea>
    </div>
</div>
<div id="container"></div>
<div class="row">
    <a href="#" id="addRow" class="addRow">Add row</p></a>
</div>

这里是javascript

<script type='text/javascript'>//<![CDATA[ 
$(function(){
 $(document).ready(function () {
     $('<div/>', {
         'class' : 'extra', html: GetHtml()
     }).appendTo('#container');
     $('#addRow').click(function () {
           $('<div/>', {
               'class' : 'extra', html: GetHtml()
     }).hide().appendTo('#container').slideDown('slow');

     });
 });
 function GetHtml()
{
      var len = $('.extra').length;
    var $html = $('.extraNew').clone();
    $html.find('[name=task]')[0].name="task" + len;
    $html.find('[name=description]')[0].name="description" + len;
    return $html.html();    
}
});//]]>
</script>

但是我之后得到的 POST 结果不太好：

Array (
    [task] => blah
    [description] => blah
    [task0] => blah
    [description0] => blah
    [task1] => blah
    [description1] => blah ... )

如果我只填写此表格一次，而不添加新行，我会得到以下结果：

Array
(
    [task] => blah
    [description] => blah
    [task0] => 
    [description0] => 
)

这个零让我很困扰。它总是将计数器重置为 0，当用户将来想要更改某些内容时，我担心会出现不必要的问题。我需要为用户提供更改或删除某些任务的选项。恐怕这些动作会把 MySQL 弄得一团糟。

我想将 ID 1（或零）添加到第一组表单元素，并从最后一组元素设置计数器（所以如果只输入一组，下一组当然会有 ID 2）。之后我将收集所有 POST 数据并使用 FOR 循环将其存储在 MySQL 中，而无需担心 ID 顺序。

使用相同的方法，我将通过 PHP 输出数据。所以可能，我将首先使用 PHP 创建初始表单并从 MySQL 查询 - 如果 MySQL 中已经存在某些行，则显示它们并增量设置计数器；如果返回 0 行，则显示从 1（或零）开始的元素。

我希望我正确地解释了一切。所以重复这个问题：如何更改 jquery 以增量创建元素 ID 并始终确保新元素 ID 与上一个元素 ID 相比 +1？

【问题讨论】：

有人可以帮我吗？ stackoverflow.com/questions/44120124/…

标签： php jquery mysql forms dynamic

【解决方案1】：

您应该将输入命名为 tasks[task][0] 和 task[description][0]，这样您的初始标记将是：

<div class="extraNew">
    <div class="row">
        <label>Task:</label>
        <textarea class="span3" placeholder="Task" type="text" name="tasks[task][0]"></textarea>
        <label>Description:</label>
        <textarea class="span3" placeholder="Description" type="text" name="tasks[description][0]"></textarea>
    </div>
</div>
<div id="container"></div>
<div class="row">
    <a href="#" id="addRow" class="addRow">Add row</p></a>
</div>

那么当你向 dom 添加一个新的对时，你应该这样做：

$('#addRow').click(function () {
    var extraHTML = '<div class="extraNew">\
    <div class="row">\
        <label>Task:</label>\
        <textarea class="span3" placeholder="Task" type="text" name="tasks[task][EXTRAINDEX]"></textarea>\
        <label>Description:</label>\
        <textarea class="span3" placeholder="Description" type="text" name="tasks[description][EXTRAINDEX]"></textarea>\
    </div>\
</div>';
var count = $('.extraNew').length;
extraHTML = extraHTML.replace(/EXTRAINDEX/g, count);
$(extraHTML).appendTo('#container').hide().slideDown('slow');
});

然后在帖子中你会得到一个很好的表单数组：

Array( 
     [0] => Array( 
              [task] => "whatever", 
              [description] => "whatevermore"
            ), 
     [1] => Array( 
              [task] => "whatever1", 
              [description] => "whatevermore1"
            )
)

【讨论】：

谢谢回复，但有问题...我无法添加新行（没有任何反应）并且我的 POST 结果不同：Array ( [tasks] => Array ( [task] => 数组（[0] => 一些文本）[描述] => 数组（[0] => 一些文本）））
起来，对不起。我在头部而不是正文中添加了脚本。它似乎有效。

【解决方案2】：

制作像name="task[]". 这样的名称数组，这将有助于发布所有值。

你的 javascript 部分对我来说不是很清楚。你的问题到底是什么？

您可以使用隐藏字段来跟踪 ID。每次添加项目时，将其增加一个。或者第二个选项是为您的字段分配一个类。并获得班级规模。我想你在问这个。

【讨论】：