updating and adding fields

bigbird3156 · Feb 19, 2007

Hi everyone,

I am quite new to Javascript and was hoping if someone could direct me to an online tutorial to answer my question or give me a skeletal answer that i can work on and adapt - after all If I don't learn these things for myself, whats the point???

basically what I want to do is create a form in html that adds up values in fields as it goes along...

the basis of it is a page where a person can order various numbers of items at different values and the page adds up the totals as it goes along, displaying the total for the user before he hits submit...

thanks for your time

[wiggle]

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!! [jester]

kaht · Feb 20, 2007

Here's a quick and dirty example bigbird - I've also added a few comments to help you along with the dom manipulation:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function recalculate() {
   var totalSum = 0;
   var qty = 0;
   var price = 0;
   //get textbox references
   var textBoxes = document.getElementById("theTable").getElementsByTagName("input");
   for (var i = 0; i < textBoxes.length; i++) {
      //do this check to make sure it's not one of the hidden inputs
      if (textBoxes[i].type == "text") {
         //find a reference to the price hidden input
         //first parentNode references the <td>
         //second parentNode references the <tr>
         //cells[0] references the first <td> in the row
         //childNodes[0] references the first element in that <td> - which is the hidden price field
         price = textBoxes[i].parentNode.parentNode.cells[0].childNodes[0].value;
         //find the quantity typed by user
         qty = textBoxes[i].value;
         //calculate ongoing totalSum
         totalSum += price * qty;
      }
   }
   //put totalSum value into the textbox
   document.getElementById("total").value = totalSum;
}

</script>
<style type="text/css"></style>
</head>
<body>

<table border="1" id="theTable">
   <tr>
      <td><input type="hidden" value="1" />Eggs: $1</td>
      <td><input type="text" id="eggsQuantity" value="0" onkeyup="recalculate()" /></td>
   </tr>
   <tr>
      <td><input type="hidden" value="2" />Bread: $2</td>
      <td><input type="text" id="breadQuantity" value="0" onkeyup="recalculate()" /></td>
   </tr>
   <tr>
      <td><input type="hidden" value="3" />Milk: $3</td>
      <td><input type="text" id="milkQuantity" value="0" onkeyup="recalculate()" /></td>
   </tr>
</table>

Total: <input type="text" id="total" value="0" />

</body>
</html>

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

bigbird3156 · Feb 20, 2007

thanks for that kaht, I'll play around with it as soon as possible....

nice puppies by the way...

[wiggle]

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!! [jester]

bigbird3156 · Feb 26, 2007

Is it possible to use dropdown lists rather than text fields to enter value???

[wiggle]

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!! [jester]

kaht · Feb 26, 2007

Yeah, you'll just have to change the event handler because lots of people use the mouse to change the dropdown values and as such it will not trigger the onkeyup handler. For a <select> list it is more common to use the onchange handler.

-kaht

Looking for a puppy?

http://www.silkypups.com

[small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]

bigbird3156 · Feb 26, 2007

thanks kaht,

I think I have bitten off more than I can chew...

here is a link to what I want to add up...

http://members.optushome.com.au/petedeka/confform2.htm

there are 2 different tables that I want to add up on the one field...

the whole parent/child node thing is giving me a headache...

any chance you could have a quick look over it and see if you can get it to work...

thanks

[wiggle]

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!! [jester]

jpadie · Feb 27, 2007

@OP

here is a recut of your function and your code. i've simplified things a little by renaming your hidden fields so that they are all in the same pattern and correspond to your select boxes. i've also changed the last text box to a span to show the total. lastly i have added an onload event to the body to cause a recalculation.

big point here is that you should not rely on javascript for the submission of any payment information since it can be very easily spoofed at the client side. handle payment processing and the ACTUAL calculation of prices on the server side.

your code, reworked (in a very minor way), is below.

i'm very much a new boy at javascript so i'm sure kaht and others have better ways to achieve your aim.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unoh Donations Site - Ministries &amp; Appeals</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language = "Javascript">

function recalculate() {
	
	//get a collection of all the select boxes
	var ctlSelects = document.getElementsByTagName("select");
	//find out how many there are
	var l = ctlSelects.length;
	//create a variable to hold the total running sum
	var tp = 0;
	
	//iterate through the collection of select boxes
	for(i=0; i<l; i++){
		//get the quantity
		var q = ctlSelects[i].value;
		//get the name of the hidden price field derived from the select box name 
		var pn =  ctlSelects[i].name + "_Fee";
		//because the hidden fields are not id'd but only named
		//grab a collection
		//ideally you would change the above to getElementById and add an id to each hidden field
		var p_collection = document.getElementsByName(pn);
		//we know (hope) there is only one in the collection so
		//price is in the first element
		var p = p_collection[0].value;
		
		//multiply price by quantity and increment the running sum
		tp = (q * p) + tp;
	}
	//change the html of the total span to set it to the total
	document.getElementById('total').innerHTML = tp;
}

</script>

</head>

<!--<body onload="if(top.location.href.indexOf('index.htm')==-1) top.location='index.htm';"> -->
<body onload="recalculate();">
<form name="form1" method="post" action="">
<font face="Arial, Helvetica, sans-serif"><strong>Registration Fees:</strong></font></p>
  <table width="749" border="0" cellpadding="0">

    <tr> 
      <td width="139">&nbsp;</td>
      <td width="113" bgcolor="#99FFCC">
<div align="center"><font face="Arial, Helvetica, sans-serif">Early Bird Fee*</font></div></td>
      <td width="147" bgcolor="#99FFCC">
<div align="center"><font face="Arial, Helvetica, sans-serif">Concession Fee**</font></div></td>
      <td width="116" bgcolor="#99FFCC">
<div align="center"><font face="Arial, Helvetica, sans-serif">Kids Program^</font></div></td>
      <td width="109" bgcolor="#99FFCC"> 
        <div align="center"><font face="Arial, Helvetica, sans-serif">Creche^^</font></div></td>

      <td width="111" bgcolor="#99FFCC">
<div align="center"><font face="Arial, Helvetica, sans-serif">Meals~</font></div></td>
    </tr>
  </table>
  <table width="749" border="0" cellpadding="0">
    <tr> 
      <td width="140" bgcolor="#FFFF99"><font face="Arial, Helvetica, sans-serif">Full 
        Conference</font></td>
      <td width="51" bgcolor="#FFFF99"><input name="EBF_Full_Fee" type="hidden" value="135" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$135</font></div></td>

      <td width="58" bgcolor="#FFFF99"> <div align="center"> 
          <select name="EBF_Full" id="EBF_Full" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="68" bgcolor="#FFFF99"><input name="Conc_Full_Fee" type="hidden" value="105" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$105</font></div></td>

      <td width="78" bgcolor="#FFFF99"> <div align="center"> 
          <select name="Conc_Full" id="Conc_Full"onchange="recalculate()" >
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54" bgcolor="#FFFF99"> <input name="Kids_Full_Fee" type="hidden" value="25" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$25</font></div></td>

      <td width="60" bgcolor="#FFFF99"> <div align="center"> 
          <select name="Kids_Full" id="Kids_Full" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54" bgcolor="#FFFF99"><input name="Creche_Full_Fee" type="hidden" value="0" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">Free</font></div></td>

      <td width="51" bgcolor="#FFFF99"> <div align="center"> 
          <select name="Creche_Full" id="Creche_Full" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="47" bgcolor="#FFFF99"> <input name="Meal_Full_Fee" type="hidden" value="35" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$35</font></div></td>

      <td width="64" bgcolor="#FFFF99"> <div align="center"> 
          <select name="Meal_Full" id="Meal_Full" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
    </tr>

    <tr bgcolor="#99FFCC"> 
      <td><font face="Arial, Helvetica, sans-serif">Friday Only</font></td>
      <td width="51"> <input name="EBF_Fri_Fee" type="hidden" value="65" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$65</font></div></td>
      <td width="58"> <div align="center"> 
          <select name="EBF_Fri" id="EBF_Fri" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>

            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>

            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>

            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>

            <option value="20">20</option>
          </select>
        </div></td>
      <td width="68"> <input name="Conc_Fri_Fee" type="hidden" value="55" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$55</font></div></td>
      <td width="78"> <div align="center"> 
          <select name="Conc_Fri" id="Conc_Fri" onchange="recalculate()">
            <option value="0" selected>0</option>

            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>

            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>

            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>

            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54"> <input name="Kids_Fri_Fee" type="hidden" value="10" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>
      <td width="60"> <div align="center"> 
          <select name="Kids_Fri" id="Kids_Fri"onchange="recalculate()">

            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>

            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>

            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>

            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54"> <input name="Creche_Fri_Fee" type="hidden" value="0" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">Free</font></div></td>

      <td width="51"> <div align="center"> 
          <select name="Creche_Fri" id="Creche_Fri" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="47"> <input name="Meal_Fri_Fee" type="hidden" value="15" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$15</font></div></td>

      <td width="64"> <div align="center"> 
          <select name="Meal_Fri" id="Meal_Fri"onchange="recalculate()" >
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
    </tr>

    <tr bgcolor="#FFFF99"> 
      <td><font face="Arial, Helvetica, sans-serif">Saturday Only</font></td>
      <td width="51"> <input name="EBF_Sat_Fee" type="hidden" value="65" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$65</font></div></td>
      <td width="58"> <div align="center"> 
          <select name="EBF_Sat" id="EBF_Sat" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>

            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>

            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>

            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>

            <option value="20">20</option>
          </select>
        </div></td>
      <td width="68"> <input name="Conc_Sat_Fee" type="hidden" value="55" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$55</font></div></td>
      <td width="78"> <div align="center"> 
          <select name="Conc_Sat" id="Conc_Sat" onchange="recalculate()">
            <option value="0" selected>0</option>

            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>

            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>

            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>

            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54"> <input name="Kids_Sat_Fee" type="hidden" value="10" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>
      <td width="60"> <div align="center"> 
          <select name="Kids_Sat" id="Kids_Sat" onchange="recalculate()">

            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>

            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>

            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>

            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54"> <input name="Creche_Sat_Fee" type="hidden" value="0" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">Free</font></div></td>

      <td width="51"> <div align="center"> 
          <select name="Creche_Sat" id="Creche_Sat" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="47"> <input name="Meal_Sat_Fee" type="hidden" value="15" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$15</font></div></td>

      <td width="64"> <div align="center"> 
          <select name="Meal_Sat" id="Meal_Sat" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
    </tr>

    <tr bgcolor="#99FFCC"> 
      <td height="24"><font face="Arial, Helvetica, sans-serif">Sunday Only</font></td>
      <td width="51"> <input name="EBF_Sun_Fee" type="hidden" value="40" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$40</font></div></td>
      <td width="58"> <div align="center"> 
          <select name="EBF_Sun" id="EBF_Sun" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>

            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>

            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>

            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>

            <option value="20">20</option>
          </select>
        </div></td>
      <td width="68"> <input name="Conc_Sun_Fee" type="hidden" value="30" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$30</font></div></td>
      <td width="78"> <div align="center"> 
          <select name="Conc_Sun" id="Conc_Sun" onchange="recalculate()">
            <option value="0" selected>0</option>

            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>

            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>

            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>

            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54"> <input name="Kids_Sun_Fee" type="hidden" value="10" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>
      <td width="60"> <div align="center"> 
          <select name="Kids_Sun" id="Kids_Sun"onchange="recalculate()" >

            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>

            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>

            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>

            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="54"> <input name="Creche_Sun_Fee" type="hidden" value="0" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">Free</font></div></td>

      <td width="51"> <div align="center"> 
          <select name="Creche_Sun" id="Creche_Sun" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
      <td width="47"> <input name="Meal_Sun_Fee" type="hidden" value="10" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>

      <td width="64"> <div align="center"> 
          <select name="Meal_Sun" id="Meal_Sun" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
        </div></td>
    </tr>

  </table>
  <p><font face="Arial, Helvetica, sans-serif"><strong>Friday 27th &#8216;Youth 
    Night&#8217; with &#8216;epic&#8217; youth band from Citylife, $10 door charge 
    for non conference delegates payable on the night. <br>
    Please call the UNOH office on 9547 1129 for group bookings.</strong></font></p>
  <p><font face="Arial, Helvetica, sans-serif">* Register before July 15 - no 
    Early Bird available on concession fees. <br>

    ** Concession qualification: Full time students, unemployed and pension recipients. 
    <br>
    ^ Kids Program by OAC ministries <a href="[URL unfurl="true"]http://www.oac.org.au"[/URL] target="_blank">[URL unfurl="true"]www.oac.org.au</a><br>[/URL]
    ^^ 9am - 12:30pm each day,18 months-5yrs old. Please enter number of children.<br>
    ~ Meals includes lunch and dinner Friday &amp; Saturday and lunch only on 
    Sunday. </font></p>
  <p><font face="Arial, Helvetica, sans-serif"><strong>Accommodation:</strong></font></p>

  <table width="465" border="0">
    <tr> 
      <td width="126">&nbsp;</td>
      <td width="39%" bgcolor="#99FFCC">
<div align="center"><font face="Arial, Helvetica, sans-serif">Basic 
          Accomodation</font></div></td>
      <td width="33%" bgcolor="#99FFCC"> 
        <div align="center"><font face="Arial, Helvetica, sans-serif">Powered 
          Site**</font></div></td>
    </tr>
  </table>

  <table width="465" border="0">
    <tr bgcolor="#FFFF99"> 
      <td width="126"><font face="Arial, Helvetica, sans-serif">Thursday Night</font></td>
      <td width="72"> <input name="Basic_Acc_Thurs_Fee" type="hidden" value="12" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$12</font></div></td>
      <td width="100"><div align="center"><font face="Arial, Helvetica, sans-serif"> 
          <select name="Basic_Acc_Thurs" id="Basic_Acc_Thurs" onchange="recalculate()">
            <option value="0" selected>0</option>

            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>

            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>

            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>

            <option value="19">19</option>
            <option value="20">20</option>
          </select>
          </font></div></td>
      <td width="63"> <input name="Power_Site_Thurs_Fee" type="hidden" value="10" /> 
        <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>
      <td width="82"><div align="center"><font face="Arial, Helvetica, sans-serif"> 
          <select name="Power_Site_Thurs" id="Power_Site_Thurs" onchange="recalculate()">

            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>

            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>

            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>

            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
          </font></div></td>
    </tr>
    <tr bgcolor="#99FFCC"> 
      <td><font face="Arial, Helvetica, sans-serif">Friday Night</font></td>

      <td> <input name="Basic_Acc_Fri_Fee" type="hidden" value="12" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$12</font></div></td>
      <td><div align="center"><font face="Arial, Helvetica, sans-serif"> 
          <select name="Basic_Acc_Fri" id="Basic_Acc_Fri" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>

            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>

            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>

            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>

          </select>
          </font></div></td>
      <td> <input name="Power_Site_Fri_Fee" type="hidden" value="10" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>
      <td><div align="center"><font face="Arial, Helvetica, sans-serif"> 
          <select name="Power_Site_Fri" id="Power_Site_Fri" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>

            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>

            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>

            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>

            <option value="20">20</option>
          </select>
          </font></div></td>
    </tr>
    <tr bgcolor="#FFFF99"> 
      <td><font face="Arial, Helvetica, sans-serif">Saturday Night</font></td>
      <td> <input name="Basic_Acc_Sat_Fee" type="hidden" value="12" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$12</font></div></td>

      <td><div align="center"><font face="Arial, Helvetica, sans-serif"> 
          <select name="Basic_Acc_Sat" id="Basic_Acc_Sat" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
          </font></div></td>
      <td> <input name="Power_Site_Sat_Fee" type="hidden" value="10" /> <div align="right"><font face="Arial, Helvetica, sans-serif">$10</font></div></td>

      <td><div align="center"><font face="Arial, Helvetica, sans-serif"> 
          <select name="Power_Site_Sat" id="Power_Site_Sat" onchange="recalculate()">
            <option value="0" selected>0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>

            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>

            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
          </select>
          </font></div></td>
    </tr>

  </table>
  <p><font face="Arial, Helvetica, sans-serif">* Basic Accomodation - cabin accomodation 
    - shared - fees are per person.<br>
    ** Powered caravan site fees are per site, not per person. For offsite accommodation 
    options see our website. </font></p>
  <p><font face="Arial, Helvetica, sans-serif"><strong>Total Payment Due:
    <span id="total"/>0</span>
    </strong></font></p>
  <p>&nbsp;</p>
</form>
			  
	

<p align="center">&nbsp;</p>
</body>
</html>

bigbird3156 · Feb 27, 2007

I think I will need to drop the dropdown menus and swap them for text boxes instead - they dont seem to work no matter how i try

the big question is how do I change the JS so that it skips the first column and reads the value off the 2nd column and the entered value in the 3rd column.

also make it read the 2nd table and add that to the calc field...

any ideas

[wiggle]

The Bird from Down Under- Bigbird 3156
Programmer?? - I thought the option was pretender not programmer!! [jester]

jpadie · Mar 1, 2007

the code i posted works just fine on my browsers. in what way is it not working for you?

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!

updating and adding fields

bigbird3156

Programmer

kaht

Programmer

bigbird3156

Programmer

bigbird3156

Programmer

kaht

Programmer

bigbird3156

Programmer

jpadie

Technical User

bigbird3156

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor