Javascript renaming dynamically created fields

i need help renaming fields created as children nodes

[iheartstephen]

I have a form that allows the user to add or remove fields by pressing an add or remove fields button. This works great. The first field created has input names of 'othersoft1', 'othersoftver1', and 'othersoftlicense1'. The next fields created are name with the number at the end incrementing by one (othersoft2, othersoft3, etc.) This is done through a counter that increments everytime a new field is created. The only problem is that I need to be able to rename the input fields everytime a field is deleted so that I don't end up with 'othersoft1', 'othersoft2', 'othersoft5', etc. Or, even worse, I could end up with two fields name the same thing. So I just need a script that will re-number the fields 1,2,3,4 etc everytime a field is deleted.

Here is the html of the form:

<!-- start add software section -->
<div id="readsoftware" style="display: none">
<input type="button" value="Remove" style="font-size: 10px" onClick="softwareremoveFields(this);">
<br>
<input type="text" name="othersoft" size="19" onBlur="trimspaces(this);"> ver: <input type="text" name="othersoftver" size="15" onBlur="trimspaces(this);">
<br>
license # <input type="text" name="othersoftlicense" size="33" onBlur="trimspaces(this);">
</div>
<table width="90%" align="center">
<tr>
<td>
<table width="100%">
<tr>
<td width="40%">&nbsp;</td>
<td width="60%">
<span id="writesoftware"></span>
<input type="button" value="Add Software" onClick="softwaremoreFields()">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end add sofware section -->

and here are my two javascript functions so far:

// start add more software script
var softwarecounter = 0;
function softwaremoreFields() {
if (softwarecounter < 20) {
softwarecounter++;
var newFields = document.getElementById('readsoftware').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 + softwarecounter;
}
var insertHere = document.getElementById('writesoftware');
insertHere.parentNode.insertBefore(newFields,insertHere);
} else {
alert ("Only twenty other softwares may be added.");
}
}
// end add more software script

// start remove fields script
function softwareremoveFields(instance) {
instance.parentNode.parentNode.removeChild(instance.parentNode);
}
}
// end remove fields script

Any help would be very appreciated.
Thanks.

[BlobFisk]

Welcome to WebmasterWorld, iheartstephan!

It may be easier to alter the way you are creating the neew fields. Perhaps adding a character as well as a number incement will avoid the possibility of two fields having the same name?

[iheartstephen]

That's a good idea. I'll try it. I think I still am going to try and figure out a way to rename them, because I am taking the form data and inserting it into a database and think on that side of things, if the fields were named field1, field2, field3 it would be easier. Thanks for the idea though. I've been tearing my hair out on this one for awhile.
Stephen

[DrDoc]

Is the form posted to a PHP page? If so, just use arrays instead:

othersoft[]

[iheartstephen]

I can't believe I didn't think of that! geez. I guess when you're looking at a problem for so long its tough to get a fresh view. Using an array worked perfectly. Thanks so much!