[SOLVED] Dynamically naming form elements with JavaScript

[mayfair]

Hello Guys

 

I have a straight forward problem that has been causing me major headaches for a while now. I gave up on Google in the end and im hoping someone here can help me out 

 

Im using a script from W3Schools that adds a row to a table on the click of a button. It all works beautifully but the table contains form elements that I would like to POST to another page. The problem is I need to give each element a unique name so I can pull its value on the next page; but as it stands the function ive got only duplicates a static row that ive hard coded. I need a way of changing the elements name dynamically (by incrementing a number at the end for example) each time a new row is added. Hope im explaining myself well. Heres the function:

 

function insRow() {

	var x = document.getElementById('order_currency').insertRow(0);
	var a = x.insertCell(0);
	var b = x.insertCell(1);
	var c = x.insertCell(2);
	var d = x.insertCell(3);

	a.innerHTML="<select name='type1'><option value='' selected>Please Select</option><option value='Cash'>Cash</option><option value='Travellers Cheques'>Travellers Cheques</option></select>";
	b.innerHTML="<select name='#######'><option value='' selected>Please Select</option><option value='Euros'>Euros</option><option value='US Dollars'>US Dollars</option><option value='Australian Dollars'>Australian Dollars</option><option value='New Zealand Dollars'>New Zealand Dollars</option><option value='Canadian Dollars'>Canadian Dollars</option></select>";
	c.innerHTML="<input name='amount1' type='text'/>";
	d.innerHTML="<input type='button' value='Delete' onclick='deleteRow(this)'/>";
	}

 

Where the ####### is, I would like to generate a unique name every time the funcion is run.

 

Thanks in advance 

[KevinM1]

Hello Guys

 

I have a straight forward problem that has been causing me major headaches for a while now. I gave up on Google in the end and im hoping someone here can help me out 

 

Im using a script from W3Schools that adds a row to a table on the click of a button. It all works beautifully but the table contains form elements that I would like to POST to another page. The problem is I need to give each element a unique name so I can pull its value on the next page; but as it stands the function ive got only duplicates a static row that ive hard coded. I need a way of changing the elements name dynamically (by incrementing a number at the end for example) each time a new row is added. Hope im explaining myself well. Heres the function:

 

function insRow() {

	var x = document.getElementById('order_currency').insertRow(0);
	var a = x.insertCell(0);
	var b = x.insertCell(1);
	var c = x.insertCell(2);
	var d = x.insertCell(3);

	a.innerHTML="<select name='type1'><option value='' selected>Please Select</option><option value='Cash'>Cash</option><option value='Travellers Cheques'>Travellers Cheques</option></select>";
	b.innerHTML="<select name='#######'><option value='' selected>Please Select</option><option value='Euros'>Euros</option><option value='US Dollars'>US Dollars</option><option value='Australian Dollars'>Australian Dollars</option><option value='New Zealand Dollars'>New Zealand Dollars</option><option value='Canadian Dollars'>Canadian Dollars</option></select>";
	c.innerHTML="<input name='amount1' type='text'/>";
	d.innerHTML="<input type='button' value='Delete' onclick='deleteRow(this)'/>";
	}

 

Where the ####### is, I would like to generate a unique name every time the funcion is run.

 

Thanks in advance 

 

Simply have a variable in a higher level of scope (in your case, a global) that keeps track of how many times the function has been called.  Then, increment it in the function.  Ex:

 

var count = 0;

function insRow(){
//...

   b.innerHTML = "<select name='" + (++count) + "'><option value='selected'>Please Select</option><option value='Euros'>Euros</option><option value='US Dollars'>US Dollars</option><option value='Australian Dollars'>Australian Dollars</option><option value='New Zealand Dollars'>New Zealand Dollars</option><option value='Canadian Dollars'>Canadian Dollars</option></select>";

//...
}

[Psycho]

Or, alternatively, an easier solution is to just make the name of that field an array name. So, you can add as many rows as you like with the same name and the values will be POSTed as an array. Just add square brackets.

 

Ex:

name="fieldName[]"

 

Then the processing page can access the values from all of those fields using: $_POST['fieldName']

 

$_POST['fieldName'][0] = value from 1st field

$_POST['fieldName'][1] = value from 2nd field

$_POST['fieldName'][2] = value from 3rd field

etc...

[mayfair]

Thank you both for your replies.

 

I ran with Nightslyr's idea in the end just because id happened to try it first, but I appreciate you both taking the time to answer.

 

Im going to a quiet corner now to bash my head against a wall for wasting so many hours on this! 

 

[Psycho]

Good deal. However, on retrospect, even if you went with my solution you might need to incorporate Nightslyr's process as well if you need to add IDs to the elements. You can have elements with the same name, but you can't have elements with the same IDs. So, if you need IDs you would have to ensure they are unique.