动态创建的表单元素的唯一名称

Question

这里有几个问题涉及类似的主题，但我找不到解决我的具体案例的问题。

我有一个动态创建input[type="text"] 字段和input[type="radio"] 字段的脚本。我希望创建的字段能够生成最多 6 个添加字段的唯一名称。我怎么能用 jQuery 做到这一点？如何在 PHP 中为我的表单引用这些新创建的唯一名称？

jQuery:

var x = 1;
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        $(wrapper).append('
<input type="text" name="name" id="name"/>
<input type="radio" name="attend" id="attendC" value="cere" />
<input type="radio" name="attend" id="attendR" value="rece" />
<input type="radio" name="attend" id="attendB" value="both" />
<input type="radio" name="attend" id="attendN" value="neit" />
');
}
});

Answer 1

实际上有很多选择。但你会做的最好的事情是：

您的唯一 ID 必须是时间戳，您可以这样获取：

var uniqueId = Date.now() | 0;

所以你应该为所有这些生成一个数组，我的意思是：

var insertedIds = [];

该数组将保留您插入的 ID，并应在 POST 操作中传递给 PHP，因此您的代码将是：

var x = 1;
var insertedIds = [];
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        uniqueId = Date.now() | 0;
        $(wrapper).append('
            <input type="text" name="name" id="name"/>
            <input type="radio" name="'+uniqueId+'_col0" id="attendC" value="cere" />
            <input type="radio" name="'+uniqueId+'_col1" id="attendR" value="rece" />
            <input type="radio" name="'+uniqueId+'_col2" id="attendB" value="both" />
            <input type="radio" name="'+uniqueId+'_col3" id="attendN" value="neit" />
        ');
        insertedIds.push(uniqueId);
    }
});

如果您不使用 AJAX 将变量发布到 PHP，您可以像这样使用它：

$("yourSubmitButton").click(function(){
    $("yourForm").append("<input type='hidden' name='insertedIds' value='"+JSON.stringify(insertedIds)+"'/>");
});

如果你使用 AJAX，你可以这样使用：

$.ajax({
    //url,type staff etc.
    data:"insertedIds="+JSON.stringify(insertedIds) // and other data
});

这意味着您可以安全地在 PHP 中获取 id_col0,id_col1...。

Answer 2

您可以使用相同的变量 x 或另一个全局变量：

var x = 1;
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        $(wrapper).append('\
           <input type="text" name="name_0_"' + x + 'id="name"/>\
           <input type="radio" name="attend_1_"' + x + 'id="attendC" value="cere" />\
           <input type="radio" name="attend_2_"' + x + 'id="attendR" value="rece" />\
           <input type="radio" name="attend_3_"' + x + 'id="attendB" value="both" />\
           <input type="radio" name="attend_4_"' + x + 'id="attendN" value="neit" />\
       ');
    }
});

在 PHP 中，您只需检查名称的第一部分，而最后一部分（来自 _number_number）用于分组。