Question

Been at this for a long time, and it seems so simple but I cannot get it to do what I want.

Each book has a ‘getOrRequest’ value that is selected using radio buttons. Every time a div is duplicated, the name value needs to be changed so that a book has its own getOrRequest value. I’ve finally got the duplicating down, but now renaming the correct inputs isn’t cooperating.

What’s really bugging me is that it works, but it’s not changing the name values that I’m trying to grab. It has something to do with what parts of the array are being changed, but I can’t get the values that I want, namely the last two getOrRequest names.

A working example of what I’m struggling with here.

My JS function:

function addAnotherPost(){

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);

copyDiv.id = 'addListing' + idNumber;
bookInfo.appendChild(copyDiv);

var divID = 'addListing' + idNumber;
var newDiv = document.getElementById(divID);
var postType = document.getElementsByName("getOrRequest[]");

alert(postType[0].name + postType[1].name + postType[2].name + postType[3].name);

for(var i = 2; i < postType.length; i++){
   postType[i].name = 'getOrRequest' + idNumber + '[]';
}

alert("got this far" + postType.length);

idNumber++;
}

The relevant chunk of HTML:

<div id='addListing'>
<table class='aListing'>
<tr>
<td>
                <label>
                <input type='radio' name='getOrRequest[]' value='1' />
                Request</label>
                <label>
                <input type='radio' name='getOrRequest[]' value='0' />
                Offer</label>
</td>
[...]
</table>
</div>

Answer 1

You are getting an object list for a specific name identifier:

var postType = document.getElementsByName("getOrRequest[]");

so postType is changing once you’ve renamed an element (Yes man that thing is inteligent)

    console.log(postType.length); // = 4
    postType[i].name = 'getOrRequest' + idNumber + '[]';
    console.log(postType.length); // = 3

so basically the for loops changes because postType.length changes.

I guess what you want to do is something like:

postType[0].name = 'getOrRequest' + idNumber + '[]'; //ref changed.
postType[0].name = 'getOrRequest' + idNumber + '[]';

however thats bad style anyways you should clone from a marked source and rename by name before you append to something, like so ( http://jsfiddle.net/bHLZA/2/ ):

var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);

copyDiv.id = 'addListing' + idNumber;
postType = copyDiv.getElementsByTagName('input');
postType[0].name = 'getOrRequest' + idNumber + '[]';
postType[1].name = 'getOrRequest' + idNumber + '[]';
bookInfo.appendChild(copyDiv);

see http://jsfiddle.net/bHLZA/