JavaScript - Total Of Form
<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. 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 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) } } Hi, I am new here and am hoping for some guidance or a solution. Any help is greatly appreciated. I have a total count in a shopping cart stored from PHP as a cookie. I.E. compare[233], compare[324] (where the id is the item ID). I want to update the count of items in the cart in real time, so when the visitor clicks "Add", the count will update without reloading the page. Currently, I can get PHP to count the cookies, but not JS. The problem that I am having is that if the items are 7, and an item is added it will go to 8 correctly, if another item is added it goes to 14, not 9. This is the code that I have so far: Code: <?php $saved_ct = $number_of_items_already_in_cart; // # of cookies found or 'compare' I.E. 7 ?> <script type="text/javascript"> function increase(){ var i=<?php echo "$saved_ct"; ?>; i++; document.getElementById('i').innerHTML= + i; } </script> Cart: (<b id=\"saved_ct\">{$saved_ct}</b>) --- Item: <a href=\"#\" id=\"{$id}\" onclick=\"increase();return false\">Add to basket</a> Hello guys, I'm having some problems with jquery.. What I'm trying to do is, a jquery script to show in real time the total price. I got this: Code: <li>Users</li> <li> <select name="users" id="users"> <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> </li> <li>Months</li> <li> <select name="months" id="months"> <option value='1'>1 Month</option> <option value='2'>2 Months</option> <option value='3'>3 Months</option> <option value='4'>4 Months</option> <option value='5'>5 Months</option> <option value='6'>6 Months</option> <option value='7'>7 Months</option> <option value='8'>8 Months </option> <option value='9'>9 Months</option> <option value='10'>10 Months</option> <option value="11">11 Months</option> <option value="12">12 Months</option> </select> </li> <div class="grand_total"> <h4 class="colr">Price</h4> <ul> <li class="price">$0.50</li> </ul> </div> 1 Month and 1 User price should be 0.50 USD +1 Month = + 0.50 USD + 1 User = + 0.50 USD Example: 5 Users + 2 Months = 3.50 USD I wanna make the jquery to show the total price at li class="price" Sorry, I'm newbie at jquery. Anyone could help me please? Thank you. Hi, I admit from the start, I'm not very good with JS, I've used it a few times over the years, but mostly readymade scripts that I can just link to a website and use. Anyway, I need something somewhat specific and I don't know where to find such a code or even if I can modify the one I have found to do what I need. What I need is to be able to update totals on the page as things are changed, but I'm not talking about one total. What I have is a list of spare parts with a quantity box next to them, when someone changes the quatity the price for that part needs to update as well as the total price AND a sum that is an allocated amount minus the total (so they can see how much of their allocation they have left). So far, all I've managed to find is a script that will update just the final total (http://www.mcfedries.com/JavaScript/OrderTotals.asp), but as you can see, that's not that helpful. I've sat and stared at the code and while I can say what things do what, I wouldn't know where to start in changing it. Hope someone can help! Thanks Form cap: http://img38.imageshack.us/img38/8118/partlist.png 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 I'm new to javascript here my script that only in one row the Gross, Cost and Net but is another row with a different amounts it show the script is not working any more can you please help to allow to onClick buttom in my form update the amount will change wherether in row #1 or row # or any row in form. thanks <script language="JavaScript"> function UpdateQty() { var TotalGross = parseFloat(document.frmUpdateQty.TotalGross.value.substring(1,10000)); var TotalCost = parseFloat(document.frmUpdateQty.TotalCost.value.substring(1,10000)); var TotalNet = parseFloat(document.frmUpdateQty.TotalNet.value.substring(1,10000)); var QTotal = parseInt(document.frmUpdateQty.QTotal.value); document.frmUpdateQty.TotalGross.value = "$"+(QTotal * TotalGross).toFixed(2); document.frmUpdateQty.TotalCost.value = "$"+(TotalCost * QTotal).toFixed(2); document.frmUpdateQty.TotalNet.value = "$"+(QTotal * TotalGross - TotalCost * QTotal).toFixed(2); document.frmUpdateQty.Button.disabled = true; } </script> Hi, I need my javascript to calculate a total with 2x decimal figures, not rounded up. Can you help? Here is my code: Code: <script type="text/javascript"> function calculateText() { var op1=document.getElementById('Age02'); var op2=document.getElementById('Girl35'); var op3=document.getElementById('Boy35'); var op4=document.getElementById('Girl610'); var op5=document.getElementById('Boy610'); var op6=document.getElementById('Age11'); var op7=document.getElementById('Guest'); var op8=document.getElementById('VIP'); var op9=document.getElementById('School'); var op10=document.getElementById('3DFilm'); var op11=document.getElementById('BFast'); var op12=document.getElementById('PNGift'); var op13=document.getElementById('PStand'); var op14=document.getElementById('PLrg'); var op15=document.getElementById('PReP'); var op16=document.getElementById('KyMg'); var op17=document.getElementById('SnwGlb'); var op18=document.getElementById('PBbl'); var op19=document.getElementById('USB'); var op20=document.getElementById('SantaL'); var op21=document.getElementById('SantaK'); var op22=document.getElementById('FreeP'); var op23=document.getElementById('PUpgrd'); var op24=document.getElementById('StaffP'); var op25=document.getElementById('CompEntry'); var op26=document.getElementById('241'); var op27=document.getElementById('50Percent'); var op28=document.getElementById('Voucher'); var result=document.getElementById('Total'); if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0; if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0; if(op3.value=="" || op3.value!=parseFloat(op3.value)) op3.value=0; if(op4.value=="" || op4.value!=parseFloat(op4.value)) op4.value=0; if(op5.value=="" || op5.value!=parseFloat(op5.value)) op5.value=0; if(op6.value=="" || op6.value!=parseFloat(op6.value)) op6.value=0; if(op7.value=="" || op7.value!=parseFloat(op7.value)) op7.value=0; if(op8.value=="" || op8.value!=parseFloat(op8.value)) op8.value=0; if(op9.value=="" || op9.value!=parseFloat(op9.value)) op9.value=0; if(op10.value=="" || op10.value!=parseFloat(op10.value)) op10.value=0; if(op11.value=="" || op11.value!=parseFloat(op11.value)) op11.value=0; if(op12.value=="" || op12.value!=parseFloat(op12.value)) op12.value=0; if(op13.value=="" || op13.value!=parseFloat(op13.value)) op13.value=0; if(op14.value=="" || op14.value!=parseFloat(op14.value)) op14.value=0; if(op15.value=="" || op15.value!=parseFloat(op15.value)) op15.value=0; if(op16.value=="" || op16.value!=parseFloat(op16.value)) op16.value=0; if(op17.value=="" || op17.value!=parseFloat(op17.value)) op17.value=0; if(op18.value=="" || op18.value!=parseFloat(op18.value)) op18.value=0; if(op19.value=="" || op19.value!=parseFloat(op19.value)) op19.value=0; if(op20.value=="" || op20.value!=parseFloat(op20.value)) op20.value=0; if(op21.value=="" || op21.value!=parseFloat(op21.value)) op21.value=0; if(op22.value=="" || op22.value!=parseFloat(op22.value)) op22.value=0; if(op23.value=="" || op23.value!=parseFloat(op23.value)) op23.value=0; if(op24.value=="" || op24.value!=parseFloat(op24.value)) op24.value=0; if(op25.value=="" || op25.value!=parseFloat(op25.value)) op25.value=0; if(op26.value=="" || op26.value!=parseFloat(op26.value)) op26.value=0; if(op27.value=="" || op27.value!=parseFloat(op27.value)) op27.value=0; if(op28.value=="" || op28.value!=parseFloat(op28.value)) op28.value=0; result.value=0; result.value=parseInt(result.value); result.value=parseInt(result.value)+parseInt(op1.value*5)+parseInt(op2.value*5)+parseInt(op3.value*5)+parseInt(op4.value*5)+parseInt(op5.value*5)+parseInt(op6.value*5)+parseInt(op7.value*0)+parseInt(op8.value*8.50)+parseInt(op9.value*3.75)+parseInt(op10.value*0)+parseInt(op11.value*10)+parseInt(op12.value*5)+parseInt(op13.value*3)+parseInt(op14.value*4)+parseInt(op15.value*2)+parseInt(op16.value*4)+parseInt(op17.value*5)+parseInt(op18.value*3)+parseInt(op19.value*5)+parseInt(op20.value*4)+parseInt(op21.value*3)+parseInt(op22.value*0)+parseInt(op23.value*1)+parseInt(op24.value*0)+parseInt(op25.value*0)+parseInt(op26.value*4)+parseInt(op27.value*2)-parseInt(op28.value); } </script> Hi, I would like to display total online viewers on my website, how can i do this? thanks |