[dscott]

I found the javascript snippet "Dynamically Add Rows" very usefull in a php based app I am working on. What I need to do with the data is to concatenate the data into a field that can be posted by php.

the final data needs to look like this (to be used in the php variable $options):

--
1 Color (+1.25,0,+19.95)
2 Color (+1.30,0,+39.90)
3 Color (+1.35,0,+59.85)
4 Color (+1.40,0,+79.80)
5 Color (+1.45,0,+99.75)

I have a page up that shows what is working and shows what it need to do.
http://dev.green-is-..._row_test2.html

ANY HELP?

<script language="Javascript" type="text/javascript">
	 function addRow() {
	 	var tbl = document.getElementById('options_modifiers');
		var lastRow = tbl.rows.length;
		var iteration = lastRow;
		var row = tbl.insertRow(lastRow);

		var cellLeft = row.insertCell(0);
		var textNode = document.createTextNode(iteration);
		cellLeft.appendChild(textNode);

		var optionName = row.insertCell(1);
		var el = document.createElement('input');
		el.type = 'text';
		el.name = 'optionName' + iteration;
		el.id = 'optionName' + iteration;
		el.size = 15;
		optionName.appendChild(el);
		
		var priceMod = row.insertCell(2);
		var el = document.createElement('input');
		el.type = 'text';
		el.name = 'priceMod' + iteration;
		el.id = 'priceMod' + iteration;
		el.size = 5;
		priceMod.appendChild(el);
		
		var weightMod = row.insertCell(3);
		var el = document.createElement('input');
		el.type = 'text';
		el.name = 'weightMod' + iteration;
		el.id = 'weightMod' + iteration;
		el.size = 5;
		weightMod.appendChild(el);
		  
		var setupFee = row.insertCell(4);
		var el = document.createElement('input');
		el.type = 'text';
		el.name = 'setupFee' + iteration;
		el.id = 'setupFee' + iteration;
		el.size = 7;
		setupFee.appendChild(el);
	 }

	 function removeRow()
	 {
		// grab the element again!
		var tbl = document.getElementById('options_modifiers');
		// grab the length!
		var lastRow = tbl.rows.length;
		// delete the last row if there is more than one row!
		if (lastRow > 2) tbl.deleteRow(lastRow - 1);
	 }
	
	function newOption()
	 {
	 	var tbl = document.getElementById('options_modifiers');
		var rowCount = tbl.rows.length;
		if (rowCount > 2 && optionName1 != "")
		for(i=0;i<rowCount;i++) {
			optionselection += optionName.i + ' (' + priceMod.i + ',' + weightMod.i + ',' + setupFee.i + ')' + "\n";
			}
	}
</script>



<form action="addrow.html" name="eval_edit" method="post" format="html">
<span style="font-size:9px">&quot;Selection (+/-PriceMod,+/-WeightMod,+/-SetupFee)&quot;</span>
<table width = "250" border="1" cellpadding="2" cellspacing="2">
					
					<tr>
					  <td align = "center"><strong>Selection Options&nbsp;</strong><br />
Used for Drop-Down&nbsp;or 
Radio Button</td>
					</tr>
					<tr>
						 <td align = "center">
							  <table border="0" id="options_modifiers">
									 <tr>
										<td align="center" valign="bottom"><strong><font size="-2">
										
									   </font></strong></td>
										<td width="75" align="center" valign="bottom" style="border-bottom: thin solid #ff0000"><strong><font size="-2">
										   Option Name
									   </font></strong></td>
										<td width="35" align="center" valign="bottom" style="border-bottom: thin solid #ff0000"><strong><font size="-2">
										   Price Modifier
									   </font></strong></td>
										<td width="35" align="center" valign="bottom" style="border-bottom: thin solid #ff0000"><strong><font size="-2">
										   Weight Modifier
									   </font></strong></td>
										<td width="35" align="center" valign="bottom" style="border-bottom: thin solid #ff0000"><strong><font size="-2">
										   Setup Fee
									   </font></strong></td>
								   </tr>
								   <tr>
										<td>
											 1										</td>
										<td align="center">
									 <input type="text" name="optionName1" id="optionName1" size="15" /></td>
										<td align="center">
									 <input type="text" name="priceMod1" id="priceMod1" size="5" /></td>
										<td align="center">
									 <input type="text" name="weightMod1" id="weightMod1" size="5" /></td>
										<td align="center">
									 <input type="text" name="setupFee1" id="setupFee1" size="7" /></td>
								   </tr>
						   </table>

							  <!--- our buttons call our javascript functions when clicked --->
							  <input type="button" value="+" onclick="addRow();" />
							  <input type="button" value="-" onclick="removeRow();" />						 </td>
					</tr>
			</table>
		  </form>

This post has been edited by dscott: 01 April 2008 - 05:58 PM