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

Posted 2023-05-09

【中文标题】动态创建的表单元素的唯一名称

【英文标题】：Unique Name For Dynamically Created Form Element

【发布时间】：2016-08-27 16:58:00

【问题描述】：

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

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

);

【问题讨论】：

php 是服务器端，jQuery 是客户端。使用 php 生成 id 的服务器端，然后在您的 javascript <input type=text" name="name" id="<?php echo json_encode($name_variable); ?>"

中将它们用作 id

【参考方案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...。

【参考方案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）用于分组。

【讨论】：

我使用了这个方法，但是我花了一点时间才发现你的连接语法是错误的。应该是<input type="radio" name="attend'+x+'" id="attend'+x+'" value="rece" />。每个单选按钮的名称必须相同。谢谢你让我开始。赞成