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

I found this solution for my problem but I need some additional help:

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

How to use jQuery to add form elements dynamically

如何使用jQuery动态添加表单元素

I have a form (here I'll copy a short version), and it is used for entering some tasks by users. Users can enter as many tasks as they like in period of 2 years. The script is working correctly, but I have a problem with counter of element IDs. Probably it can be solved with slight modification of javascript.

我有一个表单(这里我将复制一个简短的版本),它用于输入用户的一些任务。用户可以在2年内输入任意数量的任务。脚本工作正常,但我的元素ID计数器有问题。可能只需稍加修改javascript即可解决。

So here is html:

所以这是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>

And here is javascript

这是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>

But POST results I get afterwards are not so good:

但后来我得到的POST结果并不那么好:

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

And If I fill this form only once, without adding new row I get this result:

如果我只填写此表单一次,而不添加新行,我会得到以下结果:

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

This ZERO bothers me. It always resets the counter to 0, and I'm afraid of unwanted problems when users will want to change something in the future. I need to give users an option to change or delete some task. I'm afraid that these actions will make a mess in MySQL.

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

I would like to add ID 1 (or zero) to the first set of form elements, and set counter from last set of elements (so if only 1 set is entered, the next set will have ID 2 ofcourse). And afterwards I will collect all POST data and store it in MySQL with FOR loop without worrying of ID order.

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

And with the same method I will output the data via PHP. So probably, I will first create initial form with PHP and query from MySQL - If some rows already exists in MySQL, display them and set counter incrementally; and if returns 0 rows, display elements starting from 1 (or zero).

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

I hope I explained everything correctly. So to repeat the question: How to change jquery to create element IDs incrementally and always making sure that new element ID is +1 from last element ID?

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

2 个解决方案

#1

You should name your inputs like tasks[task][0] and task[description][0] so your initial markup would be:

您应该将您的输入命名为任务[task] [0]和任务[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>

then when you add a new pair to the dom you should do something like:

然后当你向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');
});

Then in the post you'll get a nice array of the form:

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

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

2 个解决方案

#1

更多相关文章

随机推荐