Help! Adding Form Fields Disables Calulator??

lightyear2000 · May 18, 2006

OK so what Ive built so far is a page that has a drop-down menu with various values, this value is then passed to two other fields for addding/subtracting or whatever. As you will se you can add as many fields underneath as you like but as soon as you do, the calculator function becomes disabled? I realise I need to name the new fields underneath somehow to distinguish them from each other but how do I do it??

Thanks in advance.

Here's the code:
<html>
<head>
<title>Adding Values</title>

<script language="JavaScript">

var counter = 0;





</script>
</head>

<body>

<div id="readroot" style="display: none">
<p>
<select name="input_box" id="">
<option value="0">---- Click here to select your Value ----</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
<option value="4">Value 4</option>
</select>
<input name="button2" type="button"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" value="Remove">
<input name="output_box1" type="text" value="" size="15">
<input name="output_box2" type="text" value="" size="15">
<br>
</div>

<form action="javascript:write_this()" name="funds" id="funds">
<span id="writeroot"></span>
<input name="button" type="button" onClick="moreFields()" value="Add a Value">
</p>
<p>
<input name="submit" type="submit" value="Calculate">
</p>
</form>
</body>
</html>

theniteowl · May 18, 2006

Your form fields are not all contained within your form.
It is bound to cause you problems somewhere down the road even if it is working now.

Something like this:

Code:

function write_this(){
  var myInputs = document.getElementsByName('input_box');
  var output1 = document.getElementsByName('output_box1');
  var output2 = document.getElementsByName('output_box2');
  var total=0;
  for (var x=0;x<myInputs.length;x++) {
    total += myInputs[x].value-0;
    output1[x].value = myInputs[x].value;
    output2[x].value = total;
  }
}

Since you are cloning the first div the new select and output boxes all have the same names so you use getElementsByName('whatevername') to retrieve all of them as an array then loop through the array to check individual values.
I just did an addition of the fields not knowing what you would actually want.

It's hard to think outside the box when I'm trapped in a cubicle.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help! Adding Form Fields Disables Calulator??

lightyear2000

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor