Javascript 添加更多输入的唯一名称

我正在尝试创建一个添加更多按钮，它将创建一个新的输入字段。但是，我想为它设置一个唯一的名称

我试图寻找答案

因此，基本上，我试图使我的namefield唯一的方法是使用php方法

rand（）

。其概念是-当单击“添加更多”按钮时，它将在

rand（）

给我的号码上附加一个名称

但是，所发生的情况是，它接受由

rand（）

生成的值，并将其应用于生成的所有输入的所有名称

这是我的代码和我尝试的内容：

HTML:

<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[<?php echo rand(); ?>]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">Add More</a>
    </div>
</div>

如果使用PHP生成随机名称，则在服务器上执行一次。然后，JS代码复制相同的元素。您需要的是使用js生成唯一的名称

如果你可以避免随机，理论上，你可以击中相同的数字，并运行到神秘的错误

var generateField = function(name)
{
     return '<div><input type="text" name="'+name+'" value=""/><a href="javascript:void(0);" class="remove_button">Remove</a></div>'; //New input field html 
}

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
        x++; //Increment field counter
        $(wrapper).append(generateField('field_name['+x+']' ) ); //Add field html
    }
});

var generateField=函数（名称）
{
返回“”；//新的输入字段html
}
//单击“添加”按钮后
$（添加按钮）。单击（函数（）{
//检查输入字段的最大数量
如果（x
试试js中的
Math.random（）
而不是php中的
rand（）
，
Math.floor（Math.random（）*90000）+10000将生成一个五位数的随机数，希望这有帮助


$（'.rand'）.attr（'name'，“字段[“+Math.floor（Math.random（）*90000）+10000+”）
$（'.add_按钮'）。单击（函数（e）{
$（'.field_wrapper'）。追加（''）
})
$（文档）。在（'单击'，'上。删除按钮'，函数（e）{
$（this.parent（）.remove（））
})
随机并不一定意味着唯一，即使碰撞极其罕见。此解决方案只需增加一个
totalFieldsCreated
变量，以获得下一个唯一的数字（最高可达JavaScript可以提供的最大值）

新字段是动态创建的，而不是使用固定的HTML字符串。（这项技术更加灵活。）


$（文档）.ready（函数（）{
//定义全局标识符
让
currentFieldCount=1，
totalFieldsCreated=1；
常数
maxFieldCount=100，
addButton=$（'.add_button'），
包装器=$（'.field_wrapper'）；
//单击addButton时调用'addField'
$（添加按钮）。单击（添加字段）；
//单击“删除”时执行匿名函数，删除
//父div，并递减（和记录）`currentFieldCount`
$（包装器）。在（'单击'，'上。删除按钮'，函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
currentFieldCount--；
log（`currentFieldCount:${currentFieldCount}`）；
});
//定义'addField'函数
函数addField（）{
//确保“currentFieldCount”和“totalFieldsCreated”
//在继续之前，未达到最大值
如果(
currentFieldCount

php位于服务器端-因此它在服务器上运行一次。。。javascript有
Math.random（）
所以我会像
var x=Math.random（）一样使用它？当然可以，如果可以的话。x将是一个介于0…1之间的十进制数-当然，也不能保证唯一性-虽然，考虑到16位数字非常不可能-谢谢你的回答，但这仍然从第二个字段复制了相同的名称。只有默认字段和第一个“添加更多”字段是唯一的，但是当您再次添加更多字段（现在总共添加3个字段）时，您会发现字段2和字段3具有相同的名称。这很奇怪，在您的代码段上（在执行inspect元素后），我看到所有的名称都是唯一的。但是当我在一个普通的文件上做这项工作时，它会显示字段2之后的所有字段都复制了第二个字段的名称。（添加更多字段都是一样的）天哪，我太粗心了，我把你的代码复制到index2.php中，然后在index.php上测试它（这解释了为什么它没有向我显示正确的结果）。哈哈，是的，你的代码就像老板一样工作！！非常感谢你，我的朋友！避免在字段名中使用random（）值，这会使您的代码更难测试，如果您两次命中同一个随机值，则可能会出现错误。感谢您的解释，是的，我现在理解了php rand不起作用的原因。PHP是服务器端，因此需要再次单击。干杯，伙计，这真的很好，我试过了，效果很好。是的，我同意随机性并不等于唯一性。您的解决方案保证了字段名的唯一性。我很高兴这是一个很好的答案，我继续做了进一步的测试，非常好。我尝试添加一个字段，删除它，然后重新添加，它实际上跳过了删除的字段编号增量。干得好，谢谢你。
var generateField = function(name)
{
     return '<div><input type="text" name="'+name+'" value=""/><a href="javascript:void(0);" class="remove_button">Remove</a></div>'; //New input field html 
}

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
        x++; //Increment field counter
        $(wrapper).append(generateField('field_name['+x+']' ) ); //Add field html
    }
});