javascript - HTML 名称属性不会使用 javascript 更改

Question

我目前有一个系统，允许用户添加不同的票证类型。我希望每个门票属性都​​有一个唯一的名称，以便在提交表单时我可以区分门票。

现在，如果用户需要多个票证，可以通过一个按钮向页面添加更多票证。

我尝试让它将票号附加到 html 名称属性中，但它不起作用。它成功创建了更多票证 div，但使用了相同的名称属性。

谁能帮忙解决这个问题吗？

HTML

<div id="tickets">
  <div id="ticket" class="form-inline  margin-bottom-40">
     <label class="control-label col-md-3">
         Ticket 
        <span class="required"> * </span>
     </label>
   <div class="col-md-8">
     <input type="text" class="form-control" placeholder="Name" name="ticketname" /> 
     <input type="text" class="form-control" placeholder="Price" name="ticketprice" />
     <input type="text" class="form-control" placeholder="Max Quantity" name="ticketmax" /> 
        <a onclick="moreTickets()">
           <i class="fa fa-plus"></i>
        </a>
    </div>
   <br>
   <br> 
  </div>
 </div>

更多门票 javascript

var counter = 0;

function moreTickets() {
    counter++;
    var newFields = document.getElementById('ticket').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('tickets');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

Answer 1

您可以替换以下代码

来自

var newField = newFields.childNodes;
for (var i = 0; i < newField.length; i++) {
     var theName = newField[i].name
     if (theName)
        newField[i].name = theName + counter;
}

到

var newField = newFields.querySelectorAll("input");
for(var i=0; i<newField.length; i++){
    var theName = newField[i].name;
    if(theName)
        newField[i].name = theName + counter;
}

检查 w3schools 上的此链接:details .

请注意，上述实现不会清除新添加部分中的值。您必须手动将其清除。

已更新浏览器屏幕截图