JavaScript - Adding Rows On A Form To Output A Total And Grand Total
Similar TutorialsGood day! I am new in javascript function. I have Javascript code for auto calculate here is the code: Code: <script type="text/javascript" language="javascript"> function autocalearn(oText) { if (isNaN(oText.value)) //filter input { alert('Numbers only!'); oText.value = ''; } var field, val, oForm = oText.form, TotEarn = a = 0; for (a; a < arguments.length; ++a) //loop through text elements { field = arguments[a]; val = parseFloat(field.value); //get value if (!isNaN(val)) //number? { TotEarn += val; //accumulate } } var tot=Number(TotEarn) + Number(document.getElementById('Amount').value); oForm.TotEarn.value = tot.toFixed(2); //oForm.TotEarn.value = TotEarn.toFixed(2); //out } </script> <!--Total Deduction AutoCompute--> <script type="text/javascript" language="javascript"> function autocalded(oText) { if (isNaN(oText.value)) //filter input { alert('Numbers only!'); oText.value = ''; } var field, val, oForm = oText.form, TotalDed = a = 0; for (a; a < arguments.length; ++a) //loop through text elements { field = arguments[a]; val = parseFloat(field.value); //get value if (!isNaN(val)) //number? { TotalDed += val; //accumulate } } //oForm.TotalDed.value = TotalDed.toFixed(2); //out var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value); oForm.TotalDed.value = totded.toFixed(2); } </script> and now my problem is...I have a textbox for the overall total, and i want it automatic subtract the total earn and total deduction.. I will attach my codes for further understanding. Thank you in advance Hi All, I need help on how to subtract totalgift if my condition of donateamount is lesser than the totalgift trigger. When the field is selected and the DonateAmount is trigger, I need to subtract the entered amount on the field selected to the TotalGift and put the field selected to zero "0" and TotalGift to original amount which is less than the amount entered on the field selected. I have some code that I created but it doesn't work. My initial javascript to calculate all the total is below assuming that DonateAmount is already selected = 25: Code: /* this function works fine with the set of code*/ function CalculateTotal(donate_amount_other) { var tota = document.getElementById('a').value; var totb = document.getElementById('b').value; var totc = document.getElementById('c').value; var totd = document.getElementById('d').value; var tote = document.getElementById('e').value; var totf = document.getElementById('f').value; var totg = document.getElementById('g').value; var toth = document.getElementById('h').value; var toti = document.getElementById('i').value; var totj = document.getElementById('j').value; var totk = document.getElementById('k').value; var totl = document.getElementById('l').value; var totm = document.getElementById('m').value; var totn = document.getElementById('n').value; var toto = document.getElementById('o').value; var totp = document.getElementById('p').value; var totq = document.getElementById('q').value; var totr = document.getElementById('r').value; var TotC = document.getElementById('TotalC').value; TotC = Number(tota) + Number(totb) + Number(totc) + Number(totd) + Number(tote) + Number(totf) + Number(totg) + Number(toth) + Number(toti) + Number(totj) + Number(totk) + Number(totl) + Number(totm) + Number(totn) + Number(toto) + Number(totp) + Number(totq) + Number(totr); document.getElementById('TotalC').value = TotC.toFixed(2); if (isNaN(TotC)) { // if grandTotal is not a number alert ("You must enter numbers 0-9 only in the boxes"); document.getElementById('TotalC').value = "ERROR"; // or perhaps value = "ERROR!" return false; } /* the condition below triggers only when the toti - totr fields are entered less than 48 but still need to subtract the total if TotalGift is greater than DonateAmount given */ if (toti >0 && toti <48 ) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('i').value = "0"; // or perhaps value = "ERROR!" return false; } if (totj >0 && totj <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('j').value = "0"; // or perhaps value = "ERROR!" return false; } if (totk >0 && totk <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('k').value = "0"; // or perhaps value = "ERROR!" return false; } if (totl >0 && totl <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('l').value = "0"; // or perhaps value = "ERROR!" return false; } if (totm >0 && totm <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('m').value = "0"; // or perhaps value = "ERROR!" return false; } if (totn >0 && totn <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('n').value = "0"; // or perhaps value = "ERROR!" return false; } if (toto >0 && toto <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('o').value = "0"; // or perhaps value = "ERROR!" return false; } if (totp >0 && totp <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('p').value = "0"; // or perhaps value = "ERROR!" return false; } if (totq >0 && totq <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('q').value = "0"; // or perhaps value = "ERROR!" return false; } if (totr >0 && totr <48) { alert ("All donations in this section must be $48 minimum (processing fee may apply) - please revise your entry to avoid any processing errors"); document.getElementById('r').value = "0"; // or perhaps value = "ERROR!" return false; } /* The code below works if I only check the TotalGift is greater than DonateAmount but will cannot do subtraction to the TotalGift and the entered amount. */ if ((DonateText < TotC)) { alert('Your total designated amount of $' + TotC + ' is more than your donation amount of $' + DonateText + '. Please revise your entry to avoid any processing errors.'); //add if here for all fields focus document.getElementById('TotalC').value = TotC; // or perhaps value = "ERROR!" document.getElementById('TotalC').focus(); return false; } } Below is what I am trying to do but it doesn't work. If the first input field is selected and user enter amount greater than the TotalGift, alert will pop-up then and the amount entered by the user automatically added to the TotalGift. So what I wanted to do is to subtract the amount entered to the TotalGift so it will go back to the original amount before the addition occurs. I know it is possible but I just can't get the right code. Can you please help? I need to make this done as soon as possible, please!!!!! Code: if ((DonateText < TotC) && (document.getElementById('a').value)) { alert('Your total designated amount of $' + TotC + ' is more than your donation amount of $' + DonateText + '. Please revise your entry to avoid any processing errors.'); //add if here for all fields focus if (TotC = "0.00") { document.getElementById('a').value=0; document.getElementById('TotalC').value = TotC; // or perhaps value = "ERROR!" } else { TotC = TotC - document.getElementById('a').value; document.getElementById('tota').value = "0"; document.getElementById('TotalC').value = TotC; // or perhaps value = "ERROR!" document.getElementById('TotalC').focus(); return false; } } if ((DonateText < TotC) && (document.getElementById('b').value)) { alert('Your total designated amount of $' + TotC + ' is more than your donation amount of $' + DonateText + '. Please revise your entry to avoid any processing errors.'); if (TotC = "0.00") { document.getElementById('b').value=0; document.getElementById('TotalC').value = TotC; // or perhaps value = "ERROR!" } else { TotC = TotC - document.getElementById('b').value; document.getElementById('totb').value = "0"; document.getElementById('TotalC').value = TotC; // or perhaps value = "ERROR!" document.getElementById('TotalC').focus(); return false; } } /* so on My html code below which I have 18 input fields but all of them only optional wherever the user wants to input number. I will only include some here. Code below works, please ignore any missing code. I just need the calculation code to work. PHP Code: <label>Donation Amount: $</label> <input name="TotalDonate" id="TotalDonate" type="text" maxlength="10" readonly="true" onClick="CalculateTotal(this.value,99);" /> <label for="agencysupport" style="font-weight:bold">C. Agency/Program Support ($48 MINIMUM PER CHOICE)</label> <BR /> <p style="color:#000000">My gift is designated to one or more specific agencies or programs. Processing fee may apply. </p> <p style="color:#FF0000">(Note: Some Agency Names may be indented on the next line due to space allowed. Choosing either one of the Agency Names will give you the same code.)</p> <table> <tr> <td> <select id="designation_list1" name="designation_list1" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list1']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal()"/> <?php helper_error('i');?> </td> </tr> <tr> <td> <select id="designation_list2" name="designation_list2" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list2']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal()"/> <?php helper_error('j');?> </td> </tr> <tr> <td> <select id="designation_list3" name="designation_list3" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list3']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal()"/> <?php helper_error('k');?> </td> </tr> <tr> <td> <select id="designation_list4" name="designation_list4" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list4']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal()"/> <?php helper_error('l');?> </td> </tr> <tr> <td> <select id="designation_list5" name="designation_list5" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list5']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal();"/> <?php helper_error('m');?> </td> </tr> <tr> <td> <select id="designation_list6" name="designation_list6" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list6']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal();"/> <?php helper_error('n');?> </td> </tr> <tr> <td> <select id="designation_list7" name="designation_list7" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list7']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal();"/> <?php helper_error('o');?> </td> </tr> <tr> <td> <select id="designation_list8" name="designation_list8" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list8']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal();"/> <?php helper_error('p');?> </td> </tr> <tr> <td> <select id="designation_list9" name="designation_list9" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list9']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal();"/> <?php helper_error('q');?> </td> </tr> <tr> <td> <select id="designation_list10" name="designation_list10" size="1" style="overflow-x:scroll; width:380px; "> <option>Click to select...</option> <?php foreach ($designation_list as $descode => $prompt) : ?> <option <?php echo helper_selected($descode == $form['designation_list10']); ?> value="<?php echo $prompt; ?>" ><?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:90px;" onChange="CalculateTotal();"/> <?php helper_error('r');?> </td> </tr> <tr> <td style="text-align:right; font-size:14px"><b>TOTAL GIFT(S) DESIGNATED (A-C)</b><BR /> (Must not exceed donation amount)</td> <td>$<input name="TotalC" id="TotalC" type="text" maxlength="10" value="<?php echo $TotalC; ?>" readonly="true" onChange="CalculateTotal(this.value,99);" style="width:90px" /></td> </tr> </table> Please, I really need to make this work today. Hope you can help me please!!!! Thanks in advance. Resolution: Code: <script type="text/javascript"> function amountTotal() { var totalDonations = 0; for (var i = 0; i < amount.length; i++) { totalDonations += amount[i]; } document.write(totalDonations); } </script> I have an array in a seperate.js file that I need to step through a FOR loop to grab all these values and add them together. Here is a small sample of the array's: Code: city = new Array(); state= new Array(); zip = new Array(); amount = new Array(); date = new Array() firstName[0]="Nina"; lastName[0]="Largent"; street[0]="88 Regal Lane"; city[0]="Williamsburg"; state[0]="KY"; zip[0]="40769"; amount[0]=125; date[0]="2011-09-18"; firstName[1]="Mike"; lastName[1]="Hart"; street[1]="Da404 Barrow Street"; city[1]="London"; state[1]="KY"; zip[1]="40744"; amount[1]=75; date[1]="2011-09-18"; Here is the loop step through that I have: Code: <script src="arrays.js" type="text/javascript"></script> <script type ="text/javascript"> function amountTotal() var totalDonations = 0 for (var i=0; i < amount.length; i++) { } </script> I am stuck on how to grab each amount index and add them together to save them as the amountTotal variable. 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"> </td> <td width="290" align="left" valign="top"><b>Description</b></td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Part No.</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"><b>QTY</b></td> <td width="3"> </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"/> <b>1</b></td> <td width="3"> </td> <td width="290" align="left" valign="top"> <input type="text" name="partdesc[]" size="40" value="<?=$info['partdesc'][$x]?>"> </td> <td width="3"> </td> <td width="210" align="left" valign="top"> <input type="text" name="partno[]" size="30" value="<?=$info['partno'][$x]?>"> </td> <td width="3"> </td> <td width="50" align="left" valign="top"> <input type="text" name="qty[]" size="2" value="<?=$info['qty'][$x]?>"> </td> <td width="3"> </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"> </td> <td width="3"> </td> <td width="290" align="left" valign="top"> </td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Sub Total</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"> </td> <td width="3"> </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"> </td> <td width="3"> </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"> </td> <td width="210" align="left" valign="top"><b>Service Charge</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"> </td> <td width="3"> </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"> </td> <td width="3"> </td> <td width="290" align="left" valign="top"> </td> <td width="3"> </td> <td width="210" align="left" valign="top"><b>Grand Total</b></td> <td width="3"> </td> <td width="50" align="left" valign="top"> </td> <td width="3"> </td> <td width="63" align="left" valign="top"> <input type="text" name="gtotal" size="4" value="<?=$info['gtotal']?>"> </td> </tr> </table> </form> </body> </html> <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> 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'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 all, I am trying to have a form calculate total using this script, works OK until the total reaches 99 from there on it only returns 2 figures. Also it won't work if I complete the dollar value (i.e add .00) Anyone tell me where I am going wrong? Code: <script type="text/javascript"> function startCalc(){ interval = setInterval("calc()",1); } function calc(){ q1 = document.apply.appfee.value = 11; q2 = document.apply.memfee.value = 20; q3 = document.apply.levy.value; q4 = document.apply.donation.value; document.apply.total.value = (q1*1) + (q2*1) + (q3*1) + (q4*1) } function stopCalc(){ clearInterval(interval); } </script> This is the form: Code: <form name="apply" action="" method="post" onsubmit="return validate(apply)"> <table style="width:680px;"> <tr> <td style="text-align:right; white-space:nowrap; width:300px;">Application Fee:</td> <td style="text-align:left; white-space:nowrap; width:441px">$<input type="text" readonly value="" name="appfee" style="width:17px; border:0; font:11px verdana; color:#006;margin-bottom:5px;"></td> </tr> <tr> <td style="text-align:right; white-space:nowrap; width:300px;">Annual Memebership Fee:</td> <td style="text-align:left; white-space:nowrap;">$<input type="text" readonly value="" name="memfee" style="width:17px; border:0; font:11px verdana; color:#006;margin-bottom:5px;"></td> </tr> <tr> <td style="text-align:right; white-space:nowrap; width:300px;">* Optional Annual Levy:</td> <td style="text-align:left;"> $<select name="levy" onFocus="startCalc();" onBlur="stopCalc();"> <option selected>0</option> <option value="22">22</option> <option value="44">44</option> <option value="66">66</option> <option value="88">88</option> <option value="110.00">110</option> </select> </td> </tr> <tr> <td style="text-align:right; white-space:nowrap; width:300px;">* Optional Donation:</td> <td>$<input type="text" name="donation" value="" onFocus="startCalc();" onBlur="stopCalc();" style="font:11px verdana; color:#006;margin-bottom:5px; width:80px;"></td> </tr> <tr> <td style="text-align:right; white-space:nowrap; width:300px;"><b>TOTAL:</b></td> <td white-space:nowrap;><b>$<input type="text" name="total" style="width:17px; border:0; font:bold 11px verdana; color:#006;margin-bottom:6px;"></b></td> </tr> </table> </form> I'm building an order form for a food delivery business website and I'm struggling of getting the page to display the total prices of the items on the order page before the order is sent. The form ideally consists of: Product 1 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Product 2 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) ..... Product n - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Total price: (sum of all selected multiplied by the single prices) Name Telephone Address Postal Code Comment SUBMIT BUTTON What I have so far is: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>COMIDA GREGA OLYMPO</title> <style type="text/css"> .Subheader { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: large; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; color: #000000; text-decoration: none; } .Header { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-large; font-weight: bold; font-style: normal; font-variant: normal; text-transform: capitalize; text-decoration: none; } .auto-style1 { text-align: center; } </style> <link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" /> <style type="text/css"> a.fancybox img { border: none; box-shadow: 0 1px 7px rgba(0,0,0,0.6); -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.fancybox:hover img { position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03); } .auto-style2 { border-style: solid; border-width: 2px; } </style> </head> <body class="Subheader" style="background-image: url('bg.png')"> <p><br /> </p> <table align="center" style="width: 940px" bgcolor="white" class="auto-style2"> <tr> <td style="height: 33px"><span class="Header">HEADER IMAGE + LOGO</span></td> </tr> <tr> <td style="height: 33px"> <table style="width: 100%"> <tr> <td class="auto-style1" style="width: 17%"> <a href="#prediastia">ПРЕДЯСТИЯ</a></td> <td class="auto-style1" style="width: 17%"><a href="#osnovni"> ОСНОВНИ</a></td> <td class="auto-style1" style="width: 17%"><a href="#deserti"> ДЕСЕРТИ</a></td> <td class="auto-style1" style="width: 17%"><a href="#napitki"> НАПИТКИ</a></td> <td class="auto-style1" style="width: 17%"><a href="order.html">ПОРЪЧАЙ</a></td> <td class="auto-style1" style="width: 15%">КОНТАКТИ</td> </tr> </table> </td> </tr> <tr> <td> <form name="contactform" method="post" action="send_form_email.php"> <table width="750px" align="center"> <tr> <td valign="top" width="40%"> <label for="first_name">ГРЪЦКА САЛАТА</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="gruckasalata" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="grucka-salata.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top" width="40%"> <label for="first_name">МУСАКА</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="musaka" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="musaka.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top" width="40%"> <label for="first_name">ПЪЛНЕНИ ЧУШКИ</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="pulnenichushki" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="palneni_chushki26.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top" width="40%"> <label for="first_name">СВИНСКО СЪС ЗЕЛЕ</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="svinskosuszele" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="zele-sus-svinsko.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top"> <label for="first_name">Name *</label> </td> <td valign="top"> <input type="text" name="name" maxlength="50" size="30"> </td> </tr> <tr> <td valign="top"> <label for="email">Email Address *</label> </td> <td valign="top"> <input type="text" name="email" maxlength="80" size="30"> </td> </tr> <tr> <td valign="top"> <label for="telephone">Telephone Number *</label> </td> <td valign="top"> <input type="text" name="telephone" maxlength="30" size="30"> </td> </tr> <tr> <td valign="top"> <label for="telephone">Address *</label> </td> <td valign="top"> <textarea name="address" maxlength="1000" cols="45" rows="6"></textarea> </td> </tr> <tr> <td valign="top"> <label for="telephone">Postal Code *</label> </td> <td valign="top"> <input type="text" name="postalcode" maxlength="30" size="30"> </td> </tr> <tr> <td valign="top"> <label for="comments">Comments</label> </td> <td valign="top"> <textarea name="comments" maxlength="1000" cols="45" rows="6"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <input type="submit" value="Submit"> </td> </tr> </table> </form></td> </tr> <tr> <td><span class="Header">FOOTER</span></td> </tr> </table> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script> <script type="text/javascript"> $(function($){ var addToAll = false; var gallery = false; var titlePosition = 'inside'; $(addToAll ? 'img' : 'img.fancybox').each(function(){ var $this = $(this); var title = $this.attr('title'); var src = $this.attr('data-big') || $this.attr('src'); var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title); $this.wrap(a); }); if (gallery) $('a.fancybox').attr('rel', 'fancyboxgallery'); $('a.fancybox').fancybox({ titlePosition: titlePosition }); }); $.noConflict(); </script> </body> </html> and the PHP: PHP Code: <?php if(isset($_POST['email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "georgi.pepelyankov@gmail.com"; $email_subject = "COMIDA GREGA ORDER"; function died($error) { // your error code can go here echo "We are very sorry, but there were error(s) found with the form you submitted. "; echo "These errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "Please go back and fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['telephone']) || !isset($_POST['address']) || !isset($_POST['postalcode']) || !isset($_POST['gruckasalata']) || !isset($_POST['musaka']) || !isset($_POST['pulnenichushki']) || !isset($_POST['svinskosuszele']) || !isset($_POST['comments'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $name = $_POST['name']; // required $gruckasalata = $_POST['gruckasalata']; // not required $musaka = $_POST['musaka']; // not required $pulnenichushki = $_POST['pulnenichushki']; // not required $svinskosuszele = $_POST['svinskosuszele']; // not required $email_from = $_POST['email']; // required $telephone = $_POST['telephone']; // required $address = $_POST['address']; // required $postal_code = $_POST['postalcode']; // required $comments = $_POST['comments']; // not required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "ГРЪЦКА САЛАТА: ".clean_string($gruckasalata)."\n"; $email_message .= "МУСАКА: ".clean_string($musaka)."\n"; $email_message .= "ПЪЛНЕНИ ЧУШКИ: ".clean_string($pulnenichushki)."\n"; $email_message .= "СВИНСКО СЪС ЗЕЛЕ: ".clean_string($svinskosuszele)."\n"; $email_message .= "Name: ".clean_string($name)."\n"; $email_message .= "Email: ".clean_string($email_from)."\n"; $email_message .= "Telephone: ".clean_string($telephone)."\n"; $email_message .= "Address: ".clean_string($address)."\n"; $email_message .= "Postal Code: ".clean_string($postalcode)."\n"; $email_message .= "Comments: ".clean_string($comments)."\n"; // create email headers $headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_from."\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); ?> <!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> Please, can you help me integrate a total of all the selected prices to be displayed somewhere in the form? Thanks in advance! Regards, Georgi I have everything working up to this point but when I try and put the math equation into my script section, I get multiple error and cannot figure out how to get the function to return the actual total rental cost. If you could please look at what I have, your opinions would be greatly appreciated. Thank you. Below is the code with the math function at the end of the script section in the heading which I seem to be receiving error on. Any help is greatly appreciated. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Brooks Rogalski December 6, 2010 --> <title>ABC Outdoor Sports</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type = "text/javascript"> /* <![CDATA[ */ //image slideshow function var interval = 4000; // delay between rotating images var random_display = 1; // 0 = no, 1 = yes var pause = false; var image_index = 0; image_list = new Array(); image_list[image_index++] = new imageItem("fishing.jpg"); image_list[image_index++] = new imageItem("biking.jpg"); image_list[image_index++] = new imageItem("climbing.jpg"); image_list[image_index++] = new imageItem("kayaking.jpg"); image_list[image_index++] = new imageItem("scuba.jpg"); var number_of_image = image_list.length; function imageItem(image_location) { this.image_item = new Image(); this.image_item.src = image_location; } function get_ImageItemLocation(imageObj) { return(imageObj.image_item.src) } function generate(x, y) { var range = y - x + 1; return Math.floor(Math.random() * range) + x; } function getNextImage() { if (pause == true) return; if (random_display) { image_index = generate(0, number_of_image-1); } else { image_index = (image_index+1) % number_of_image; } var new_image = get_ImageItemLocation(image_list[image_index]); return(new_image); } function rotateImage(place) { var new_image = getNextImage(); document[place].src = new_image; var recur_call = "rotateImage('"+place+"')"; setTimeout(recur_call, interval); } //check valid pickup date function checkValidPDate(which) { which = which.replace(/[-:,\.]/g,"/"); which = which.replace(/[^0-9\/]/,""); var dt = which.split("/"); var yr = dt[2]; if (!yr) {yr = 9999} if (yr.length == 2) {yr = parseInt(yr) + 2000} if ((yr < 2010) || ( yr > 2020)) { alert ("Invalid Year or Date Format!"); document.getElementById('dateIn').value = ""; // clear the field setTimeout("document.getElementById('dateIn').focus()", 25); // and refocus on it return false; } var mm = dt[0]-1; var mmx = dt[0]; var dd = dt[1]; var nd = new Date(); nd.setFullYear(yr,mm,dd); // YYYY,MM(0-11),DD var ndmm = nd.getMonth(); if (ndmm != mm) { alert (mmx + "/" + dd + "/" + yr + " is NOT a Valid Date!"); document.getElementById("dateIn").value = ""; // clear the field setTimeout("document.getElementById('dateIn').focus()", 25); // and refocus on it return false; } else { alert (mmx + "/" + dd + "/" + yr + " is a Valid Date!"); // for testing } var reserveDate = new Date(yr,mm,dd); var mydate = new Date(); mydate.setDate(mydate.getDate()+2); // Two CLEAR days ahead - NB mydate is HRS:MNS:SECS so same date is a problem if (reserveDate < mydate) { window.alert("Reservations need to be at least two clear days in advance."); document.getElementById("dateIn").value = ""; // clear the field setTimeout("document.getElementById('dateIn').focus()", 25); // and refocus on it } } //check valid return date function checkValidRDate(which) { which = which.replace(/[-:,\.]/g,"/"); which = which.replace(/[^0-9\/]/,""); var dt = which.split("/"); var yr = dt[2]; if (!yr) {yr = 9999} if (yr.length == 2) {yr = parseInt(yr) + 2000} if ((yr < 2010) || ( yr > 2020)) { alert ("Invalid Year or Date Format!"); document.getElementById('dateOut').value = ""; // clear the field setTimeout("document.getElementById('dateOut').focus()", 25); // and refocus on it return false; } var mm = dt[0]-1; var mmx = dt[0]; var dd = dt[1]; var nd = new Date(); nd.setFullYear(yr,mm,dd); // YYYY,MM(0-11),DD var ndmm = nd.getMonth(); if (ndmm != mm) { alert (mmx + "/" + dd + "/" + yr + " is NOT a Valid Date!"); document.getElementById("dateOut").value = ""; // clear the field setTimeout("document.getElementById('dateOut').focus()", 25); // and refocus on it return false; } else { alert (mmx + "/" + dd + "/" + yr + " is a Valid Date!"); // for testing } if(document.forms[0].returnDate.value <= document.forms[0].pickupDate.value){ window.alert("Please choose later date"); valid=false; return false; } } //validate form functions function validateForm() { var valid = true; //validate equipment if (document.forms[0].equipment.selectedIndex == 0) { window.alert("Please select your equipment type."); document.forms[0].equipment.focus(); return false; } //validate pick-up time hours if (document.forms[0].pickupHours.selectedIndex == 0) { window.alert("Please select the number of hours for pick-up time."); document.forms[0].pickupHours.focus(); return false; } //validate pick-up time minutes if (document.forms[0].pickupMinutes.selectedIndex == 0) { window.alert("Please select the number of minutes for pick-up time."); document.forms[0].pickupMinutes.focus(); return false; } //validate return time hours if (document.forms[0].returnHours.selectedIndex == 0) { window.alert("Please select the number of hours for return time."); document.forms[0].returnHours.focus(); return false; } //validate return time minutes if (document.forms[0].returnMinutes.selectedIndex == 0) { window.alert("Please select the number of minutes for return time."); document.forms[0].returnMinutes.focus(); return false; } //validate first name if (document.forms[0].firstName.value=="") { window.alert("Please enter your first name."); document.forms[0].firstName.focus(); valid = false; return valid; } //validate last name if (document.forms[0].lastName.value=="") { window.alert("Please enter your last name."); document.forms[0].lastName.focus(); valid = false; return valid; } //validate street address if (document.forms[0].street.value=="") { window.alert("Please enter your street address."); document.forms[0].street.focus(); valid = false; return valid; } //validate city if (document.forms[0].city.value=="") { window.alert("Please enter your city."); document.forms[0].city.focus(); valid = false; return valid; } //validate zip code if (document.forms[0].zip.value==""){ window.alert("Please enter your zip code."); document.forms[0].zip.focus(); valid=false; return valid; } var re5digit=/^\d{5}$/ if (document.forms[0].zip.value.search(re5digit)==-1){ window.alert("Please enter a 5 digit number") valid=false; return valid; } //validate date of birth if (document.forms[0].date.value == "'' || '(mm/dd/yyyy)'" ){ window.alert("Please enter your date of birth."); document.forms[0].birthDate.focus(); valid=false; return valid; } var reDateFormat = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/ if(document.forms[0].date.value.search(reDateFormat)==-1){ window.alert("Please enter a standard format. [mm/dd/yyyy]") valid=false; return valid; } //check if over 18 var age; var input = document.forms[0].birthDate.value; var pyear = parseInt(input.substring(6,10)); var pmonth = parseInt(input.substring(0,2)) - 1; var pday = parseInt(input.substring(3,5)); if ( month < pmonth ){ age = year - pyear - 1; } else if ( month > pmonth ){ age = year - pyear; } else if ( month == pmonth ){ if ( day < pday ){ age = year - pyear - 1; } else if ( day > pday ){ age = year - pyear; } else if ( day == pday ){ age = year - pyear; } } if(age < 18){ window.alert('Attention: Under 18!'); valid=false; return valid; } //calculate total cost and diplay in window.confirm() dialog box var equip = document.forms[0].equipment.value var pDate = document.forms[0].pickupDate.value var pHours = document.forms[0].pickupHours.value var pMinutes = document.forms[0].pickupMinutes.value var rDate = document.forms[0].returnDate.value var rHours = document.forms[0].returnHours.value var rMinutes = document.forms[0].returnMinutes.value var pTime = pHours + pMinutes; var rTime = rHours + rMinutes; var total = (((rDate - pDate) - 1) * 24) * equip) + ((rTime + (24 - pTime)) * equip); var OK = window.confirm(" The total rental cost is $" + total + "\n Click OK to accept, Cancel to decline"); if (OK) {return true} else {return false} } /* ]]> */ </script> </head> <body onload = "rotateImage('rImage')"> <h1> ABC Outdoor Sports Equipment </h1> <img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;"> <br/> <br/> <form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain"> <table border = "0"> <tr> <td> Equipment:<br/> <select name = "equipment"> <option value="unselected">Select Equipment Type</option> <option value = 20>Fishing Boat</option> <option value = 15>Kayak</option> <option value = 2>Mountain Bike</option> <option value = 10>Scuba Gear</option> </select> </td> </tr> <tr> <td> Pick-up Date: <br/> <input type = "text" id = "dateIn" name = "pickupDate" onchange = checkValidPDate(this.value)> </td> <td> Pick-up Time: <br/> <select name = "pickupHours"> <option value="unselected">hr</option> <option value = 7>07</option> <option value = 8>08</option> <option value = 9>09</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> </select> <select name = "pickupMinutes"> <option value="unselected">min</option> <option value = 0>00</option> <option value = .5>30</option> </select> </td> </tr> <tr> <td> Return Date: <br/> <input type = "text" id = "dateOut" name = "returnDate" onchange = checkValidRDate(this.value)> </td> <td> Return Time: <br/> <select name = "returnHours"> <option value="unselected">hr</option> <option value = 7>07</option> <option value = 8>08</option> <option value = 9>09</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> </select> <select name = "returnMinutes"> <option value="unselected">min</option> <option value = 0>00</option> <option value = .5>30</option> </select> </td> </tr> <tr> <td> First Name: <br/> <input type = "text" name = "firstName"/> </td> <td> Last Name: <br/> <input type = "text" name = "lastName"/> </td> </tr> <tr> <td> Street: <br/> <input type = "text" name = "street"/> </td> <td> City: <br/> <input type = "text" name = "city"/> </td> <td> Zip:<br/> <input type = "text" name = "zip" maxlength = "5"/> </td> </tr> <tr> <td> Date of Birth: <br/> <input type = "text" name = "date" value = "(mm/dd/yyyy)"/> </td> </tr> <tr> <td colspan = "3" align = "center"> <input type = "submit" name = "submit" value = "Submit Reservation"/> <input type = "button" name = "cookies" value = "Store User Information"/> </td> </tr> </table> </form> </body> </html> I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected. To Reiterate The way I want it to work... 1 clip is $7 2 clips are $12 3 clips are $22 5 clips are....etc. ...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total. 1 clip is $7 2 clips are $14 3 clips are $21 5 clips are....etc. If some kind soul can give their advice or point me in the right direction I would appreciate it. Code: <script type="text/javascript" src="_inc/orderform04.js"></script> <script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> <form id="frmOrder"> <p> <input type="checkbox" id="chk0" /> Black Hair Clips $<span id="txtPrice0">10</span> <select id="sel0"> <option value="val0">0</option> <option value="val1">1</option> <option value="val2">2</option> <option value="val3">3</option> </select> </p> <p> <input type="checkbox" id="chk1" /> Red Hair Clips $<span id="txtPrice1">10</span> <select id="sel1"> <option value="val0">0</option> <option value="val1">1</option> <option value="val2">2</option> <option value="val3">3</option> </select> </p> <p> <input type="text" id="txtTotal" size="8" /> </p> </form> orderform04.js is located he http://www.mredkj.com/javascript/orderform04.js Need help please asap. It might be simple but i couldn't work out the script. help! ---------------- Formfield.anzahl1 = number entered by customer Formfield.Price1 = Ergebnisfeld1 e.g. Anzahl1= 1 Price = 270 *if Anzahl1 = 2 then Price = 270*2 I need to do this for two form option. 2nd field would be as follows Formfield.Anzahl2= number entered by customer Formfield.Price2 = Ergebnisfeld2 Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2 ------------------- How can I convert these above to javascript? For various reasons, I need the value of my drop down box options to contain size information rather than price. However I would like to be able to calculate a price for the items based on what size the user selects as well as the quantity. Below is the code I came up with (which doesn't work obviously) What can I do to get this to work for me? Thanks in advance for any help! Code: <head> <script type="text/javascript"> <!-- function calc(A,B,SUM) { var price = document.getElementById(A).extrainfo; var quantity = document.getElementById(B).value; document.getElementById(SUM).value = price * quantity; } //--> </script> </head> <body> <label>T-Shirt: <select name="T_SHIRT" id="T_SHIRT" onchange="calc('T_SHIRT','Tshirt_QTY','total');"> <option selected="selected">CHOOSE A SIZE </option> <option value="SIZE: SMALL" extrainfo="10.99">Small, 34/36 (S) </option> <option value="SIZE: MEDIUM" extrainfo="11.99">Medium, 38/40 (M) </option> <option value="SIZE LARGE" extrainfo="12.99">Large, 42/44 (L) </option> </select> </label> <label>QTY: <input type="text" id="Tshirt_QTY" name="Tshirt_QTY" onchange="calc('T_SHIRT','Tshirt_QTY','total')" /> </label> <label>Price: <input type="text" readonly="readonly" name="total" id="total"/> </label> </body> Hi, I'm looking for help, please. I am trying to setup a donation form for a friend, where someone can click radio buttons for set donation amounts, or click the "other" radio buttons and enter a different amount. The donation amount is then passed over to a secure credit card entry page, hosted by a 3rd party merchant. I can set up all the pre-defined radio buttons to correctly pass on the donation amount to the credit card page, but I cannot figure out how to work the "other" radio button amount. Any help would be very much appreciated! Thanks! Dear Coders var amount1=12,345,678.10 var amount1=87,246,125.00 I want to sum amount1+amount2 as 99,591,803.10 Please help I currently have a script setup in HTML that will allow me too input a "Customers ID" and their "Gas Usage". Once those are entered, it will do some calculations and display text stating: > "Customers ID: 1 has gas usage of 50 and owes $100 > > Customers ID: 2 has gas usage of 120 and owes $195 > > Customers ID: 3 has gas usage of 85 and owes $142.5 > > Customers ID: 4 has gas usage of 65 and owes $112.5 > > Total amount of customers is: > > Total amount owed all customers:" **What im having trouble** with is making a running total that will calculate the "Total amount of customers" and the "Total amount owed by customers". All I know is that I may need to add another variable in the script. Code: function Summarise() { ID = prompt("Enter a Customer ID number ", -1) while(ID != -1) { var gasUsed = 0 gasUsed = prompt("Enter amount of gas used ", "0") var total = 0 ///Standard Rate is used to assist in the calculation of customers in excess of 60 Gas Used StandardRate = 60 * 1.75 if(gasUsed <= 60) { total= gasUsed * 2 document.write("Customers ID: " + ID) document.write(" has gas usage of " + gasUsed) document.write(" and owes $" + total) document.write("<br/>") } else { total= (gasUsed - 60) * 1.50 + StandardRate document.write("Customers ID: " + ID) document.write(" has gas usage of " + gasUsed) document.write(" and owes $" + total) document.write("<br/>") } ID = prompt("Enter a Customer ID number ", -1) } } I looked around for a solution but could not find one. I am trying to find combinations of numbers that can add up to a total. The numbers available and the total are different each time. For example, I have an array that contains the following numbers: [16,12,8,6,4,2] I want to find the combinations that add up to 140, like this: 8x16,1x12 8x16,1x8,1x4 11x12,1x8 Notice I do not do: 8x16,2x6 8x16,3x4 This is because as a rule, only the first number can be used in multiple of more than one. All other number pairs can only be a 1x. Output string could be formatted like this in a single string containing all combinations: 8x16,1x12|8x16,1x8,1x4|11x12,1x8 Quote: The parameter A should display the sum of the remaining six fields. I did try adding that using the JAVA script that is mentioned in second code. The total should be display immediately after value is set for any of the text boxes. The text box gets the value using drop down menu. This procedure only works if I use the keyboard tab. If I use the mouse to select YES and No, then it will not display the total Code: <html> <head> <script type="text/javascript" src="javascript/addfunctions.js"></script> <script type="text/javascript"> function enable1() { document.audit_billing_IE.Para_A_A1_comment.disabled = false; document.audit_billing_IE.Para_A_A1_score.value = 00; } function enable2() { document.audit_billing_IE.Para_A_A2_comment.disabled = false; document.audit_billing_IE.Para_A_A2_score.value = 00; } function enable3() { document.audit_billing_IE.Para_A_A3_comment.disabled = false; document.audit_billing_IE.Para_A_A3_score.value = 00; } function enable4() { document.audit_billing_IE.Para_A_A4_comment.disabled = false; document.audit_billing_IE.Para_A_A4_score.value = 00; } function enable5() { document.audit_billing_IE.Para_A_A5_comment.disabled = false; document.audit_billing_IE.Para_A_A5_score.value = 00; } function enable6() { document.audit_billing_IE.Para_A_A6_comment.disabled = false; document.audit_billing_IE.Para_A_A6_score.value = 00; } function disable1() { document.audit_billing_IE.Para_A_A1_comment.disabled = true; document.audit_billing_IE.Para_A_A1_score.value = 10; } function disable2() { document.audit_billing_IE.Para_A_A2_comment.disabled = true; document.audit_billing_IE.Para_A_A2_score.value = 10; } function disable3() { document.audit_billing_IE.Para_A_A3_comment.disabled = true; document.audit_billing_IE.Para_A_A3_score.value = 10; } function disable4() { document.audit_billing_IE.Para_A_A4_comment.disabled = true; document.audit_billing_IE.Para_A_A4_score.value = 10; } function disable5() { document.audit_billing_IE.Para_A_A5_comment.disabled = true; document.audit_billing_IE.Para_A_A5_score.value = 10; } function disable6() { document.audit_billing_IE.Para_A_A6_comment.disabled = true; document.audit_billing_IE.Para_A_A6_score.value = 10; } function na1() { document.audit_billing_IE.Para_A_A1_comment.disabled = true; document.audit_billing_IE.Para_A_A1_score.value = 00; } function na2() { document.audit_billing_IE.Para_A_A2_comment.disabled = true; document.audit_billing_IE.Para_A_A2_score.value = 00; } function na3() { document.audit_billing_IE.Para_A_A3_comment.disabled = true; document.audit_billing_IE.Para_A_A3_score.value = 00; } function na4() { document.audit_billing_IE.Para_A_A4_comment.disabled = true; document.audit_billing_IE.Para_A_A4_score.value = 00; } function na5() { document.audit_billing_IE.Para_A_A5_comment.disabled = true; document.audit_billing_IE.Para_A_A5_score.value = 00; } function na6() { document.audit_billing_IE.Para_A_A6_comment.disabled = true; document.audit_billing_IE.Para_A_A6_score.value = 00; } function changed1(el) { var sel = el.options[el.selectedIndex]; if (sel.value == "Yes")disable1(); if (sel.value == "No")enable1(); if (sel.value == "Na")na1(); } function changed2(el) { var sel = el.options[el.selectedIndex]; if (sel.value == "Yes")disable2(); if (sel.value == "No")enable2(); if (sel.value == "Na")na2(); } function changed3(el) { var sel = el.options[el.selectedIndex]; if (sel.value == "Yes")disable3(); if (sel.value == "No")enable3(); if (sel.value == "Na")na3(); } function changed4(el) { var sel = el.options[el.selectedIndex]; if (sel.value == "Yes")disable4(); if (sel.value == "No")enable4(); if (sel.value == "Na")na4(); } function changed5(el) { var sel = el.options[el.selectedIndex]; if (sel.value == "Yes")disable5(); if (sel.value == "No")enable5(); if (sel.value == "Na")na5(); } function changed6(el) { var sel = el.options[el.selectedIndex]; if (sel.value == "Yes")disable6(); if (sel.value == "No")enable6(); if (sel.value == "Na")na6(); } </script> </head> <body> <form name="audit_billing_IE" method="POST" action="billing.php"> <table> <tr> <td> Parameter A </td> <td colspan='3'> <input type="text" name="product_name4" id="product_name4" /> </td> </tr> <tr> <td> Procedure </td> <td> <select name="Para_A_A1" id = "Para_A_A1" align="center" onchange="changed1(this)"> <option value="s1"> Select</option> <option value="Yes"> Yes </option> <option value="No"> No </option> <option value="Na"> Na </option> </select> </td> <td> <input type="text" name="Para_A_A1_comment" value="" disabled/> </td> <td align="center"> <input type="text" name="Para_A_A1_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/> </td> </tr> <tr> <td> Days Calculation </td> <td> <select name="Para_A_A2" id = "Para_A_A2" align="center" onchange="changed2(this)"> <option value="s2"> Select</option> <option value="Yes"> Yes </option> <option value="No"> No </option> <option value="Na"> Na </option> </select> </td> <td > <input type="text" name="Para_A_A2_comment" value="" disabled/> </td> <td> <input type="text" name="Para_A_A2_score" id="Para_A_A2_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/> </td> </tr> <tr> <td> request form </td> <td> <select name="Para_A_A3" align="center" onchange="changed3(this)"> <option value="s3"> Select</option> <option value="Yes"> Yes </option> <option value="No"> No </option> <option value="Na"> Na </option> </select> </td> <td > <input type="text" name="Para_A_A3_comment" value="" disabled/> </td> <td> <input type="text" name="Para_A_A3_score" id="Para_A_A3_score" value="" onFocus="startCalc();" onBlur="stopCalc();" /> </td> </tr> <tr> <td> Case </td> <td> <select name="Para_A_A4" align="center" onchange="changed4(this)"> <option value="s4"> Select</option> <option value="Yes"> Yes </option> <option value="No"> No </option> <option value="Na"> Na </option> </select> </td> <td > <input type="text" name="Para_A_A4_comment" value="" disabled/> </td> <td> <input type="text" name="Para_A_A4_score" id="Para_A_A4_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/> </td> </tr> <tr> <td> interaction </td> <td> <select name="Para_A_A5" align="center" onchange="changed5(this)"> <option value="s5"> Select</option> <option value="Yes"> Yes </option> <option value="No"> No </option> <option value="Na"> Na </option> </select> </td> <td > <input type="text" name="Para_A_A5_comment" value="" disabled/> </td> <td> <input type="text" name="Para_A_A5_score" id="Para_A_A5_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/> </td> </tr> <tr> <td> MIS</td> <td> <select name="Para_A_A6" align="center" onchange="changed6(this)"> <option value="s6"> Select</option> <option value="Yes"> Yes </option> <option value="No"> No </option> <option value="Na"> Na </option> </select> </td> <td > <input type="text" name="Para_A_A6_comment" value="" disabled/> </td> <td> <input type="text" name="Para_A_A6_score" id="Para_A_A6_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/> </td> </tr> </table> </form> </body> </html> Code: function startCalc(){ interval = setInterval("calc()",1); } function calc(){ one = document.audit_billing_IE.Para_A_A1_score.value; two = document.audit_billing_IE.Para_A_A2_score.value; three = document.audit_billing_IE.Para_A_A3_score.value; four = document.audit_billing_IE.Para_A_A4_score.value; five = document.audit_billing_IE.Para_A_A5_score.value; six = document.audit_billing_IE.Para_A_A6_score.value; document.audit_billing_IE.product_name4.value = [(one * 1) + (two * 1) + (three * 1) + (four * 1) + (five * 1) + (six * 1)]; } function stopCalc(){ clearInterval(interval); } I am having a bit of trouble adding the drop down options to the running total. I managed to get the check boxes and radio buttons to work fine, but can't figure out how to get the drop downs working. Basically when small is selected it adds $10 to the running total, medium $15 and large $20. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Pizza</title> <script type="text/javascript"> function CalculateTotal(inputItem) { var frm=inputItem.form; if (!frm.fields) frm.fields=''; if (!frm.fields.match(inputItem.name)) frm.fields+=inputItem.name+',' // add the inputItem name to frm.fields var fieldary=frm.fields.split(','); // convert frm.fields to an array var cal=0; for (var zxc0=0;zxc0<fieldary.length-1;zxc0++){ // loop through the field names var input=document.getElementsByName(fieldary[zxc0]); // an array of fields with the mame for (var zxc0a=0;zxc0a<input.length;zxc0a++){ // loop through the input array to detect checked fields if (input[zxc0a].checked) cal+=input[zxc0a].value*1; // convert the value to a number and add to cal } } frm.calculatedTotal.value=cal; frm.total.value=formatCurrency(cal); } // format a value as currency. function formatCurrency(num) { num = num.toString().replace(/\$|\,/g,''); if(isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num*100+0.50000000001); cents = num%100; num = Math.floor(num/100).toString(); if(cents<10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++) num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3)); return (((sign)?'':'-') + '$' + num + '.' + cents); } // This function initialzes all the form elements to default values function InitForm() { //Reset values on form var frm=document.selectionForm; frm.total.value='$0.00'; // set initial total frm.calculatedTotal.value=0; frm.previouslySelectedRadioButton.value=0; //Set all checkboxes and radio buttons on form to unchecked: for (i=0; i < frm.elements.length; i++) { if (frm.elements[i].type == 'checkbox' || frm.elements[i].type == 'radio') { frm.elements[i].checked =(frm.elements[i].value!='0.00')? false:true; } } } </script> </head> <body onLoad="InitForm();" onreset="InitForm();"> <table width="770" height="171" border="1" cellpadding="3"> <tr> <td colspan="2"><p>PIZZA ORDERS SCREEN Welcome: [username] Time: [current time] </p> <p>Select the requirements of the CLIENT's pizza below</p></td> </tr> <tr> <td width="462"><form method="POST" name="selectionForm"> <fieldset> <legend>NEW PIZZA SELECTION</legend> (pricing estimate) <p>Select the size pizza (base price of all types): <select name="SIZE" > <option name="small" value=10.0 selected>small ($10)</option> <option name="medium" value=15.00 onchange="CalculateTotal(this);">medium ($15)</option> <option name="large" value=20.00 >large ($20)</option> </select> </p> Select pizza type: <table width="292"> <tr> <td><label> <input type="radio" name="type" value="radio" id="RadioGroup1_0" /> Supreme <input type="radio" name="type" value="radio" id="RadioGroup1_1" /> Meat Lovers <input type="radio" name="type" value="radio" id="RadioGroup1_2" /> Aussie</label></td> </tr> </table> <p>Select additional topping (each topping is $2.50): </p> <table width="200" border="0" cellspacing="5" cellpadding="1"> <tr> <td width="70">Ham: </td> <td width="111"> <input type="checkbox" name="ham" value=2.50 onclick="CalculateTotal(this);"></td> </tr> <tr> <td width="70">Cheese: </td> <td width="111"> <input type="checkbox" name="cheese" value=2.50 onclick="CalculateTotal(this);"></td> </tr> <tr> <td width="70">Olives: </td> <td width="111"> <input type="checkbox" name="olives" value=2.50 onclick="CalculateTotal(this);"></td> </tr> <tr> <td width="70">Peppers: </td> <td width="111"> <input type="checkbox" name="peppers" value=2.50 onclick="CalculateTotal(this);"></td> </tr> <tr> <td width="70">Anchovies: </td> <td width="111"> <input type="checkbox" name="anchovies" value=2.50 onclick="CalculateTotal(this);"></td> </tr> <tr> <td width="70">Salami: </td> <td width="111"> <input type="checkbox" name="salami" value=2.50 onclick="CalculateTotal(this);"></td> </tr> </table> <p> </p> <p>Select the type of packaging: </p> <table width="200"> <tr> <td> <input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00 </td> </tr> <tr> <td> <input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00 </td> </tr> <tr> <td> <input type="radio" name="Sauce" value=1.00 onClick="CalculateTotal(this);"> Plastic $1.00 </td> </tr> </table> <p> <input type="hidden" name="calculatedTotal" value=0> <input type="hidden" name="previouslySelectedRadioButton" value=0> <font size=+1> Your total is: </font><font face=Arial size=2><font size=+1> <input type="text" name="total" readonly onFocus="this.blur();"> <br /> </p> <p> <input type="button" name="resetBtn" id="resetBtn" value="Reset" /> <input type="button" name="confirmBtn" id="confirmBtn" value="ADD TO ORDER" /> </p> </fieldset> </form></td> <td width="284" align="left" valign="top"> <form id="summaryForm" name="summaryForm" method="post" action=""> <fieldset><legend>CLIENT ORDER SUMMARY</legend> <p> <textarea name="summaryBox" cols="40" rows="20"></textarea> </p> <p>Number of Pizza's: <label for="noPizza"></label> <input name="noPizza" type="text" id="noPizza" size="5" /> </p> <p>Total for Pizza's: <input name="totPizza" type="text" id="totPizza" size="8" /> </p> <p>Email a confirmation: <input type="submit" name="email" id="email" value="KITCHEN CONFIRMATION" /> <br /> </p></fieldset> </form> <p> </p></td> </tr> <tr> <td colspan="2" align="right"><form id="form1" name="form1" method="post" action=""> <input type="button" name="reset all" id="reset all" value="RESET for New client" /> <input type="hidden" name="calculatedTotal" value=0> <input type="hidden" name="previouslySelectedRadioButton" value=0> </font> </p> </form></td> </tr> <tr> </table> </body> </html> |