1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:18 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Need help with form calculation please

Help calculating total on form using javascript

         

baricrazi

6:12 pm on Dec 22, 2005 (gmt 0)



I am trying to set up an order form. On this order form I have some dynamic comboboxes that when a customer selects something in the first box it populates the next one and then based on that selection populates the third box. The problem is that the second combobox I need to assign currency values also so that when one of the options are selected the currency value is updated in the total field. Also there is a check box that when checked should add a currency value of 10.00. I would also like for the total field to be protected in a way that the total can't be changed for obvious reasons. Any help with this would be greatly appreciated.

Here is my javascript code: 


<script type="text/javascript">
var arrItems1 = new Array();
var arrItemsGrp1 = new Array();
arrItems1[0] = "8 Hour Time Window $50";
arrItemsGrp1[0] = 1;
arrItems1[1] = "4 Hour Time Window $60";
arrItemsGrp1[1] = 1;
arrItems1[2] = "2 Hour Time Window $85";
arrItemsGrp1[2] = 1;
arrItems1[3] = "Specific Time $100";
arrItemsGrp1[3] = 1;
arrItems1[4] = "8 Hour Time Window $75";
arrItemsGrp1[4] = 2;
arrItems1[5] = "4 Hour Time Window $85";
arrItemsGrp1[5] = 2;
arrItems1[6] = "2 Hour Time Window $100";
arrItemsGrp1[6] = 2;
arrItems1[7] = "Specific Time $150";
arrItemsGrp1[7] = 2;
var arrItems2 = new Array();
var arrItemsGrp2 = new Array();
arrItems2[21] = "8am - 4pm";
arrItemsGrp2[21] = 0
arrItems2[22] = "9am - 5pm";
arrItemsGrp2[22] = 0
arrItems2[23] = "10am - 6pm";
arrItemsGrp2[23] = 0
arrItems2[24] = "11am - 7pm";
arrItemsGrp2[24] = 0
arrItems2[25] = "12pm - 8pm";
arrItemsGrp2[25] = 0
arrItems2[26] = "1pm - 9pm";
arrItemsGrp2[26] = 0
arrItems2[31] = "8am - 12pm";
arrItemsGrp2[31] = 1
arrItems2[32] = "9am - 1pm";
arrItemsGrp2[32] = 1
arrItems2[33] = "10am - 2pm";
arrItemsGrp2[33] = 1
arrItems2[34] = "11am - 3pm";
arrItemsGrp2[34] = 1
arrItems2[35] = "12pm - 4pm";
arrItemsGrp2[35] = 1
arrItems2[36] = "1pm - 5pm";
arrItemsGrp2[36] = 1
arrItems2[37] = "2pm - 6pm";
arrItemsGrp2[37] = 1
arrItems2[38] = "3pm - 7pm";
arrItemsGrp2[38] = 1
arrItems2[39] = "4pm - 8pm";
arrItemsGrp2[39] = 1
arrItems2[40] = "5pm - 9pm";
arrItemsGrp2[40] = 1
arrItems2[300] = "8am - 10am";
arrItemsGrp2[300] = 2
arrItems2[301] = "9am - 11am";
arrItemsGrp2[301] = 2
arrItems2[302] = "10am - 12pm";
arrItemsGrp2[302] = 2
arrItems2[303] = "11am - 1pm";
arrItemsGrp2[303] = 2
arrItems2[304] = "12pm - 2pm";
arrItemsGrp2[304] = 2
arrItems2[305] = "1pm - 3pm";
arrItemsGrp2[305] = 2
arrItems2[306] = "2pm - 4pm";
arrItemsGrp2[306] = 2
arrItems2[307] = "3pm - 5pm";
arrItemsGrp2[307] = 2
arrItems2[308] = "4pm - 6pm";
arrItemsGrp2[308] = 2
arrItems2[309] = "5pm - 7pm";
arrItemsGrp2[309] = 2
arrItems2[310] = "6pm - 8pm";
arrItemsGrp2[310] = 2
arrItems2[311] = "7pm - 9pm";
arrItemsGrp2[311] = 2
arrItems2[500] = "8am - 12pm";
arrItemsGrp2[500] = 5
arrItems2[501] = "9am - 1pm";
arrItemsGrp2[501] = 5
arrItems2[503] = "10am - 2pm";
arrItemsGrp2[503] = 5
arrItems2[504] = "11am - 3pm";
arrItemsGrp2[504] = 5
arrItems2[505] = "12pm - 4pm";
arrItemsGrp2[505] = 5
arrItems2[506] = "1pm - 5pm";
arrItemsGrp2[506] = 5
arrItems2[507] = "2pm - 6pm";
arrItemsGrp2[507] = 5
arrItems2[508] = "3pm - 7pm";
arrItemsGrp2[508] = 5
arrItems2[509] = "4pm - 8pm";
arrItemsGrp2[509] = 5
arrItems2[510] = "5pm - 9pm";
arrItemsGrp2[510] = 5
arrItems2[103] = "8am - 4pm";
arrItemsGrp2[103] = 4
arrItems2[104] = "9am - 5pm";
arrItemsGrp2[104] = 4
arrItems2[105] = "10am - 6pm";
arrItemsGrp2[105] = 4
arrItems2[106] = "11am - 7pm";
arrItemsGrp2[106] = 4
arrItems2[107] = "12pm - 8pm";
arrItemsGrp2[107] = 4
arrItems2[108] = "1pm - 9pm";
arrItemsGrp2[108] = 4
arrItems2[600] = "8am - 10am";
arrItemsGrp2[600] = 6
arrItems2[601] = "9am - 11am";
arrItemsGrp2[601] = 6
arrItems2[602] = "10am - 12pm";
arrItemsGrp2[602] = 6
arrItems2[603] = "11am - 1pm";
arrItemsGrp2[603] = 6
arrItems2[604] = "12pm - 2pm";
arrItemsGrp2[604] = 6
arrItems2[605] = "1pm - 3pm";
arrItemsGrp2[605] = 6
arrItems2[606] = "2pm - 4pm";
arrItemsGrp2[606] = 6
arrItems2[607] = "3pm - 5pm";
arrItemsGrp2[607] = 6
arrItems2[608] = "4pm - 6pm";
arrItemsGrp2[608] = 6
arrItems2[609] = "5pm - 7pm";
arrItemsGrp2[609] = 6
arrItems2[610] = "6pm - 8pm";
arrItemsGrp2[610] = 6
arrItems2[611] = "7pm - 9pm";
arrItemsGrp2[611] = 6
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
 var myEle ;
 var x ;
 // Empty the second drop down box of any choices
 for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
 if (control.name == "firstChoice") {
 // Empty the third drop down box of any choices
 for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
 }
 // ADD Default Choice - in case there are no values
 myEle = document.createElement("option") ;
 myEle.value = 0 ;
 myEle.text = "[SELECT]" ;
 // controlToPopulate.add(myEle) ;
 controlToPopulate.appendChild(myEle)
 // Now loop through the array of individual items
 // Any containing the same child id are added to
 // the second dropdown box
 for ( x = 0 ; x < ItemArray.length ; x++ ) {
 if ( GroupArray[x] == control.value ) {
 myEle = document.createElement("option") ;
 //myEle.value = x ;
 myEle.setAttribute('value',x);
 // myEle.text = ItemArray[x] ;
 var txt = document.createTextNode(ItemArray[x]);
 myEle.appendChild(txt)
 // controlToPopulate.add(myEle) ;
 controlToPopulate.appendChild(myEle)
 }
 }
}
function selectChange(control, controlToPopulate, ItemArray, GroupArray) {
 var myEle ;
 var x ;
 // Empty the second drop down box of any choices
 for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
 if (control.name == "firstChoice") {
 // Empty the third drop down box of any choices
 for (var q=form.thirdChoice.options.length;q>=0;q--) form.thirdChoice.options[q] = null;
 }
 // ADD Default Choice - in case there are no values
 myEle=document.createElement("option");
 theText=document.createTextNode("[SELECT]");
 myEle.appendChild(theText);
 myEle.setAttribute("value","0");
 controlToPopulate.appendChild(myEle);
 // Now loop through the array of individual items
 // Any containing the same child id are added to
 // the second dropdown box
 for ( x = 0 ; x < ItemArray.length ; x++ ) {
 if ( GroupArray[x] == control.value ) {
 myEle = document.createElement("option") ;
 //myEle.value = x ;
 myEle.setAttribute("value",x);
 // myEle.text = ItemArray[x] ;
 var txt = document.createTextNode(ItemArray[x]);
 myEle.appendChild(txt)
 // controlToPopulate.add(myEle) ;
 controlToPopulate.appendChild(myEle)
 }
 }
}
function performMath()
{
 var num1 = document.getElementById('secondchoice').value - 0; // -0 converts to number
 var num2 = 0;
 document.getElementById('total').value=(document.getElementById('CD').checked)?(num1+num2+10):(num1+num2); 
}
</script>

Here is my form code: 


<form name=form>
<table align="left" width="100%">
 <tr>
 <td width="24%" bgcolor="#FFCCFF">
 <b><font face="Arial" color="#990000">Delivery Area/Time</font></b></td>
 <td width="4%" bgcolor="#FFCCFF">
 &nbsp;</td>
 <td width="504" colspan="3" bgcolor="#FFCCFF">
 <b><font face="Arial" color="#990000">Sender Information</font></b></td>
 </tr>
 <tr>
 <td width="24%" bgcolor="#FFCCFF">
 <p align="left">
 <font face="Arial"><font size="2" color="#990000">Select the delivery area:<br>
 </font>
 <font color="#990000">
 <select id="firstChoice" name="firstChoice" onchange="selectChange(this, form.secondChoice, arrItems1, arrItemsGrp1);" size="1">
 <option value="0" selected>[SELECT]</option>
 <option value="1">Austin</option>
 <option value="2">Belton</option>
 <option value="1">Buda</option>
 <option value="1">Canyon Lake</option>
 <option value="1">Canyon Springs</option>
 <option value="1">Cedar Park</option>
 <option value="2">Copperas Cove</option>
 <option value="1">Driftwood</option>
 <option value="1">Dripping Springs</option>
 <option value="1">Elgin</option>
 <option value="2">Florence</option>
 <option value="2">Fort Hood</option>
 <option value="1">Garden Ridge</option>
 <option value="1">Georgetown</option>
 <option value="2">Granger</option>
 <option value="2">Harker Heights</option>
 <option value="1">Hutto</option>
 <option value="2">Jarrell</option>
 <option value="2">Jonestown</option>
 <option value="2">Killeen</option>
 <option value="1">Kyle</option>
 <option value="1">Lago Vista</option>
 <option value="1">Lakeway</option>
 <option value="1">Leander</option>
 <option value="1">Liberty Hill</option>
 <option value="1">Manor</option>
 <option value="1">Mount Gainor</option>
 <option value="1">Mountain City</option>
 <option value="1">New Braunfels</option>
 <option value="1">Pflugervilles</option>
 <option value="1">Round Rock</option>
 <option value="1">San Antonio</option>
 <option value="1">San Marcos</option>
 <option value="1">Seguin</option>
 <option value="1">Shertz</option>
 <option value="1">Taylor</option>
 <option value="2">Temple</option>
 <option value="1">Wimberly</option>
 </select></font><font size="2" color="#990000"> </font></font></td>
 <td width="4%" valign="top" bgcolor="#FFCCFF">
 &nbsp;</td>
 <td width="26%" valign="top" bgcolor="#FFCCFF">
 <font face="Arial" size="2" color="#990000">First</font><font face="Arial"><font size="2" color="#990000"> Name:<br>
</font><font color="#990000">
<input type="text" name="firstname" size="20"></font></font></td>
 <td width="308" valign="top" colspan="2" bgcolor="#FFCCFF">
 <font face="Arial" size="2" color="#990000">Last Name:</font><font face="Arial"><font size="2" color="#990000"><br>
</font><font color="#990000">
<input type="text" name="lastname" size="20"></font></font></td>
 </tr>
 <tr>
 <td width="24%" bgcolor="#FFCCFF">
 <font face="Arial"><font size="2" color="#990000">Select your time window:<br>
 </font>
 <font color="#990000">
 <select id="secondChoice" name="secondChoice" onchange="selectChange(this, form.thirdChoice, arrItems2, arrItemsGrp2);">
 </select></font></font></td>
 <td width="4%" valign="top" bgcolor="#FFCCFF">
 &nbsp;</td>
 <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
 <font face="Arial" size="2" color="#990000">Address 1:<br>
<input type="text" name="adress1" size="40"></font></td>
 </tr>
 <tr>
 <td width="24%" bgcolor="#FFCCFF">
 <font face="Arial"><font size="2" color="#990000">Select your time frame:<br>
 </font>
 <font color="#990000">
 <select id="thirdChoice" name="thirdChoice">
 </select></font></font></td>
 <td width="4%" valign="top" bgcolor="#FFCCFF">
 &nbsp;</td>
 <td width="504" valign="top" colspan="3" bgcolor="#FFCCFF">
 <font face="Arial" size="2" color="#990000">Address 2:<br>
<input type="text" name="address2" size="40"></font></td>
 </tr>
 <tr>
 <td width="24%" bgcolor="#FFCCFF" valign="top">
 <p align="left"><font face="Arial" size="2" color="#990000">If you 
selected specific time please enter time below:<br>
<input type="text" name="T1" size="15"></font></td>
 <td width="4%" valign="top" rowspan="4" bgcolor="#FFCCFF">
 &nbsp;</td>
 <td width="26%" valign="top" height="20" bgcolor="#FFCCFF">
 <font face="Arial" size="2" color="#990000">City:<br>
<input type="text" name="city" size="20"></font></td>
 <td width="4%" valign="top" bgcolor="#FFCCFF">
 <font color="#990000">State:<br>
<input type="text" name="state" size="2"></font></td>
 <td width="39%" valign="top" bgcolor="#FFCCFF">
 <font color="#990000">Zip:<br>
<input type="text" name="zip" size="5"></font></td>
 </tr>
 <tr>
 <td width="24%" rowspan="3" bgcolor="#FFCCFF" valign="top">
 <font face="Arial"><font color="#990000">
<img border="0" src="Recordings/With_A_Song_drop_shadow.jpg" width="117" height="115"><br>
<input type="checkbox" name="CD" value="ON"></font><font size="2" color="#990000">&nbsp; 
Add a CD + $10</font></font></td>
 <td width="26%" valign="top" bgcolor="#FFCCFF">
 <font color="#990000">Email:<br>
<input type="text" name="email" size="26"></font></td>
 <td width="4%" valign="top" bgcolor="#FFCCFF">
 &nbsp;</td>
 <td width="39%" valign="top" bgcolor="#FFCCFF">
 <font color="#990000">Phone:<br>
<input type="text" name="phone" size="20"></font></td>
 </tr>
 <tr>
 <td width="26%" valign="bottom" bgcolor="#FFCCFF">
 <p align="right"><font color="#990000">Total</font></td>
 <td width="4%" valign="bottom" bgcolor="#FFCCFF">
 <p align="center"><font color="#990000">=</font></td>
 <td width="39%" valign="bottom" bgcolor="#FFCCFF">
 <font color="#990000"><input type="text" name="total" size="15"></font></td>
 </tr>
 <tr>
 <td width="26%" valign="bottom" bgcolor="#FFCCFF">
 <p align="right">&nbsp;</td>
 <td width="4%" valign="bottom" bgcolor="#FFCCFF">
 <p align="center">&nbsp;</td>
 <td width="39%" valign="bottom" bgcolor="#FFCCFF">
 <input type="button" value="Continue" name="Continue">&nbsp;&nbsp;
<input type="reset" value="Reset" name="Reset"></td>
 </tr>
 </table>
</form>

Once again any help with this would be greatly appreciated. I am getting a lot of pressure from my client to get this thing running and I am stuck at this point.

Thanks,
baricrazi

legallyBlind

5:58 pm on Dec 26, 2005 (gmt 0)

10+ Year Member



Trying using readonly in your <input> tag, it will prevent the user from modifying the value of your input field

ie: <input type="text" value="xyz" readonly>

see: [w3schools.com...]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:18 am May 14, 2026