时间戳

首页 > 解决方案 > 添加更多输入的唯一名称

javascript - 添加更多输入的唯一名称

问题描述

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

我试图寻找答案，但这并不能回答我的问题。

所以，基本上我试图让我的名称字段独一无二的是使用 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>

JQUERY / JAVASCRIPT： 

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 100; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[<?php echo rand(); ?>]" value=""/><a href="javascript:void(0);" class="remove_button">Remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1

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

    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
</script>

如您所见，第一个字段按预期生成数字。如果单击“添加更多”，则第二个字段会创建一个唯一编号。但是，如果您再次单击添加更多，第三个字段将复制与第二个字段相同的名称。

我该如何实现我想要的，为什么rand()不生成新代码？

此外，是否rand()向我保证它将是一个唯一的 ID，或者它是否有机会重复相同的数字？

如果它确实重复，那么让它尽可能独特的最佳方法是什么？

标签： javascriptphpjquery

解决方案

如果您使用 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
    }
});

推荐阅读