|
JavaScript - Calculating Fees In Percentage In A Form
Similar TutorialsI am trying to create a function or have this work some how where it displays the first number when you make your choice in the first drop down box, which is working so far. In the second drop down box, if any of the answers are chosen except for none, it will take off 10% of the first number. Then add or subtract from there. I just have a problem with creating a function to take off that 10%. Here is the javascript: Code: /*
This source is shared under the terms of LGPL 3
www.gnu.org/licenses/lgpl.html
You are free to use the code in Commercial or non-commercial projects
*/
//Set up an associative array
//The keys represent the size of the cake
//The values represent the cost of the cake i.e A 10" cake cost's $35
var practice_field = new Array();
practice_field["None"]=0;
practice_field["Allergy and Immunology"]=4400;
practice_field["Endocrinology"]=4400;
practice_field["Pathology"]=4400;
practice_field["Dermatology"]=4400;
practice_field["Geriatrics"]=4400;
practice_field["Physical Rehabilitation"]=4400;
practice_field["Family Practice"]=6900;
practice_field["General Practice"]=6900;
practice_field["Internal Medicine"]=6900;
practice_field["Oncology"]=6900;
practice_field["Oral Surgery"]=6900;
practice_field["Radiology"]=6900;
practice_field["Gastroenterology"]=6900;
practice_field["Infectious Disease"]=6900;
practice_field["Nephrology"]=6900;
practice_field["Ophthalmology"]=6900;
practice_field["Pediatrics"]=6900;
practice_field["Urology"]=6900;
practice_field["Anesthesiology"]=9000;
practice_field["Cosmetic Surgery"]=9000;
practice_field["General Surgery"]=9000;
practice_field["Neurology"]=9000;
practice_field["Otolaryngology"]=9000;
practice_field["Plastic Surgery"]=9000;
practice_field["Vascular Surgery"]=9000;
practice_field["Cardiology"]=9000;
practice_field["Emergency Medicine"]=9000;
practice_field["Gynecology"]=9000;
practice_field["Orthopedic Surgery"]=9000;
practice_field["Pain Management"]=9000;
practice_field["Pulmonary Surgery"]=9000;
practice_field["Neurological Surgery"]=9900;
practice_field["Obstetrics"]=9900;
//Set up an associative array
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var society_member= new Array();
society_member["None"]=1;
society_member["BCMA"]=0.10;
society_member["DCMA"]=0.10;
society_member["FOGS"]=0.10;
society_member["FNS"]=0.10;
society_member["PBCMS"]=0.10;
society_member["FSPS"]=0.10;
//This function finds the filling price based on the
//drop down selection
function getPracticeField()
{
var docPracticeField=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedPracticeField = theForm.elements["practice"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
docPracticeField = practice_field[selectedPracticeField.value];
//finally we return cakeFillingPrice
return docPracticeField;
}
//This function finds the filling price based on the
//drop down selection
function getSelectedSociety()
{
var docSelectedSociety=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedSociety = theForm.elements["society"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
docSelectedSociety = society_member[selectedSociety.value];
//finally we return cakeFillingPrice
return docSelectedSociety;
}
//candlesPrice() finds the candles price based on a check box selection
function candlesPrice()
{
var candlePrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includecandles"
var includeCandles = theForm.elements["includecandles"];
//If they checked the box set candlePrice to 5
if(includeCandles.checked==true)
{
candlePrice=5;
}
//finally we return the candlePrice
return candlePrice;
}
function insciptionPrice()
{
//This local variable will be used to decide whether or not to charge for the inscription
//If the user checked the box this value will be 20
//otherwise it will remain at 0
var inscriptionPrice=0;
//Get a refernce to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the checkbox id="includeinscription"
var includeInscription = theForm.elements["includeinscription"];
//If they checked the box set inscriptionPrice to 20
if(includeInscription.checked==true){
inscriptionPrice=20;
}
//finally we return the inscriptionPrice
return inscriptionPrice;
}
function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getPracticeField() * getSelectedSociety() + candlesPrice() + insciptionPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
Can someone please assist. I am trying to create a order form that auto calculates my totals as I enter the quantities. It comes up with Not a Number(NaN). Below are snippets from my code this is obviously in a <form>: HTML: Code: <!-- Row 3, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr> <!-- Row 10, Col 2 Order Value Box--> <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" onfocus="this.form.elements[0].focus()" /> </td></tr> javaScript: Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formName = formField.name;
// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1));
// Get the Quantity
itemQuantity = parseInt(formField.value);
// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}
// Display the total
orders.total.value = orderValue;
}
Please help its probably something simple. Hey there, first time poster. I am trying to create an order with the ability to dynamically self total the sum of the selected items but also be able to add a 25% labor fee having it be at least $90. So if someone buys $300 worth of items the labor charge would be $75 but it would be automatically bumped to $90. heres the existing code: PHP Code: * Calculates the payment total with quantites * @param {Object} prices */ countTotal: function(prices){ var total = 0; $H(prices).each(function(pair){ total = parseFloat(total); var price = parseFloat(pair.value.price); if ($(pair.key).checked) { if ($(pair.value.quantityField)) { price = price * parseInt($(pair.value.quantityField).getSelected().text, 10); } total += price; } }); if (total === 0) { total = "0.00"; } if ($("payment_total")) { $("payment_total").update(parseFloat(total).toFixed(2)); } }, /** * Sets the events for dynamic total calculation * @param {Object} prices */ totalCounter: function(prices){ $H(prices).each(function(pair){ $(pair.key).observe('click', function(){ JotForm.countTotal(prices); }); if ($(pair.value.quantityField)) { $(pair.value.quantityField).observe('change', function(){ $(pair.key).checked = true; JotForm.countTotal(prices); }); } }); }, 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 am using the same java script to help add shipping costs for paypal in my html. I have worked very long and hard to get to this point. Since everything is very similar and having conflicts I have saved and named each java script for it's form. However, when there are more then one on the html page it always calculates the last form giving me the wrong price per quantity on the first. I have not found a way to differentiate or id and separate. <script src="nineEnvelope.js" type="text/javascript"> </script> <form rel="nofollow" target="paypal" style="position:absolute; left:500px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value=""> <table> <tr><td> <input type="hidden" name="on0" value="#9 Envelope">#9 Envelope <input type="hidden" name="amount" value=""> <input type="hidden" name="shipping" value=""> <input type="hidden" name="shipping2" value=""> <input type="hidden" name="item_number" value=""> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="add" value="1"> </td></tr><tr><td> <select name="os0"> <option value="250 qty">250 qty $95.00</option> <option value="500 qty">500 qty $125.00</option> <option value="1,000 qty">1,000 qty $200.00</option> <option value="2,500 qty">2,500 qty $450.00</option> <option value="5,000 qty">5,000 qty $638.00</option> </select> </td></tr> <!-- <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="option_select0" value="250 qty" /> <input type="hidden" name="option_amount0" value="95.00" /> <input type="hidden" name="option_select1" value="500 qty" /> <input type="hidden" name="option_amount1" value="125.00" /> <input type="hidden" name="option_select2" value="1,000 qty" /> <input type="hidden" name="option_amount2" value="200.00" /> <input type="hidden" name="option_select3" value="2,500 qty" /> <input type="hidden" name="option_amount3" value="450.00" /> <input type="hidden" name="option_select4" value="5,000 qty" /> <input type="hidden" name="option_amount4" value="638.00" /> <input type="hidden" name="option_index" value="0" /> --> <tr> <td> <input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1"> <option value="no window">no window </option> <option value="window (right)">window (right) </option> <option value="window (left)">window (left) </option> <option value="double window (left)">double window (left) </option> </select> </td></tr> </table> <input onclick=CalculateOrder(this.form) type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </body> </html> <html> <head> <div> <script type="text/javascript" src="nine_envelope_sec_src.js"> </script> <form rel="nofollow" target="paypal" style="position:absolute; left:700px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value=""> <table> <tr><td> <input type="hidden" name="on0" value="#9 Envelope w/ Security Tint">#9 Envelope w/ Security Tint <input type="hidden" name="amount" value=""> <input type="hidden" name="shipping" value=""> <input type="hidden" name="shipping2" value=""> <input type="hidden" name="item_number" value=""> <input type="hidden" name="no_shipping" value="2"> <input type="hidden" name="currency_code" value="USD"> <input type="hidden" name="add" value="1"> </td></tr><tr><td> <select name="os0"> <option value="250 qty">250 qty $110.00</option> <option value="500 qty">500 qty $140.00</option> <option value="1,000 qty">1,000 qty $215.00</option> <option value="2,500 qty">2,500 qty $475.00</option> <option value="5,000 qty">5,000 qty $678.00</option> </select> </td></tr> <!-- <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="option_select0" value="250 qty" /> <input type="hidden" name="option_amount0" value="110.00" /> <input type="hidden" name="option_select1" value="500 qty" /> <input type="hidden" name="option_amount1" value="140.00" /> <input type="hidden" name="option_select2" value="1,000 qty" /> <input type="hidden" name="option_amount2" value="215.00" /> <input type="hidden" name="option_select3" value="2,500 qty" /> <input type="hidden" name="option_amount3" value="475.00" /> <input type="hidden" name="option_select4" value="5,000 qty" /> <input type="hidden" name="option_amount4" value="678.00" /> <input type="hidden" name="option_index" value="0" /> --> <tr> <td><input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1"> <option value="no window">no window </option> <option value="window (right)">window (right) </option> <option value="window (left)">window (left) </option> <option value="double window (left)">double window (left) </option> </select> </td></tr> <!-- <input type="hidden" name="currency_code" value="USD" /> <input type="hidden" name="option_select0" value="no window" /> <input type="hidden" name="option_amount0" value="0" /> <input type="hidden" name="option_select1" value="window (right)" /> <input type="hidden" name="option_amount1" value="0" /> <input type="hidden" name="option_select2" value="window (left)" /> <input type="hidden" name="option_amount2" value="0" /> <input type="hidden" name="option_select3" value="double window (left)" /> <input type="hidden" name="option_amount3" value="0" /> --> </table> <input onclick=CalculateOrder(this.form) type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" <img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> </head> </html> nineEnvelope.js function CalculateOrder(form) { if (form.os0.value == "250 qty") { form.amount.value = 95.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "500 qty") { form.amount.value = 125.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "1,000 qty") { form.amount.value = 200.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "2,500 qty") { form.amount.value = 450.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; } if (form.os0.value == "5,000 qty") { form.amount.value = 638.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00";} } nine_envelope_sec_src.js function CalculateOrder(form) { if (form.os0.value == "250 qty") { form.amount.value = 110.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "500 qty") { form.amount.value = 140.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "1,000 qty") { form.amount.value = 215.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; } if (form.os0.value == "2,500 qty") { form.amount.value = 475.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; } if (form.os0.value == "5,000 qty") { form.amount.value = 678.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00"; } } 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>
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 everyone Dont know if it can be done but.... I am using the percentage calculator Code: <SCRIPT language=JavaScript>
<!--
//Script by Tom Richardson Jr.
//If you have any questions, e-mail me at gooftroop@geocities.com
//or visit mt web site at http://home.rmci.net/gooftroop
//For this script and more, visit http://javascriptkit.com
function perc1() {
a = document.form1.a.value/100;
b = a*document.form1.b.value;
document.form1.total1.value = b
}
function perc2() {
a = document.form1.c.value;
b = document.form1.d.value;
c = a/b;
d = c*100;
document.form1.total2.value = d
}
//-->
</SCRIPT>
<FORM name=form1>
<TABLE cellSpacing=1 cellPadding=1 border=1>
<TBODY>
<TR>
<TD align=middle colSpan=3><B><FONT size=4>Percentage Calculator</FONT></B>
</TD>
<TR>
<TD>What is <INPUT size=5 name=a> % of <INPUT size=5 name=b>?</TD>
<TD>Answer: <INPUT maxLength=40 size=5 name=total1></TD>
<TD><INPUT onclick=perc1() type=button value=Calculate></TD>
<TR>
<TD><INPUT size=5 name=c> is what percent of <INPUT size=5
name=d>?</TD>
<TD>Answer: <INPUT size=5 name=total2> %</TD>
<TD><INPUT onclick=perc2() type=button value=Calculate></TD>
<TR>
<TD align=middle
colSpan=3><INPUT type=reset value=Reset></TD></TR></TBODY></TABLE></FORM>
Does anyone know how I could change the answer to a percentage bar instead of the numeric answer ? or change the colour of the answer to say red or green depending on the value ? Many thanks Donna I am using a JavaScript price calculator. Right now it does everything I need except for one thing. If you look at the "type" field, they can choose either woven or printed. Right now, if they choose "woven" it adds 6 cents to to the total as you can see in this portion of the code: if (theForm.select.value=="woven") { priceeach+=0.06; Rather than 0.06, how do I get it to add a percentage--say 20% The form is located he http://goo.gl/YlJWo Thank you! I am having an issue with converting my decimal to a percentage... any suggestions? Thanks - it's probably an easy solution, but I am lost below is my code (cost * .06) is where the issue is - Thanks! var cost = prompt("What is the cost of your purchase?", "") document.write("Return Value: "+cost,("<br />")); var salestax = cost * .06 document.write("Return Value: "+salestax,("<br />")); var total = cost + salestax document.write(cost + salestax); I have my cumulative totals box at the very end of my order form and I'm required to have another underneath that one that will give a particular discount depending on how great the total of the order is. Would someone please be able to give me the javascript codes that will allow me to do this and also tell me where I'm to put them. Hi, I am fairly new to this so please bare with me. I have a php page that uses Javascript (I think) to calculate the percentage Insurance Premium Tax (IPT field) of a total. I have located where the calculation occurs and can see that it take the total of a predefined amount and divides it by 21 to give me the 5% IPT tax. IPT has risen in the UK today to 6% so I need to know what I need to change the 21 to to give me an accurate IPT calculation. Here's a snippet of the code. Can anyone help please? Is it 17.65? PHP Code: //////////////////////////////////////////// // Motor Bike Calculations //////////////////////////////////////////// $p = 3; $q = 0; while ($p < 6){ $base_array = mysql_fetch_row($result4); // Motor Bikes $risk_code = 2; $ap = (0 + ($p)); $ipt_rate = $ipt_main; $monthly_total = $pricing_row[$ap]; // Calculate IPT $ipt_percentage = $monthly_total / 21; $monthly_ipt = $ipt_percentage; $base_cost = $base_array[0] + $dealer_loading; $base_final = $base_cost; $profit = $monthly_total - $base_cost - $monthly_ipt; $monthly_total = number_format($monthly_total, 2, '.', ''); $monthly_ipt = number_format($monthly_ipt, 2, '.', ''); $base_final = number_format($base_final, 2, '.', ''); $profit = number_format($profit, 2, '.', ''); echo ' <tr align="center" bgcolor="#FFDDFF"> <td>'; if ($p == 3) { echo (''); } elseif ($p == 4) { echo ('UK'); } elseif ($p == 5) { echo ('UK & European'); } echo '</td> <td> <input name="'; if ($p == 3) { echo ('comprehensive_plus_'.$risk_code); } elseif ($p == 4) { echo ('comprehensive_'.$risk_code); } elseif ($p == 5) { echo ('driveline_plus_'.$risk_code); } echo '" type="text" value="'.$pricing_row[$ap].'" size="6" maxlength="6" class="smallinfo"> </td> <td>'.$monthly_ipt.'</td> <td>'.$base_final.'</td> <td>'.$profit.'</td> </tr>'; $q++; $p++; } Hi. Can someone please tell me if a bent percentage silder is possible (something like this http://www.codingforums.com/showthread.php?t=173255 only I want it to be bent about 330 degrees, and I wouldn't want to link to another class-I would like to host the entire code on my website)? Also, the reason I want the slider to be bent, is because I would like the slider to be a sort of bent rectangle, and when the user clicks/drags the slider, the rectangle would "fill" to that point (change its background color up to where the mouse is). Thank you. Bye.
Is there a way with Firefox/Chrome to get the actual % used instead of the rendered pixel values? For example I have a table with the following CSS markup Code: #tableFoo : { width : 50%; }
In IE to get the percentage set in the CSS file, it is as simple as: Code: var width = tableObj.currentStyle["width"] I am having trouble figuring out a way to get the percentage value with Firefox and Chrome. I am thinking it is not possible other than stylesheet sniffing and ripping out the rules that way which I am not going to do. Thanks, Eric I now have the calculation, topic can be closed! thanks I am trying to customize this scrollbar so that it will fit all screen resolutions and I was wondering how I could do this by somehow customizing the JavaScript files created by Nathan Faubion or if I could do this using other JavaScript variables (var widthPercentage) to change the pixels to percentages? Please let me know what you think. Thank you very much! One of the pages on the website I'm using the JavaScript on: http://www.clintshipley.com/about.html Code: JavaScript file jsScroller.js:
//Created by Nathan Faubion http://www.n-son.com/scripts/jsScrolling/
function jsScroller (o, w, h) {
var self = this;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
//Private methods
this._setPos = function (x, y) {
if (x < this.viewableWidth - this.totalWidth)
x = this.viewableWidth - this.totalWidth;
if (x > 0) x = 0;
if (y < this.viewableHeight - this.totalHeight)
y = this.viewableHeight - this.totalHeight;
if (y > 0) y = 0;
this._x = x;
this._y = y;
with (o.style) {
left = this._x +"px";
top = this._y +"px";
}
};
//Public Methods
this.reset = function () {
this.content = o;
this.totalHeight = o.offsetHeight;
this.totalWidth = o.offsetWidth;
this._x = 0;
this._y = 0;
with (o.style) {
left = "0px";
top = "0px";
}
};
this.scrollBy = function (x, y) {
this._setPos(this._x + x, this._y + y);
};
this.scrollTo = function (x, y) {
this._setPos(-x, -y);
};
this.stopScroll = function () {
if (this.scrollTimer) window.clearInterval(this.scrollTimer);
};
this.startScroll = function (x, y) {
this.stopScroll();
this.scrollTimer = window.setInterval(
function(){ self.scrollBy(x, y); }, 40
);
};
this.swapContent = function (c, w, h) {
o = c;
var list = o.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
if (list[i].className.indexOf("scroller-content") > -1) {
o = list[i];
}
}
if (w) this.viewableWidth = w;
if (h) this.viewableHeight = h;
this.reset();
};
//variables
this.content = o;
this.viewableWidth = w;
this.viewableHeight = h;
this.totalWidth = o.offsetWidth;
this.totalHeight = o.offsetHeight;
this.scrollTimer = null;
this.reset();
};
JavaScript on HTML page:
<script type="text/javascript" src="Scripts/jsScroller.js"></script>
<script type="text/javascript" src="Scripts/jsScrollbar.js"></script>
<script type="text/javascript">
var scroller = null;
var scrollbar = null;
window.onload = function () {
scroller = new jsScroller(document.getElementById("scroller"), 550, 275);
scrollbar = new jsScrollbar (document.getElementById("scrollbar-content"), scroller, false);
}
</script>
How can i "prompt the user for the sales tax rate as a percentage"? Thanks soooo much for any help! this is what i have so far.... var tax = prompt("What is your tax rate percentage?", "") document.write("Return Value: "+tax,("<br />")); Hi, I am trying to write a script that will take a date of birth and another date and, if the person was over 75 years old on the createdDate, return "true" (otherwise return "false"). Unfortunately my code doesn't seem to return either 'true' or 'false'! Any help would be grately appreciated. The code is: Code:
var dateofBirth="30/10/1982";
var createdDate="01/12/2010";
var sd = dateofBirth.split('/');
var dob = new Date(sd[2],sd[1],sd[0]);
sd = createdDate.split('/');
var submit = new Date(sd[2],sd[1],sd[0]);
var age=submit-dob;
var ageYears=Math.floor((((age/3600000)/24)+1)/365.25);
if(ageYears>75) document.write("true") else document.write("false") ;
Hi, There are two text boxes in a HTML form. The first text box takes the time when the user starts to work on a project. The second box takes the time when the user stops working on that project. Now, I would like to calculate the total time worked on that project for that user. That is (stop time - start time). I tried few things without success. Any help will be appreciated. to be honest I have no idea where to start, i have a table, with 2 numeric values at the minute, if the checkbox is selected I want the total price to be shown? Any help to get me started would be great! this is the form I have with the numeric values Code: <form id="calculation" action="#" method="post"> 100 <input type="checkbox" name="check1" value="100" onClick='total_cost()'/> 120 <input type="checkbox" name="check2" value="200" onClick='total_cost()'/> Total cost<input type="text" name="total" id="total" readonly="readonly" /> onClick='total_cost()' is referring to the javascript function where I just don't know where to start? |
|||||||