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

Question

我找到了解决我问题的方法，但我需要一些额外的帮助:

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？

Answer 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"
            )
)