|
JavaScript - Nan Popping Up In Total On Form
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>
Similar Tutorials<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. Good 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 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>
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? 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 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! I thought I did everything right but pop-up windows aren't working... Code: <td>
<a href="javascript:popUp('http://www.retrocitysunglasses.com/popupfreeshipping.html')"><img src="http://www.retrocitysunglasses.com/website_graphics/header_free_shipping.jpg" alt="Free Shipping"></a>
</td>
Code can be found on this page (very first section after body opens): http://retrocitysunglasses.com/ I want to create an array of 1 - X (X could be 10, 20, 30 or any number) Then I want to randomly choose a number from 1 - X I now want to remove the random choice - and then do the same again twice Question 1: How do I create the array in the first place? Answer: var x=[0,1,2,3,4,5,6,7,8,9,10]; I'd much prefer it if I could do something like this: var x=[0...10]; This would create the same, except, I don't have to type out all the numbers! And if I needed to increase the number in the array, I could simply just change the last number I've just made the syntax up I was hoping something similar shorthand existed Or do I have to do this by creating a loop? Question 2: how do I pop an item from the middle or somewhere other than the beginning or end? I've googled and all I can find is how to remove the first and last items! The way I see it: - Get a solution for popping from the middle of an array I'm sure I'll find a solution to this if I looked - but is it optimal to be doing it this way? - Instead, maybe I could fill my array in a random order in the first place - and then just pop at the beginning or end?? Which is the best solution? Any code to start me off would be great Thanks OM 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 would like to display total online viewers on my website, how can i do this? thanks 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> 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>
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);
}
|
|||||||