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的此链接。

请注意，上述实现并未清除新添加的部分中的值。您必须手动清除它。

更新了浏览器屏幕截图

Answer 2

以为我会添加一个jquery替代参考

$(function() {

  var tktGrp = $('#ticket').clone(), // deep clone of code block
      lstGrp = '#ticket .col-md-8',
    numCount = 1;

  $('#addTickets').click(function() {

      numCount++; // Increment 
    
      $(lstGrp + ':last').after(tktGrp.html()); // Get last group in the list and add the new html based on the clone

      $(lstGrp + ':last .dub').each(function() { // loop and change namp property of all dub classes

         $(this).prop('name', $(this).prop('name') + "-" + numCount);

       });
  });
  
  // UX: never display the first remove button : Still add to html so that we dont have to write html in the js
  $(lstGrp +':first button').remove(); 
  
  $(document).on( 'click', '[name*="remove"]', function(){ // Delegate for newly created objects
    $(this).parent().empty();
    numCount--; // Decrement
    
  });
  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div id="tickets">
  <div id="ticket" class="form-inline  margin-bottom-40">
    <div class="col-md-8 ticket-group-1">
      <label class="control-label col-md-3 control-label">
        Ticket
        <span class="required"> * </span>
      </label>
      <input type="text" class="form-control dub" placeholder="Name" name="ticketname" />
      <input type="text" class="form-control dub" placeholder="Price" name="ticketprice" />
      <input type="text" class="form-control dub" placeholder="Max Quantity" name="ticketmax" />
      <button class="btn btn-danger btn-sm dub" name="remove">Remove</button>
      <hr />
    </div>
  </div>
  <div class="col-md-8">
    <button id="addTickets" class="btn btn-primary">Add</button>
  </div>


</div>

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

2 个答案: