HTML name attributes not changing using javascript

Question

I currently have a system which allows users to add different ticket types. I want each ticket property to have a unique name so that when the form is submitted I can tell the tickets apart.

Right now, there is a button to add more tickets to the page if the user needs more than one.

I have tried to get it to append the ticket number to the html name attribute but it's not working. It is successfully creating more ticket divs but its using the same name attribute.

Can anyone help with this?

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>

More tickets 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);
}

CuriousMind · Accepted Answer · 2015-03-29 07:22:24Z

1

You can replace following code

from

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

to

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;
}

Check this link at w3schools for details.

Note that above implementation doesn't clear the values in the newly added section. You will have to manually clear it off.

Updated with browser screenshot name updated

edited Mar 29, 2015 at 7:22

answered Mar 29, 2015 at 7:12

CuriousMind

3,1833 gold badges31 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

FMC Over a year ago

Thanks. The name attributes are still remaining the same but i'll have a look at w3schools and see if I can figure it out.

CuriousMind Over a year ago

@FMC I have added the screenshot displaying the effect of change. Please refresh your browser and see if script is updated properly.

NewToJS Over a year ago

This works just fine, I have checked this. Use inspect element, you can see the name attributes are incremented by 1 each time. ticketname => ticketname1 / ticketprice => ticketprice1 / ticketmax => ticketmax1

FMC Over a year ago

Ah yes you're right sorry. I just looked at the bottom element and seen it was the same, I didn't realise the bottom element is actually the first one. Thanks @CuriousMind!

Azeez Kallayi Over a year ago

You can use : newField[i].setAttribute('name',theName + counter); to set the new name to each element

user1752532 · Accepted Answer · 2015-03-29 09:08:23Z

Thought i would add a jquery alternative for reference

$(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>

Collectives™ on Stack Overflow

HTML name attributes not changing using javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related