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


Unique Name For Dynamically Created Form Element

这里有几个问题涉及类似的主题,但我找不到任何一个能解决我的具体问题。

我有一个动态创建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" />
');
}
});

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

你的唯一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。

您可以使用相同的变量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)用于分组。