Alter element name(s)

[nottoolate]

Hello,

 

I'm creating a form and I just added the ability for the user to click a button and an additional row, if needed.

However, the name of each element remains the same as the original row.

For example (this is what happens):

 

Original row: <select name = "job"></select>

Added row: <select name = "job"></select>

Added row: <select name ="job"></select>

 

(this is what I would like)

Original row: <select name="job"></select>

Added row: <select name="job_1"></select>

Added row: <select name="job_2"></select>

 

Is there a way to alter the javascript so that with each added row the element names add by 1?

 

Here is the javascript:

<script type="text/javascript">
	function addRow(tblId)
		{
		  var tblBody = document.getElementById(tblId).tBodies[0];
		  var newNode = tblBody.rows[0].cloneNode(true);
		  tblBody.appendChild(newNode);
		}
	</script>

 

Here is an example form:

<table id="1">
	<tr>
		<td colspan="1">
				<select id="parent_child" name="parent_child" onkeypress="return handleEnter(this, event)">
					<option value=""></option>
					<option value="Parent">Parent</option>
					<option vallue="Child" selected>Child</option>
				</select>
		</td>
                </tr>
<td colspan="1">
			<input type="button" name="add_more" id="add_more" value="Add Job" onclick="addRow(1);">
		</td>
</table>

 

[nogray]

You can add the following

newNode.getElementsByTagName('select')[0].name = 'new_name';

[nottoolate]

Thanks that helped!

 

However, I have other fields (elements: input and select) and it only works with the first select. The other fields still have their original name.

 

For the select field in which this does work, each additional row has the same name = 'new_name'. Instead of 'new_name1','new_name2',etc.

Is there a way I can set it up to add a 'new_name'+1 to each name?

[nottoolate]

Still having trouble with this if anyone can help?