JavaScript - Use Javascript To Calculate Total Cost On Booking Form?

I have created a function but it only half works. I can get the number of contributers to add up but not the total amount of dollars they contributed. I am not sure if my function is wrong or if I am just confused with what variable to output for the dollar amount total. Please assist.

My Function:

<script type="text/javascript">
function amountTotal() {
total = 0;
for (var i=0; i<=amount.length; i++) {
total+=amount[i];
}
return total;
}
</script>

My output files:

<div id=totals>
<script type="text/javascript">
document.write("<table border=1' cellspacing=1'>");
document.write("<tr><th id=sumTitle colspan=2'>Summary</th></tr>");
document.write("<tr><th>Contributors</th>");
document.write("<td>"+[i]+"</td>");
document.write("</tr>");
document.write("<tr><th>Amount</th>");
document.write("<td>$ +[total]+</td></tr>");
document.write("</table>");
</script>

I have a small price quote calculator/contact information form. I want the customer to fill out the whole form submit it, and get his/her estimated price based on selections in the form.

I am using asp, and I have a javascript for the quote calculations. My question is how would I take this js and execute it when the user hits submit, and then display that quote price on the next page. Here is the javascript that I'm working with:

Code:

var practice_field = new Array();
practice_field["None"]=0;
practice_field["Allergy and Immunology"]=4400;
practice_field["Endocrinology"]=4400;
practice_field["Pathology"]=4400;
practice_field["Dermatology"]=4400;
practice_field["Geriatrics"]=4400;
practice_field["Physical Rehabilitation"]=4400;
practice_field["Family Practice"]=6900;
practice_field["General Practice"]=6900;
practice_field["Internal Medicine"]=6900;
practice_field["Oncology"]=6900;
practice_field["Oral Surgery"]=6900;
practice_field["Radiology"]=6900;
practice_field["Gastroenterology"]=6900;
practice_field["Infectious Disease"]=6900;
practice_field["Nephrology"]=6900;
practice_field["Ophthalmology"]=6900;
practice_field["Pediatrics"]=6900;
practice_field["Urology"]=6900;
practice_field["Anesthesiology"]=9000;
practice_field["Cosmetic Surgery"]=9000;
practice_field["General Surgery"]=9000;
practice_field["Neurology"]=9000;
practice_field["Otolaryngology"]=9000;
practice_field["Plastic Surgery"]=9000;
practice_field["Vascular Surgery"]=9000;
practice_field["Cardiology"]=9000;
practice_field["Emergency Medicine"]=9000;
practice_field["Gynecology"]=9000;
practice_field["Orthopedic Surgery"]=9000;
practice_field["Pain Management"]=9000;
practice_field["Pulmonary Surgery"]=9000;
practice_field["Neurological Surgery"]=9900;
practice_field["Obstetrics"]=9900;

 

 var society_member= new Array();
 society_member["None"]=null;
society_member["BCMA"]=0.10;
society_member["DCMA"]=0.10;
society_member["FOGS"]=0.10;
society_member["FNS"]=0.10;
society_member["PBCMS"]=0.10;
society_member["FSPS"]=0.10;
 

function getPracticeField()
{
    var docPracticeField=0;

    var theForm = document.forms["quoteform"];

     var selectedPracticeField = theForm.elements["practice"];
     
    
    docPracticeField = practice_field[selectedPracticeField.value];


    return docPracticeField;
}	 
	 


function getSelectedSociety()
{
    var docSelectedSociety=0;

    var theForm = document.forms["quoteform"];

     var selectedSociety = theForm.elements["society"];
     

    docSelectedSociety = society_member[selectedSociety.value];


    return docSelectedSociety;
}


function bareDefensePrice()
{
    var defensePrice=0;

    var theForm = document.forms["quoteform"];

    var includeDefense = theForm.elements["baredefense"];

  
    if(includeDefense.checked==true)
    {
        defensePrice=0;
    }

    return defensePrice;
}



function insuranceDefensePrice()
{

    var insuranceDefense=0;

    var theForm = document.forms["quoteform"];

    var includeMoreDefense = theForm.elements["insureddefense"];

    if(includeMoreDefense.checked==true){
        insuranceDefense=0;
    }
 
    return insuranceDefense;
}


        
function calculateTotal()
{

    var defensePrice = getPracticeField() + null - (getPracticeField() * getSelectedSociety()) + bareDefensePrice() + insuranceDefensePrice();
    

    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Your Pre-Paid Legal Defense Fee Will Be Around $"+defensePrice;

}



function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

here is the html:

Code:

<body onload='hideTotal()'>
    <div id="wrap">
        <form action="" id="quoteform" onsubmit="">
        <div>
        
            <div class="cont_order">
                <fieldset> 
                <legend>How Much Will My Pre-Paid Legal Defense Cost?</legend>
                <label >Choose Your Practice Field</label>
                
                <select id="practice" name='practice' onchange="calculateTotal()">
                <option value="None">Select Field</option>
                <option value="Allergy and Immunology">Allergy and Immunology</option>
                <option value="Endocrinology">Endocrinology</option>
                <option value="Pathology">Pathology</option>
                <option value="Dermatology">Dermatology</option>
                <option value="Geriatrics">Geriatrics</option>
                <option value="Physical Rehabilitation">Physical Rehabilitation</option>
                <option value="Family Practice">Family Practice</option>
                <option value="General Practice">General Practice</option>
                <option value="Internal Medicine">Internal Medicine</option>
                <option value="Oncology">Oncology</option>
                <option value="Oral Surgery">Oral Surgery</option>
                <option value="Radiology">Radiology</option>
                <option value="Gastroenterology">Gastroenterology</option>
                <option value="Infectious Disease">Infectious Disease</option>
                <option value="Nephrology">Nephrology</option>
                <option value="Ophthalmology">Ophthalmology</option>
                <option value="Pediatrics">Pediatrics</option>
                <option value="Urology">Urology</option>
                <option value="Anesthesiology">Anesthesiology</option>
                <option value="Cosmetic Surgery">Cosmetic Surgery</option>
                <option value="General Surgery">General Surgery</option>
                <option value="Neurology">Neurology</option>
                <option value="Otolaryngology">Otolaryngology</option>
                <option value="Plastic Surgery">Plastic Surgery</option>
                <option value="Vascular Surgery">Vascular Surgery</option>
                <option value="Cardiology">Cardiology</option>
                <option value="Emergency Medicine">Emergency Medicine</option>
                <option value="Gynecology">Gynecology</option>
                <option value="Orthopedic Surgery">Orthopedic Surgery</option>
                <option value="Pain Management">Pain Management</option>
                <option value="Pulmonary Surgery">Pulmonary Surgery</option>
                <option value="Neurological Surgery">Neurological Surgery</option>
                <option value="Obstetrics">Obstetrics</option>
               </select>
               
                <br/>
                <p>
                <label >Are You Affiliated With Any of the Following Medical Societies</label>
         		<select id="society" name='society' onchange="calculateTotal()">
                <option value="None">Select Society</option>
                <option value="None">No, I am not</option>
                <option value="BCMA">Broward County Medical Association</option>
                <option value="DCMA">Dade County Medical Association</option>
                <option value="FOGS">Florida Obstetrics & Gynecology Society</option>
                <option value="FNS">Florida Neurological Society</option>
                <option value="PBCMS">Palm Beach County Medical Society</option>
                <option value="FSPS">Florida Society of Plastic Surgeons</option>
                </select>
                </p>
                <br/>
                
                <label >What Type of Defense Are You Interested In?</label>
          		<br  />
                <label for='baredefense' class="inlinelabel">Bare Defense</label>
                <input type="checkbox" id="baredefense" name='baredefense' onclick="calculateTotal()" />
    
                <br  />
                <label class="inlinelabel" for='insureddefense'>Insured Defense</label>
                <input type="checkbox" id="insureddefense" name="insureddefense" onclick="calculateTotal()" />
                </p>
                
                <div id="totalPrice"></div>
                
                </fieldset>
                
            </div>
            <div class="cont_details">
            	<fieldset>
                <legend>Contact Details</legend>
                <label for='name'>Name</label>
                <input type="text" id="name" name='name' />
                <br/>
                <label for='address'>Address</label>
                <input type="text" id="address" name='address' />
                <br/>
                <label for='phonenumber'>Phone Number</label>
                <input type="text"  id="phonenumber" name='phonenumber'/>
                <br/>
                </fieldset>
            </div>
            <input type='submit' id='submit' value='Calculate Rate' onclick="calculateTotal()" />
        </div>  
       </form>
	</div><!--End of wrap-->

Hi, I am thinking of how to write the code for this:

There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes.

So...can anyone give me any references to this? Thanks.

Hi, please help. I've been trying to check what I did wrong in my code but still the total doesn't show. Below is my javascript function:
Code:

function CalculateTotal(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r) 
{ 
    var tota= document.getElementById('a'); 
var totb= document.getElementById('b'); 
var totc= document.getElementById('c'); 
var totd= document.getElementById('d'); 
var tote= document.getElementById('e'); 
var totf= document.getElementById('f'); 
var totg= document.getElementById('g'); 
var toth= document.getElementById('h'); 
var toti= document.getElementById('i'); 
var totj= document.getElementById('j'); 
var totk= document.getElementById('k'); 
var totl= document.getElementById('l'); 
var totm= document.getElementById('m'); 
var totn= document.getElementById('n'); 
var toto= document.getElementById('o'); 
var totp= document.getElementById('p'); 
var totq= document.getElementById('q'); 
var totr= document.getElementById('r'); 	




	var grandTotal = tota + totb +totc + totd + tote + totf + totg + toth + toti +totj + totk + totl + totm + totn + toto + totp +totq + totr; document.getElementById('Total').value = grandTotal.toFixed(2);
}

Below is my textbox where there are more than 10 textboxes for user to enter donation amount. I'd like to calculate all the donation amount entered then show total in the bottom.
Code:

<fieldset id="fieldset-in_registration">
            <table>
	<tr>
    	<td style="width:390px;text-align:left"><label for="a" style="font-weight:bold">A. Aloha United Way Community Care Fund&nbsp</label></td>
        
        <td style="float:right">  <input id="a" name="a" class="text" type="text" value="$<?php safeEcho($form['a'])?>" style="width:100px;" onChange="CalculateTotal()"  />
     <?php helper_error('a');?> </td>
    </tr>
     <tr>
                	<td style="width:390px;text-align:left"><label for="b">211 Information and Referral Services </label></td>
        
        <td style="float:right">  <input id="b" name="b" class="text" type="text" value="$<?php safeEcho($form['b'])?>" style="width:100px;" onChange="CalculateTotal()" />
     <?php helper_error('b');?> </td>
                </tr>
                <tr>
                	<td style="width:390px;text-align:left"><label for="c">Volunteer Hawaii/Gifts-in-Kind</label></td>
        
        <td style="float:right">  <input id="c" name="c" class="text" type="text" value="$<?php safeEcho($form['c'])?>" style="width:100px;" onChange="CalculateTotal()"/>
     <?php helper_error('c');?> </td>
                </tr>
</table>
            </fieldset>
<fieldset id="fieldset-in_registration">
         <label for="impact" style="font-weight:bold">B. Impact Areas</label>
            <table>
            	<tr>
                	<td style="width:390px;text-align:left"><label for="d">Crime and Drug Use</label></td>
        
        <td style="float:right">  <input id="d" name="d" class="text" type="text" value="$<?php safeEcho($form['d'])?>" style="width:100px;" onChange="CalculateTotal()"/>
     <?php helper_error('d');?> </td>
                </tr>
                <tr>
                	<td style="width:390px;text-align:left"><label for="e">Early Childhood Development</label></td>
        
        <td style="float:right">  <input id="e" name="e" class="text" type="text" value="$<?php safeEcho($form['e'])?>" style="width:100px;" onChange="CalculateTotal()" />
     <?php helper_error('e');?> </td>
                </tr>
                <tr>
                	<td style="width:390px;text-align:left"><label for="f">Emergency and Crisis Services</label></td>
        
        <td style="float:right">  <input id="f" name="f" class="text" type="text" value="$<?php safeEcho($form['f'])?>" style="width:100px;" onChange="CalculateTotal()" />
     <?php helper_error('f');?> </td>
                </tr>
                <tr>
                	<td style="width:390px;text-align:left"><label for="g" >Financial Stability and Independence</label></td>
        
        <td style="float:right">  <input id="g" name="g" class="text" type="text" value="$<?php safeEcho($form['g'])?>" style="width:100px;" onChange="CalculateTotal()"/>
     <?php helper_error('g');?> </td>
                </tr>
                <tr>
                	<td style="width:390px;text-align:left"><label for="h" >Homelessness</label></td>
        
        <td style="float:right">  <input id="h" name="h" class="text" type="text" value="$<?php safeEcho($form['h'])?>" style="width:100px;" onChange="CalculateTotal()"/>
     <?php helper_error('h');?> </td>
                </tr>
               
               
            </table>
</fieldset>
            
            <fieldset id="fieldset-in_registration">
        	<p>D. <b>Agency/Program Support ($48 MINIMUM PER CHOICE)</b></p>
            <p>My gift is designated to one or more specific agencies or programs. Processing fee may apply. 
            <p style="color:#FF0000">(Note: Agency Name is intentionally shorten/cut-off and indented to the next line to fit in the page. Choose either one of the indented line will give the same code.)</p>
            
            <div class="formfield">
      <table>
      	<tr>
        	<td>
       <select id="designation_list1" name="designation_list1" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       
       </td>
      <td>
       <input id="i" name="i" class="text" type="text" value="$<?php safeEcho($form['i'])?>" style="width:100px;" onChange="CalculateTotal()""/>
       	</td>
       </tr>
       <tr>
       	 <td>
       <select id="designation_list2" name="designation_list2" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       
       </td>
      <td>
       <input id="j" name="j" class="text" type="text" value="$<?php safeEcho($form['j'])?>" style="width:100px;" onChange="CalculateTotal();"/>
       	</td>
       </tr>
       <tr>
        	<td>
       <select id="designation_list3" name="designation_list3" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="k" name="k" class="text" type="text" value="$<?php safeEcho($form['k'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>

       </tr>
       <tr>
        	<td>
       <select id="designation_list4" name="designation_list4" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="l" name="l" class="text" type="text" value="$<?php safeEcho ($form['l'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>

       </tr>
       <tr>
        	<td>
       <select id="designation_list5" name="designation_list5" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="m" name="m" class="text" type="text" value="$<?php safeEcho($form['m'])?>" style="width:100px;" onChange="CalculateTotal();"/>
       	</td>

       </tr>
       <tr>
        	<td>
       <select id="designation_list6" name="designation_list6" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="n" name="n" class="text" type="text" value="$<?php safeEcho($form['n'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>

       </tr>
       <tr>
        	<td>
       <select id="designation_list7" name="designation_list7" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="o" name="o" class="text" type="text" value="$<?php safeEcho($form['o'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>
       </tr>
       <tr>
        	<td>
       <select id="designation_list8" name="designation_list8" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="p" name="p" class="text" type="text" value="$<?php safeEcho($form['p'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>
       </tr>
       <tr>
        	<td>
       <select id="designation_list9" name="designation_list9" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="q" name="q" class="text" type="text" value="$<?php safeEcho($form['q'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>
       </tr>
       <tr>
        	<td>
       <select id="designation_list10" name="designation_list10" size="1" style="overflow-x:scroll; width:390px; ">
         <?php foreach ($designation_list as $descode => $prompt) : ?>
         <option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
         </option>
         <?php endforeach; ?>
       </select>
       </td>
      <td>
       <input id="r" name="r" class="text" type="text" value="$<?php safeEcho($form['r'])?>" style="width:100px;" onChange="CalculateTotal()"/>
       	</td>
       </tr>
       <tr>
       	<td style="text-align:right;"><b>TOTAL GIFT(S) DESIGNATED (A-D)</b><BR /> (Must not exceed donation amount)</td>
        <td><input name="Total" id="Total" type="text" maxlength="10" readonly="true" onChange="CalculateTotal(this.value)" /></td>
       	
       </tr>
      </table>

Please help. I tried for how many days using the javascript calculations and still didn't work. I have a form with the same calculations and it does work but this one doesn't. Please help. Thanks a lot. Hope to hear from you soon.

It's been a long time since I've messed around with Javascript. I had some resources and books that sort of showed what I was wanting to do. Essentially what I am trying to create is a calculator which allows the user to check the components of their computer and when they hit "calculate" it will output the price of the system for them. I found some simplified examples of what I am trying to do online, but I cannot for the life of me figure out why when I hit "calculate" nothing happens The code is below (I pasted the wholes of both codes because I'm not sure where exactly the problems are). Any help is definitely appreciated!

html code:
Code:

<html>


<head>
<script language="JavaScript1.1" src="calculate.js" type="text/javascript"></script>
</head>




<body onLoad="load ()">


<center>

  <form name="calc" method="POST">

 <table width="100%" border="0" cellpadding="3">
  
  <tr>
   <td colspan="11"><center><h1>Computer Pricing Calculator</h1></center></td>
  </tr>

  <tr>
   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">TYPE</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="5" align="center"><font color="white" size="+2">PROCESSOR</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">HARD DRIVE</font></th>
  </tr>


<!--Row 1 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Single Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="single" size="10"></td>
   <td width="5"></td>


   <td colspan="2"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 2 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Dual Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="double" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

    <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 3 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">Desktop/Tower</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="pc" size="10"></td>
   <td width="5"></td>


   <td bgcolor="#eeeeee" width="20%">Core i-3 Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="triple" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Hyper-threaded Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ht" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 4 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>


   <td bgcolor="#eeeeee" width="20%">Quad Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="quad" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Enter the size (gb)</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="size" size="1"></td>
   <td width="5"></td>
  </tr>


<!--Row 5 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">Laptop</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="laptop" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Core i-5 Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="five" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Enter the speed (ghz)</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="text" name="speed" size="1"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

  </tr>


<!--Row 6 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Six Core Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="six" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>


<!--Row 7 -->
  <tr>
   <td colspan="2"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Core i-7 Processor</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="seven" size="10"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>

   <td colspan="2"></td>
   <td width="5"></td>
  </tr>
  

  

<tr>
   <td height="25">
   </td>
</tr>

<!--Row 1 -->
  <tr>
   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">RAM</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">VIDEO CARD</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OPTICAL DRIVE</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OFFICE</font></th>
  </tr>

<!--Row 2 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">512 MB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram512mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">No Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="novid" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/ROM Only</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrom" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Open Office</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nooffice" size="10"></td>
  </tr>

<!--Row 3 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">768 MB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram768mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">64 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid64mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/RW Only</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrw" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Office 97</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office97" size="10"></td>
  </tr>

<!--Row 4 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">1.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">128 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid128mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/RW - DVD/ROM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrom" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Office 2003</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office03" size="10"></td>
  </tr>

<!--Row 5 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">1.5 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram1500mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">256 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid256mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">CD/RW - DVD/RW</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="cdrwdvdrw" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Office 2007</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="office07" size="10"></td>
  </tr>

<!--Row 6 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">2.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">512 MB DDR Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid512mb" size="10"></td>
   <td width="5"></td>

   <td width="20%"></td>
   <td align="center" width="4%"></td>
   <td width="5"></td>

   <td width="20%"></td>
   <td align="center" width="4%"></td>
  </tr>

<!--Row 7 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">2.5 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram2500mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">768 MB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid768mb" size="10"></td>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">CONNECTIVITY</font></th>
   <td width="5"></td>

   <th bgcolor="#000000" colspan="2" align="center"><font color="white" size="+2">OS</font></th>
  </tr>

<!--Row 8 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">3.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">1.0 GB Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vid1000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">NIC</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="nic" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Windows XP</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="xp" size="10"></td>
  </tr>

<!--Row 9 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">3.5 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram3500mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">DDR2/DDR3 Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr23vid" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Modem</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="modem" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Windows Vista</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="vista" size="10"></td>
  </tr>

<!--Row 10 -->
  <tr>
   <td bgcolor="#eeeeee" width="20%">4.0 GB RAM</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ram4000mb" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">DDR5 Video Card</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="ddr5vid" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Wireless</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="wireless" size="10"></td>
   <td width="5"></td>

   <td bgcolor="#eeeeee" width="20%">Windows 7</td>
   <td bgcolor="#eeeeee" align="center" width="4%"><input type="checkbox" name="windows7os" size="10"></td>
  </tr>


<tr>
   <td height="40">
   </td>
</tr>


<tr>
   <td colspan="3"></td>
   <td colspan="2" align="center"><input name="Submit" type="submit" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:15pt; font-weight:900; letter-spacing=2px" onClick="count ()" value="CALCULATE PRICE!"></td>
   <td width="5"></td>
   <td colspan="2" align="center"><input type="reset" value="RESET VALUES!" style="background-color:#ffff00; color:#000000; border:5px solid #000000; font-family:arial; font-size:16pt; font-weight:900; letter-spacing=2px"></td>
   <td colspan="3"></td>
</tr>


<tr>
   <td height="40">
   </td>
</tr>

  <tr>
   <td bgcolor="#ffffff" colspan="11" align="center"><font size="18">PRICE = $</font><input name="pay" type="text" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:25pt; letter-spacing=1px" size="10"></td>
  </tr>



 </table>

</form>

</center>

</body>

</html>

javascript code (calculate.js)
Code:

function load()
{
window.status = "Pricing Guide"
}

function count()
{

//Type variables
var pcprice = 0;
var laptopprice = 20;
var typeprice = 0;

//Processor variables
var singleprice = 1.67;
var doubleprice = 2.05;
var tripleprice = 1.31;
var quadprice = 2.30;
var fiveprice = 1.97;
var sixprice = 2.0;
var sevenprice = 3.09;
var htprice = 0;
var processorprice = 0;

//RAM variables
var ram512mbprice = 15;
var ram756mbprice = 22;
var ram1000mbprice = 30;
var ram1500mbprice = 45;
var ram2000mbprice = 60;
var ram2500mbprice = 75;
var ram3000mbprice = 80;
var ram3500mbprice = 95;
var ram4000mbprice = 110;
var ramprice = 0;

//Video Card variables
var novidprice = 0;
var vid64mbprice = 10;
var vid128mbprice = 15;
var vid256mbprice = 20;
var vid512mbprice = 28;
var vid768mbprice = 33;
var vid1000mbprice = 40;
var ddr23vidprice = 1.5;
var ddr5vidprice = 2;
var vidprice = 0;
var videoprice = 0;

//Optical Drives variables
var cdromprice = 2;
var cdrwprice = 5;
var cdrwdvdromprice = 20;
var cdrwdvdrwprice = 35;
var driveprice = 0;

//Connectivity variables
var nicprice = 0;
var modemprice = 5;
var wireless price = 20;
var connectprice = 0;

//Office variables
var noofficeprice = 0;
var office97price = 0;
var office03price = 30;
var office07price = 50;
var officeprice = 0;

//Operating System variables
var xpprice = 0;
var vistaprice = 0;
var windows7osprice = 110;
var osprice = 0;

//Hard drive - Input Box
var hdsize = document.getElementById('size');
var hdprice = 0;

//Processor Speed - Input Box
var pcspeed = document.getElementById('speed');
var processorprice = 0;

//COMPUTER TYPE - Check Boxes
 if (calc.pc.checked){
    var typeprice = document.calc.pc.value = pcprice;
 } 
 if (calc.laptop.checked){
    var typeprice = document.calc.laptop.value = laptopprice;
 } 

//Hard Drive
var hdprice = hdsize * 0.30;

//Processor - Check Boxes
 if (calc.single.checked){
    var processorprice = document.calc.single.value = singleprice * pcspeed;
 } 
 if (calc.double.checked){
    var processorprice = document.calc.double.value = doubleprice * pcspeed;
 } 
 if (calc.triple.checked){
    var processorprice = document.calc.triple.value = tripleprice * pcspeed;
 } 
  if (calc.quad.checked){
    var processorprice = document.calc.quad.value = quadprice * pcspeed;
 } 
  if (calc.five.checked){
    var processorprice = document.calc.five.value = fiveprice * pcspeed;
 } 
  if (calc.six.checked){
    var processorprice = document.calc.six.value = sixprice * pcspeed;
 } 
 if (calc.seven.checked){
    var processorprice = document.calc.seven.value = sevenprice * pcspeed;
 } 
  if (calc.ht.checked){
    var htprice = document.calc.ht.value = 10;
 } 
 
 //RAM - Check Boxes
 if (calc.ram512mb.checked){
    var ramprice = document.calc.ram512mb.value = ram512mbprice;
 } 
 if (calc.ram756mb.checked){
    var ramprice = document.calc.ram756mb.value = ram756mbprice;
 } 
 if (calc.ram1000mb.checked){
    var ramprice = document.calc.ram1000mb.value = ram1000mbprice;
 } 
 if (calc.ram1500mb.checked){
    var ramprice = document.calc.ram1500mb.value = ram1500mbprice;
 } 
 if (calc.ram2000mb.checked){
    var ramprice = document.calc.ram2000mb.value = ram2000mbprice;
 } 
 if (calc.ram2500mb.checked){
    var ramprice = document.calc.ram2500mb.value = ram2500mbprice;
 } 
 if (calc.ram3000mb.checked){
    var ramprice = document.calc.ram3000mb.value = ram3000mbprice;
 } 
 if (calc.ram3500mb.checked){
    var ramprice = document.calc.ram3500mb.value = ram3500mbprice;
 } 
 if (calc.ram4000mb.checked){
    var ramprice = document.calc.ram4000mb.value = ram4000mbprice;
 } 


//VIDEO CARD - Check Boxes
 if (calc.novidprice.checked){
   var vidprice = document.calc.novidprice.value = novidprice;
 } 
 if (calc.vid64mb.checked){
    var vidprice = document.calc.vid64mb.value = vid64mbprice;
 } 
 if (calc.vid128mb.checked){
   var vidprice = document.calc.vid128mb.value = vid128mbprice;
 } 
 if (calc.vid256mb.checked){
   var vidprice = document.calc.vid256mb.value = vid256mbprice;
 } 
 if (calc.vid512mb.checked){
   var vidprice = document.calc.vid512mb.value = vid512mbprice;
 } 
 if (calc.vid768mb.checked){
   var vidprice = document.calc.vid768mb.value = vid768mbprice;
 } 
 if (calc.vid1000mb.checked){
   var vidprice = document.calc.vid1000mb.value = vid1000mbprice;
 } 
   var videoprice = vidprice;

 if (calc.ddr23vid.checked){
   var videoprice = document.calc.ddr23vid.value = vidprice * 1.5;
 } 
 if (calc.ddr5mb.checked){
   var videoprice = document.calc.ddr5mb.value = vidprice * 2;
 } 

//OPTICAL DRIVES - Checkbox
 if (calc.cdrom.checked){
    var driveprice = document.calc.cdrom.value = cdromprice;
 } 
 if (calc.cdrw.checked){
    var driveprice = document.calc.cdrw.value = cdrwprice;
 } 
 if (calc.cdrwdvdrom.checked){
    var driveprice = document.calc.cdrwdvdrom.value = cdrwdvdromprice;
 } 
 if (calc.cdrwdvdrw.checked){
    var driveprice = document.calc.cdrwdvdrw.value = cdrwdvdrwprice;
 } 

//CONNECTIVITY - Checkbox
 if (calc.nic.checked){
    var connectprice = document.calc.nic.value = nicprice;
 } 
 if (calc.modem.checked){
    var connectprice = document.calc.modem.value = modemprice;
 } 
 if (calc.wireless.checked){
    var connectprice = document.calc.wireless.value = wirelessprice;
 } 

// OFFICE - Checkbox
 if (calc.noffice.checked){
    var officeprice = document.calc.nooffice.value = officeprice;
 } 
 if (calc.office97.checked){
    var officeprice = document.calc.office97.value = office97price;
 } 
 if (calc.office03.checked){
   var officeprice = document.calc.office03.value = office03price;
 } 
 if (calc.office07.checked){
    var officeprice = document.calc.office07.value = office07price;
 } 

//OPERATING SYSTEM - Checkbox
 if (calc.xp.checked){
   var osprice = document.calc.xp.value = xpprice;
 } 
 if (calc.vista.checked){
   var osprice = document.calc.vista.value = vistaprice;
 } 
 if (calc.windows7os.checked){
   var osprice = document.calc.windows7os.value = windows7osprice;
 } 

document.calc.pay.value = typeprice + processorprice + htprice + ramprice + videoprice + driveprice + connectprice + officeprice + osprice + hdprice;
}

Hi, I'm trying to add the total number of costs depending on the rows added to return the subtotal then later add the service charge which gives the total grand amount.

I also need to add the item number when a new row is added.

Can any1 help?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>

<script type="text/javascript">
		function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var colCount = table.rows[0].cells.length;

			for(var i=0; i<colCount; i++) {

				var newcell	= row.insertCell(i);

				newcell.innerHTML = table.rows[0].cells[i].innerHTML;
				//alert(newcell.childNodes);
				switch(newcell.childNodes[0].type) {
					case "text":
							newcell.childNodes[0].value = "";
							break;
					case "checkbox":
							newcell.childNodes[0].checked = false;
							break;
					case "select-one":
							newcell.childNodes[0].selectedIndex = 0;
							break;
				}
			}
		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					if(rowCount <= 1) {
						alert("Cannot delete all the rows.");
						break;
					}
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}


</script>

</head>
<body >
<form action="#" id="calcForm" method="post">
            <table border="0" width="680" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="60" align="left" valign="top"><b>Item No</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="290" align="left" valign="top"><b>Description</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="210" align="left" valign="top"><b>Part No.</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="50" align="left" valign="top"><b>QTY</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="63" align="left" valign="top"><b>Cost</b></td>
                </tr>
            </table>
            <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="60" align="left" valign="top"><INPUT type="checkbox" name="chk"/>&nbsp;<b>1</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="290" align="left" valign="top">
                        <input type="text" name="partdesc[]" size="40" value="<?=$info['partdesc'][$x]?>">
                    </td>
                    <td width="3">&nbsp;</td>
                    <td width="210" align="left" valign="top">
                        <input type="text" name="partno[]" size="30" value="<?=$info['partno'][$x]?>">
                    </td>
                    <td width="3">&nbsp;</td>
                    <td width="50" align="left" valign="top">
                        <input type="text" name="qty[]" size="2" value="<?=$info['qty'][$x]?>">
                    </td>
                    <td width="3">&nbsp;</td>
                    <td width="63" align="left" valign="top">
                        <input type="text" name="cost[]" size="4" value="<?=$info['cost'][$x]?>">
                    </td>
                </tr>
            </table>
            <table id="parts" border="0" width="680" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="60" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="290" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="210" align="left" valign="top"><b>Sub Total</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="50" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="63" align="left" valign="top">
                        <input type="text" name="subtotal" size="4" value="<?=$info['subtotal']?>">
                    </td>
                </tr>
                <tr>
                    <td width="60" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="290" align="left" valign="top"><INPUT type="button" value="Add Row" onclick="addRow('parts')" /><INPUT type="button" value="Delete Row" onclick="deleteRow('parts')" /></td>
                    <td width="3">&nbsp;</td>
                    <td width="210" align="left" valign="top"><b>Service Charge</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="50" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="63" align="left" valign="top">
                        <input type="text" name="charge" size="4" value="<?=$info['charge']?>">
                    </td>
                </tr>
                <tr>
                    <td width="60" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="290" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="210" align="left" valign="top"><b>Grand Total</b></td>
                    <td width="3">&nbsp;</td>
                    <td width="50" align="left" valign="top">&nbsp;</td>
                    <td width="3">&nbsp;</td>
                    <td width="63" align="left" valign="top">
                        <input type="text" name="gtotal" size="4" value="<?=$info['gtotal']?>">
                    </td>
                </tr>
            </table>

</form>
</body>
</html>

I have added a booking form to a website with belongs to fastbooking.

You can see a temporary website here. http://www.kohkoodguide.com/

It works perfectly fine in Mozilla Firefox, Google Chrome, Opera and Safari but it does not load on Internet Explorer.

On the other browsers the form loads todays date and the year is generated but on IE the date stays on 01-01 and no year is generated.

I'm using wordpress as a cms.

I think the code that is not loading is Code:

<body onLoad='start();'>

But I'm not sure. The code of the year is Code:

<select name='fromyear' class="input" onChange='update_departure();'> 
<option value="0"></option> 
</select>

But since it's no just the year I assume its the onload code.

I tried to add the onload to the header function like this

Code:

<body onLoad='start();' <?php if(function_exists('body_class')) body_class(); ?>>

So now wordpress generates the following code when it loads the page

Code:

<body onLoad='start();' class="home page page-id-6 page-template page-template-default logged-in">

But sadly the date still does no load on Internet Explorer. I'm out of ideas, anyone?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
Code:

<script type='text/javascript'>
<!--
function writeSummary() {
	var desiredquantity = document.orders.value;
	
	if (desiredquantity='')
	{
		alert('Please enter a value for the desired quantity');
		return false;
	}
		else if (desiredquantity='value<0')
		{
			alert('Please enter a value for the desired quantity that is greater than 0');
			return false;
		}
			else (desiredquantity='value>0')
			{
				alert('Thank you for your order!');
				return true;
			}
}
//-->
</script>

</head>
<body>
<form name="Orders"; action=""; onSubmit="return writeSummary();">
<table width="80%" align="center">
<tbody>
<tr>
<td><<img SRC = "nwlogo.jpg" img align="right" style="width:200px; height:174px" height="174" width="200"></td>
<td><big><b>&nbsp;&nbsp;3-Season Tent</big></b></td>
</tr>
</tbody>
</table>
<p>
<table width="80%" border="5" cellspacing="3" cellpadding="5" align="center">
<tbody>
<tr>
<th width="20%">Selection</th>
<th width="20%">Size</th>
<th width="20%">Color</th>
<th width="20%">Price</th>
<th width="20%">In Stock?</th>
</tr>
<tr>
<td align="middle"></td>
<td align="middle">Rectangular</td>
<td align="middle">Blue</td>
<td align="middle">259.99</td>
<td align="middle">Yes</td>
</tr>
</tbody>
</table>
</p>
<p>
<table width="80%" cellspacing="3" cellpadding="5" align="center">
<tbody>
<tr>
<td width="70%"><big>Desired Quantity</big><input type="text" name="userid" size="20"></td>
<td align="right" width="15%"><input type="button" name="subbtn" value="Submit"/></td>
</tr>
</tbody>
</table>
</p>
<p>
<table width="80%" align="center" border="" id="Table1">
<tbody>
<tr>
<td align="right">Subtotal: <input type="text" name="userid" size="20"></td>
<td></td>
</tr>
<tr>
<td align="right">Tax: <input type="text" name="userid" size="20"></td>
<td></td>
</tr>
<tr>
<td align="right">Order Total: <input type="text" name="userid" size="20"></td>
<td></td>
</tr>
</tbody>
</table>
</p>
</form>
</body>
</html>

Need help with the javascript coding portin of the web page. Need it to use the pop up alerts that have been input above and also to calculate the order upon entering a correct amount showing subtotal, tax, and total.

I am working on a form that has 15 rows for order entry. These rows are called:

qty | part | desc | cost | amount

I have the following ASP code that generates the rows:

Code:

	<% For i = 1 To 15 %>
		 <TR align=center><td><input type="text" NAME="qty<%Response.Write i%>" onChange='DoMath()'></td>
		 <TD><INPUT TYPE="text" NAME="part<% Response.Write i %>"></TD>
		 <TD><INPUT TYPE="text" NAME="desc<%Response.Write i %>"></TD>
		 <TD><INPUT TYPE="text" NAME="cost<%Response.Write i%>" onChange="DoMath()"></TD>
		 <TD><INPUT TYPE="text" NAME="amount<%Response.Write i%>" readonly></TD></TR>
	<% Next  %>

This gives me the following fields in the form:
qty1 | part1 | desc1 | cost1 | amount1
qty2 | part2 | desc2 | cost2 | amount2
etc.

My Javascript (DoMath) to calculate the row totals looks like this for now:
Code:

		<script type='text/javascript'>

		function DoMath(){

		var Units = document.PlaceOrder.qty1.value;
		var Rate = document.PlaceOrder.cost1.value;
		var Total = Units * Rate;
		document.PlaceOrder.amount1.value = Total.toFixed(2);
		document.PlaceOrder.grandtotal.value = Total.toFixed(2);
		}

		</script>

This works fine for the first row, but I need it to scale for the rest of the rows, and also allow for future addition/expansion. Unfortunately, I am Javascript-tarded and can't figure it out, despite numerous examples online...

I also need to find a way to recalculate the "grandtotal" box on the form based on whether or not the checkbox called "taxChecked" is checked. If the user checks it, I need it to recalculate the "grandtotal" field with a tax rate, and if they un-check it, it should recalcuate "grandtotal" WITHOUT the tax rate.

Any suggestions or pointers are greatly appreciated!

Can anyone help me with the following Javascript. I am going crazy trying to figure this out because it should be easy. Basically I want to calculate the percentage of a number, but I'm getting a really weird result. In the following code f is equal to 3 and x.length is equal to 8. The part that isn't working is emphasised in bold. Basically 3/8 * 100 should result in 37.5 but the result I am getting with the following code is 7934570.3125. How do you calculate this percentage in Javascript?

Code:

function displaymember()
{
var m = 1;
var f = 1;
for(i=0;i<x.length;i++)
 {
 
	sex=(x[i].getElementsByTagName("sex")[0].childNodes[0].nodeValue);

if (sex=="Male")
  {
  m++;
  }
else
  {
  f++;
  }

percent=f/x.length * 100

document.getElementById("fixed").innerHTML=percent;
   }
}

I'm creating a web form that allows users to select from a list, choose a quantity and have the total for that quantity calculated, but when I run the html, I get Nan in the total price box. The problem starts with the calc price function. I've tried eval(), parseFloat to change the text to a number, but I think I'm putting the code in the wrong place. I would greatly appreciate any input I can get -- thanks in advance!

The first part is the javascript code (I have linked in a separate file) with the html below it.
Code:

window.onload = startForm;

function todayTxt() {
   var Today = new Date();
   return Today.getMonth() + 1 + "-" + Today.getDate() + "-" + Today.getFullYear();
}
function startForm(){
	document.forms[0].date.value = todayTxt();
	document.forms[0].prod.focus();

	document.forms[0].prod.onchange = calcPrice;
	document.forms[0].qty.onchange = calcPrice;
	
	for (var i=0; i<document.forms[0].shipType.length; i++) {
		document.forms[0].shipType[i].onclick = calcShipping;
	}
}
function calcPrice() {
	product=document.forms[0].prod;
	pIndex=product.selectedIndex;
	productPrice=product.options[pIndex].value; //returns the price of the selected product

	 quantity=document.forms[0].qty;
	 qIndex=quantity.selectedIndex;
	 quantityOrdered=quantity.options[qIndex].value; //returns the index of the selected quantity

	document.forms[0].price.value = eval(product.Price*quantityOrdered);  //cost is equal to product price multiplied by quantity ordered
}

function calcShipping() {
	document.forms[0].ship.value = this.value;}

function calcTotal() {
	priceVal=parseFloat(document.forms[0].price.value);
	shipVal=parseFloat(document.forms[0].ship.value);
	document.forms[0].sub.value = priceVal + shipVal;
	
	taxVal = 0.05*(priceVal + shipVal);
	document.forms[0].tax.value = taxVal;
	
	document.forms[0].tot.value = priceVal + shipVal + taxVal;
}
<html>
<body>
   <form id="form1" method="post" action="form2.htm">

   <div id="links">
      <a href="#" class="newgroup">Home Page</a>
      <a href="#">Product Catalog</a>
      <a href="#">Order Form</a>
      <a href="#">Maps Online</a>
      <a href="#">Contact Us</a>
      <a href="#" class="newgroup">Countries</a>
      <a href="#">States</a>
      <a href="#">National Parks</a>
      <a href="#">Hiking Trails</a>
      <a href="#">Cities</a>
      <a href="#">Astronomical</a>
      <a href="#">Natural</a>
      <a href="#" class="newgroup">GoMap 1.0</a>
      <a href="#">Drive Planner 2.0</a>
      <a href="#">Hiker 1.0</a>
      <a href="#">G-Receiver I</a>
      <a href="#">G-Receiver II</a>
      <a href="#">G-Receiver III</a>
      <a href="#" class="newgroup">Downloads</a>
      <a href="#">Tech Support</a>
      <a href="#">FAQs</a>
   </div>

   <div id="main">
    <p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>
      <h1>Order Form</h1>
      <p id="datep">
         <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy" readonly="readonly" />
      </p>

     <fieldset>
        <legend>Select a Product</legend>

        <table>
           <tr>
              <td class="labelcell">Product</td>
              <td class="inputcell">
              <select name="prod" id="prod">
                 <option value="0">Products from GPS-ware</option>
                 <option value="19.95">GoMap 1.0 ($19.95)</option>
                 <option value="29.95">Drive Planner 2.0 ($29.95)</option>
                 <option value="29.95">Hiker 1.0 ($29.95)</option>
                 <option value="149.50">G-Receiver I ($149.50)</option>
                 <option value="199.50">G-Receiver II ($199.50)</option>
                 <option value="249.50">G-Receiver III ($249.50)</option>
              </select>
     
              <select name="qty" id="qty">
                 <option value="0">Quantity</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>
              </select>
              </td>
              <td class="outcell">
                 <input class="num" name="price" id="price" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td class="labelcell">Shipping</td>
              <td>
              <p><input type="radio" name="shipType" id="ship1" value="4.95" />
                 <label for="ship1">Standard (4-6 business days): $4.95</label>
              </p>
              <p><input type="radio" name="shipType" id="ship2" value="8.95" />
                 <label for="ship2">Express (2 days): $8.95</label>
              </p>
              <p><input type="radio" name="shipType" id="ship3" value="12.95" />
                 <label for="ship3">Next Day (1 day): $12.95</label>
              </p>
              </td>

              <td class="outcell">
                 <input class="num" name="ship" id="ship" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">Subtotal</td>
              <td class="outcell">
                 <input class="num" name="sub" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">Tax (5%)</td>
              <td class="outcell">
                 <input class="num" name="tax" id="tax" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">TOTAL</td>
              <td class="outcell">
                 <input class="num" name="tot" id="tot" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>
        </table>

     </fieldset>

     <p id="formbuttons">
        <input type="reset"  name="cancelb" id="cancelb" value="Cancel" />
        <input type="submit" name="nextb" id="nextb" value="Next" />
    </p>

   </div>

   </form>

</body>
</html>

Hi,

I need a help with a project I am working on.
I am not a developer so not so familiar with javascript.
Suppose I have a map with ten junctions and based on that map,
I need to calculate all the possible routes between one junction to another.
How do I represent the map in javascript and how do I code the function to calculate all the possible routes?? :-(
many thanks if someone can help me

Hi everyone,

I am pretty new to JS and I am looking for help writing a function that will dynamically calculate filed values.

I have a PHP-generated form which may have a varying number of fields. I need to:
1. calculate the line total for each row -- unitprice * units = linetotal
2. calculate total of all linetotals.

I have named my fields as follows:

unitprice[1], unitprice[2]... , units[1], units[2], ...

I have the following calculate function:

Code:

function calculateOld() {
	// get both values
	unitprice = document.forms["invoice"].unitprice.value;
	units = document.forms["invoice"].units.value;
	// do some calculation
	lineTotal = formatNumber((unitprice * units), 2);
	// set the value in the right field
	document.forms["invoice"].linetotal.value = lineTotal;
	
	unitprice2 = document.forms["invoice"].unitprice2.value;
	units2 = document.forms["invoice"].units2.value;

	if(unitprice2 != '') {
		// do some calculation
		lineTotal2 = formatNumber((unitprice2 * units2), 2);
		// set the value in the right field
		document.forms["invoice"].linetotal2.value = lineTotal2;
		document.forms["invoice"].totalprice.value = formatNumber((parseFloat(lineTotal) + parseFloat(lineTotal2)),2);
	}
	else {
		document.forms["invoice"].linetotal2.value = '';
		document.forms["invoice"].totalprice.value = formatNumber(lineTotal,2);
	}
}

This does calculate what I need but only if I have up to two rows. I need to make the function dynamically count how many rows there are, and calculate the linetotal for each row. And here's where my limited JS knowledge brings me to a halt.

I have been thinking about what this new and dynamic function should look like, but that's the best I could produce...

Code:

function calculate() {
	
	var unitprice[i]	= document.forms["invoice"].unitprice[i].value;
	var units[i]		= document.forms["invoice"].units[i].value;
	var linetotal[i]	= formatNumber((unitprice[i] * units[i]), 2);
	
	return linetotal;
}

Your help will be appreciated. Please explain how things are done, don't just give me the code. Thanks in advance!

Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other.

Eg :
Cake Type : Round $4.00
Cake Color : Red $3.00
Cake Filling : Raspberry $4.00
So total is $11.00

The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on.

Eg:
Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange)
Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red)

Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far..

Code:

var filling_prices= new Array();
 filling_prices["None"]=0;
 filling_prices["Lemon"]=5;
 filling_prices["Custard"]=5;
 filling_prices["Fudge"]=7;
 filling_prices["Mocha"]=8;
 filling_prices["Raspberry"]=10;

function getFillingPrice()
{
    var cakeFillingPrice=0;
    //Get a reference to the form id="cakeform"
    var theForm = document.forms["cakeform"];
    //Get a reference to the select id="filling"
     var selectedFilling = theForm.elements["filling"];

    //set cakeFilling Price equal to value user chose
    //For example filling_prices["Lemon".value] would be equal to 5
    cakeFillingPrice = filling_prices[selectedFilling.value];

    //finally we return cakeFillingPrice
    return cakeFillingPrice;
}

This is for the calculation
Code:

function calculateTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();

    //display the result
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price For the Cake $"+cakePrice;

}

Some sample of the HTML
Code:

<select id="filling" name='filling' onchange="calculateTotal()">
                <option value="None">Select Filling</option>

                <option value="Lemon">Lemon($5)</option>
                <option value="Custard">Custard($5)</option>
                <option value="Fudge">Fudge($7)</option>
                <option value="Mocha">Mocha($8)</option>
                <option value="Raspberry">Raspberry($10)</option>

Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown.

Thanks in advance.