dynamic calculation

[sniperscope]

Hi

Currently i have a small javascript problem which i could not handle it.

I really appreciate for any help.

 

My page has a form with dynamic added form fields(onclick adds new text box) and need calculate every single added text form value separately.

 

I almost read about 20 blogs and web sites. But there is no hope so far.

 

Regards

 

My JS code:

<script>
var counter = 1;
var limit = 200;
function addInput(divName)
{
	 if (counter == limit)
	 {
		  alert("You have reached the limit of adding " + counter + " inputs");
	 }
	 else
	 {

		  var newdiv = document.createElement('div');
		  newdiv.innerHTML = '<table class="table-1"><tr><th width="4%">' + (counter + 1) + '</th><td width="18%"><select name="product_' + (counter + 1) + '"><option value="item1">item1</option><option value="item2">item2</option><option value="item3">item3</option><option value="item4">item4</option></select></td><td width="16%"><select name="color_' + (counter + 1) + '"><option value="black">black</option><option value="red">red</option><option value="blue">blue</option><option value="green">green</option></select></td><td width="11%"><select name="p_size_' + (counter + 1) + '"><option value="L">L</option><option value="M">M</option></select></td><td width="10%"><input type="text" name="order_number_' + (counter + 1) + '" size="7" onfocus="addInput(\'dynamicInput\');" /></td><td width="40%" class="th"><input type="text" name="item_pirce_' + (counter + 1) + '" size="7" value="" readonly="readonly" /></td></tr></table>';
		  document.getElementById(divName).appendChild(newdiv);
		  counter++;
	 }
}

function Unit_update(unit_item)
{
    // This works if i manually add element names.
	var i = document.forms['ContactForm'].elements["order_number_0"].value;

	document.forms['ContactForm'].elements["item_price_0"].value = i;
}
</script>

 

And this is my form code:

<table class="table-1">
				<tr><th width="4%" class="th"></th>
				<th width="18%" class="th">P Name</th>
				<th width="16%" class="th">Color</th>
				<th width="11%" class="th">Size</th>
				<th width="10%" class="th">Order</th>
				<th width="41%" class="th">Total</th></tr></table>
			<div id="dynamicInput">
			<table class="table-1">
				<tr><th width="4%">1</th>
				<td width="18%"><select name="product_0">
					<option value="item1">item2</option>
					<option value="item2">item2</option>
					<option value="item3">item3</option>
					<option value="item4">item4</option></select></td>
				<td width="16%"><select name="color_0">
					<option value="black">black</option>
					<option value="red">red</option>
					<option value="blue">blue</option>
					<option value="green">green</option></select></td>
				<td width="11%"><select name="p_size_0">
					<option value="L">L</option>
					<option value="M">M</option></select></td>
				<td width="10%"><input type="text" name="order_number_0" size="7" onfocus="addInput('dynamicInput');" onkeyup="Unit_update(this.form);" /></td>
				<td width="40%" class="th"><input type="text" name="item_price_0" size="7" value="" readonly="readonly" /></td></tr></table></div>

			<div style="width:100% !important; text-align:center; height:45px; background-color:#E0DFE3;">
				<input type="reset" value="Reset" style="font-size:16px; width:100px; height:30px; font-weight:bold;" />  
				<input type="submit" value="Submit" style="font-size:16px; width:100px; height:30px; font-weight:bold;" />
			</div><input type="hidden" name="SendIt" />
		</form>

[sniperscope]

i solved it.

I changed my code as below

 

<script>
var counter = 1;
var limit = 200;
function addInput(divName)
{
	 if (counter == limit)
	 {
		  alert("You have reached the limit of adding " + counter + " inputs");
	 }
	 else
	 {

		  var newdiv = document.createElement('div');
		  newdiv.innerHTML = '<table class="table-1"><tr><th width="4%">' + (counter + 1) + '</th><td width="18%"><select name="product_' + (counter + 1) + '"><option value="item1">item1</option><option value="item2">item2</option><option value="item3">item3</option><option value="item4">item4</option></select></td><td width="16%"><select name="color_' + (counter + 1) + '"><option value="black">black</option><option value="red">red</option><option value="blue">blue</option><option value="green">green</option></select></td><td width="11%"><select name="p_size_' + (counter + 1) + '"><option value="L">L</option><option value="M">M</option></select></td><td width="10%">input type="text" name="order_number_' + (counter + 1) + '" size="7" onfocus="addInput(\'dynamicInput\');" onkeyup="Unit_update(\'order_number_' + (counter + 1) + '\', \'item_price_' + (counter + 1) + '\');" /></td><td width="40%" class="th"><input type="text" name="item_price_' + (counter + 1) + '" size="7" value="" readonly="readonly" /></td></tr></table>';
		  document.getElementById(divName).appendChild(newdiv);
		  counter++;
	 }
}

function Unit_update(unit_item, calc)
{
	var i = document.forms['ContactForm'].elements[unit_item].value;
	document.forms['ContactForm'].elements[calc].value = i;
}
</script>

 

Hope this help someone else.