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] => 
)

这个ZERO困扰我。它总是将计数器重置为0，当用户想要在将来改变某些东西时，我害怕出现不必要的问题。我需要为用户提供更改或删除某些任务的选项。我担心这些行为会使MySQL陷入混乱。

我想将ID 1（或零）添加到第一组表单元素，并从最后一组元素设置计数器（因此，如果只输入1组，则下一组将具有ID 2 ofcourse）。然后我将收集所有POST数据并将其存储在带有FOR循环的MySQL中，而不必担心ID顺序。

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

我希望我能正确解释一切。所以重复一个问题：如何更改jquery以逐步创建元素ID并始终确保新元素ID是最后一个元素ID的+1？

Answer 1

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

你的javascript部分对我来说不清楚。你的问题究竟是什么？

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

Answer 2

您应该将输入命名为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"
            )
)

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

2 个答案: