添加更多输入的唯一名称

Question

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

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

所以，基本上我试图使我的 namefield 唯一的是使用 php method 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 还是它有机会重复相同的数字？

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

Answer 1

随机并不一定意味着唯一，即使碰撞极其罕见。该解决方案只是简单地增加一个totalFieldsCreated变量来获取下一个唯一的数字（直到 JavaScript 可以提供的最大值）。

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

$(document).ready(function() {

  // Defines global identifiers
  let
    currentFieldCount = 1,
    totalFieldsCreated = 1;
  const
    maxFieldCount = 100,
    addButton = $('.add_button'),
    wrapper = $('.field_wrapper');

  // Calls `addField` when addButton is clicked
  $(addButton).click(addField);

  // Executes anonymous function when `Remove` is clicked, which removes
  //   the parent div, and decrements (and logs) `currentFieldCount`
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    currentFieldCount--;
    console.log(`currentFieldCount: ${currentFieldCount}`);
  });

  // Defines the `addField` function
  function addField(){

    // Makes sure that `currentFieldCount` and `totalFieldsCreated` 
    //   are not at maximum before proceeding
    if(
      currentFieldCount < maxFieldCount && 
      totalFieldsCreated < Number.MAX_VALUE
    ){

      // Creates an input element, increments `totalFieldsCreated`,
      //   and uses the incremented value in the input's `name` attribute
      const input = document.createElement("input");
      input.type = "text";
      input.name = "field" + ++totalFieldsCreated;
      input.value = "";

      // Creates an anchor element with the `remove_button` class
      const a = document.createElement("a");
      a.href = "javascript:void(0);";
      a.classList.add("remove_button");
      a.title = "remove";
      a.innerHTML = "Remove";
      
      // Adds the new elements to the DOM, and increments `currentFieldCount`
      const div = document.createElement("div");
      div.appendChild(input);
      div.appendChild(a);
      $(wrapper).append(div);
      currentFieldCount++;

      // Logs the new values of both variables 
      console.log(
        `currentFieldCount: ${currentFieldCount},`,
        `totalFieldsCreated ${totalFieldsCreated}`
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field_wrapper">
  <div>
    <input type="text" name="field1" value="" />
    <a href="javascript:void(0);" class="add_button" title="Add field">Add More</a>
  </div>
</div>