mayfair Posted August 4, 2009 Share Posted August 4, 2009 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 Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted August 4, 2009 Share Posted August 4, 2009 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>"; //... } Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 4, 2009 Share Posted August 4, 2009 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... Quote Link to comment Share on other sites More sharing options...
mayfair Posted August 4, 2009 Author Share Posted August 4, 2009 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! Quote Link to comment Share on other sites More sharing options...
Psycho Posted August 4, 2009 Share Posted August 4, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.