JavaScript - Calcultate Amount Total According To Dropdown
I have a text field.
I want the text field to change / be calculated on the action made on the dropdown menu... So if I select Debit card.. it should leave the amount as is.. If I selected Credit Card it should add a percentage to the Amount. Please dont just provide a solutoin.. but please explain as i would love to understand why 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>Untitled Document</title> <script type="text/javascript"> function doMath() { if (CardType = "cc") { var one = eval(document.myForm.Amount.value) var prod = one * 1.03 document.myForm.Amount.value=custRound(prod,2);} } else document.myForm.Amount.value; function custRound(x,places) { return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places) } </script> </head> <body> <form id="myForm" name="myForm" method="post" action=""> <input name="Amount" type="text" id="Amount" v alue="100" /> <select id="CardType" name="CardType" onchange="doMath();" > <option value="" selected="selected">Please Select</option> <option value="dc">Debit Card</option> <option value="cc">Credit Card</option> </select> </form> </body> </html> Similar TutorialsHi, I am thinking of how to write the code for this: There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes. So...can anyone give me any references to this? Thanks. Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array(); filling_prices["None"]=0; filling_prices["Lemon"]=5; filling_prices["Custard"]=5; filling_prices["Fudge"]=7; filling_prices["Mocha"]=8; filling_prices["Raspberry"]=10; function getFillingPrice() { var cakeFillingPrice=0; //Get a reference to the form id="cakeform" var theForm = document.forms["cakeform"]; //Get a reference to the select id="filling" var selectedFilling = theForm.elements["filling"]; //set cakeFilling Price equal to value user chose //For example filling_prices["Lemon".value] would be equal to 5 cakeFillingPrice = filling_prices[selectedFilling.value]; //finally we return cakeFillingPrice return cakeFillingPrice; } This is for the calculation Code: function calculateTotal() { //Here we get the total price by calling our function //Each function returns a number so by calling them we add the values they return together var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice(); //display the result var divobj = document.getElementById('totalPrice'); divobj.style.display='block'; divobj.innerHTML = "Total Price For the Cake $"+cakePrice; } Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()"> <option value="None">Select Filling</option> <option value="Lemon">Lemon($5)</option> <option value="Custard">Custard($5)</option> <option value="Fudge">Fudge($7)</option> <option value="Mocha">Mocha($8)</option> <option value="Raspberry">Raspberry($10)</option> Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. I need some help on my math equation, I got the calculations and confirm.submit, and the alert messages to all work properly, but when I go to put the data into the math equation, I am coming up with some outrageous number way off from what it is supposed to be. What I am trying to accomplish is to take the calculated number of day and hours and minutes; multiply the total time in hours by the equipment cost per hour and calculate the total amount of rent. My problem I think is in the calculate total amount of rent section in the script. Please help, your expertise is greatly appreciated. Below is the math equation in the script section: Code: //calculate days from date field function checkit() { var today = new Date(); var nowyear = today.getFullYear(); var d1 = document.forms[0].pickupDate.value.split("/"); var yr = d1[2]; var mm = d1[0]-1; var dy = d1[1]; var OK1 = checkValidDate(yr,mm,dy); if ((yr < nowyear || yr > nowyear +1)) {OK1 = false} // only valid for current year and next year var d2 = document.forms[0].returnDate.value.split("/"); yr = d2[2]; mm = d2[0]-1; dy = d2[1]; var OK2 = checkValidDate(yr,mm,dy); if ((yr < nowyear || yr > nowyear+2)) {OK2 = false} if ((!OK1) || (!OK2)) { alert ("Invalid dates\(s\) or incorrect format! Please try again."); document.forms[0].pickupDate.value = ""; document.forms[0].returnDate.value = ""; return false; } // arbitrary or example start and end times obtained from elsewhere (select lists) var fhrs = parseFloat(document.forms[0].pickupHours.value); var fmins = parseFloat(document.forms[0].pickupMinutes.value); var shrs = parseFloat(document.forms[0].returnHours.value); var smins = parseFloat(document.forms[0].returnMinutes.value); var firstDate = new Date(d1[2],d1[0]-1,d1[1],fhrs,fmins); // note month must be 0-11!! Also note USA date format var secondDate = new Date(d2[2],d2[0]-1,d2[1],shrs,smins); var difference = secondDate.getTime() - firstDate.getTime(); var secs = difference/1000; var days = Math.floor(secs/86400); secs %= 86400; var hours= Math.floor(secs/3600); if (hours<10) {hours = "0" + hours} secs %= 3600; var mins = Math.floor(secs/60); if (mins<10) {mins = "0" + mins} alert ("Time Difference is " + days + " Days " + hours + " Hours " + mins + " Minutes"); //calculate total amount of rent var equip = parseFloat(document.forms[0].equipment.value); var total = (((days * 24) + hours + mins) * 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} } function checkValidDate(yr,mm,dy) { var nd = new Date(); nd.setFullYear(yr,mm,dy); // YYYY,MM(0-11),DD var ndmm = nd.getMonth(); if (ndmm != mm) { return false; } else { return true; } } This is the form in the body section: Code: <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" id = "date1" 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" id = "date2" 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" onblur="checkAge(this.value)" /> </td> </tr> <tr> <td colspan = "3" align = "center"> <input type = "submit" name = "submit" value = "Submit Reservation" onclick = "return checkit()"/> <input type = "button" value = 'Set Cookies' onclick = "setCookie('anyName', cookieValue ,expDate)"> <input type = "button" value = 'Display Cookies' onclick = "dispCookie('anyName')"> </td> </tr> </table> </form> Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... 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> 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 when user populate info it will appear like this: ------------------------- chkbox | name | number ------------------------- radbtn | MJ | 234123 radbtn | MD | 343543 radbtn | AB | 453466 Is uncertain that how many info will appear as its from database. I am able to enable the radbtn with chkbox by getting radbtn name. How can i enable only the selected radbtn textbox under name and number in order for user to edit it ? thanks anyone who can solve it! Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: 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> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript"> //<![CDATA[ function store(element) { // store values var cl = element; var text_list = new Array(); var value_list = new Array(); var length = cl.length; for (var foo=0; foo<length; foo++) { text_list[foo] = cl.options[foo].text; value_list[foo] = cl.options[foo].value; alert("text array " + foo + " " + text_list[foo]); alert("value array " + foo + " " + value_list[foo]); } populate(cl, text_list, value_list); } function populate(element, text, value) { // populate options with previously stored values var cl = element; var length = cl.length; cl.options.length=0; for (var bar=0; bar<length; bar++) { cl.options[bar]= new Option(text[bar], value[bar], false, false); } } function crafty_set_country(code) { var cl = document.getElementById('select'); store(cl); for (var i=0; i<cl.length; i++) { if (cl.options[i].value == code) { alert(cl.options[i].value + " found"); var value = cl.options[i].value; var text = cl.options[i].text; cl.options.length=0; cl.options[0]=new Option(text, value, true, true); /* for (var j=0; j<cl.length; j++) { alert("second loop " + cl.options[j].text); if (cl.options[i].value != code) { cl.options[j] } } */ } else { alert(cl.options[i].value); } } } //]]> </script> </head> <body> <form> <select id="select"> <option value="10">ten</option> <option value="20">twenty</option> <option value="30">thirty</option> <option value="40">fourty</option> <option value="50">fifty</option> <option value="60">sixty</option> </select> <input type="button" value="remove" name="button" onClick="crafty_set_country(50)"> <input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)"> </form> </body> </html> Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hi is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20? Thanks This is probably a really simple question. Is it possible to initialize x amount of variables. Like someone enters 10 into an input box and it makes 10 variables called variable1, variable2, variable3, etc. How would you name them? variable + num = 0; ? Thanks! So if I have three dollar amounts like .... a = 1,222.00; b = 1,323.00; c = ; d = 1,222.00; How can I alert the highest variable even though there may be 1 or more of them? Hey guys. So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it. I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy. After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds. Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.? Thanks a lot! hi i have following code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!--<meta http-equiv="refresh" content="51;url=quiz2action.php" />--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> </head> <body> <div id = "time"></div> <script type = "text/javascript"> } function display(secs) { if (secs <= 0) { alert("Your time is up!"); return; } secs--; document.getElementById("time").innerHTML = "You have " + Math.floor(secs/60) + ":" + (secs % 60 < 10 ? "0" : "" ) + (secs % 60) + " left"; setTimeout("display("+secs+")",1000); } display(51); // 300 seconds = 5 minutes </script> <p> <form name="form1" method="post" action="quiz2action.php"> <?php $db = mysql_connect("localhost"); mysql_select_db("videoshop", $db); //$queryquestions = "SELECT * FROM quiz ORDER BY RAND()" or die(); $queryquestions = "SELECT * FROM quiz" or die(); $resultquestions = mysql_query($queryquestions) or die(); while($rowquestions = mysql_fetch_array($resultquestions)) { $questionid = $rowquestions['id']; $question = $rowquestions['question']; $answerone = $rowquestions['option1']; $answertwo = $rowquestions['option2']; $answerthree = $rowquestions['option3']; $answerfour = $rowquestions['option4']; echo " <b>Question $questionid: $question</b><br> <input type=\"radio\" name=\"question[$questionid]\" value=\"1\"> $answerone <br> <input type=\"radio\" name=\"question[$questionid]\" value=\"2\"> $answertwo <br> <input type=\"radio\" name=\"question[$questionid]\" value=\"3\"> $answerthree <br> <input type=\"radio\" name=\"question[$questionid]\" value=\"4\"> $answerfour <br>"; echo "<br><br>"; } ?> </p> <label> <input type="submit" name="Submit" id="button" value="Submit"> </label> </form> <p> </p> </body> </html> above is the code of quiz which is created in php. that quiz is fine. the problem in in js script above the php script. what i want is when the time of 5 mins is completed then i want to disable all those radio buttons except submit button. how can this be done? Hello, I am a total newbie, so forgive me in advance as I am just learning javascript. I am putting together a small order form and the javascript code adds the tax (.0825) and shipping (if any - entered by user) to the subtotal. But when I uncheck it, the taxamt amount stays in the box. Any ideas on how to have the taxamt back to 0 when unchecked. Code: <form name= "placeOrder"> <table width="70%" border="1" cellpadding="5" cellspacing="5" bordercolor="#e2e2e2"> <tr> <td>fabric number</td> <td>yardage</td> <td>price</td> <td>amount</td> <td>sample size</td> </tr> <tr> <td align="center"><input name="fab1" type="text" id="fab1"></td> <td align="center"> <input type = "text" name = "qty1" id = "qty1" onchange = "doMath(1)"></td> <td align="center"> <input type = "text" name = "cost1" id = "cost1" onChange = "doMath(1)"></td> <td align="center"><input type = "text" name = "amount1" id = "amount1" value = "0.00" readonly></td> <td align="center"><input name="sample1" type="text" id="sample1"></td> </tr> <tr> <td align="center"><input name="fab2" type="text" id="fab2"></td> <td align="center"><input type = "text" name = "qty2" id = "qty2" onChange = "doMath(2)"></td> <td align="center"><input type = "text" name = "cost2" id = "cost2" onChange = "doMath(2)" ></td> <td align="center"><input type = "text" name = "amount2" id = "amount2" value = "0.00" readonly></td> <td align="center"><input name="sample2" type="text" id="sample2"></td> </tr> <tr> <td align="center"><input name="fab3" type="text" id="fab3"></td> <td align="center"><input type = "text" name = "qty3" id = "qty3" onChange = "doMath(3)"></td> <td align="center"><input type = "text" name = "cost3" id = "cost3" onChange = "doMath(3)"></td> <td align="center"><input type = "text" name = "amount3" id = "amount3" value = "0.00" readonly></td> <td align="center"><input name="sample3" type="text" id="sample3"></td> </tr> <tr> <td height="31"> </td> <td> </td> <td align="right">Texas sales tax <input type="checkbox" id="taxbox" name="taxbox" onclick="doMath(1)"> </td> <td align="center"><input type="text" name="taxamt" id="taxamt" value="0.00" onChange="doMath()"></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td align="right">subtotal:</td> <td align="center"><input type="text" name="GdTotal" value="0.00" id="GdTotal" readonly></td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td align="right">shipping & handling:</td> <td align="center"><INPUT type="text" id="shipamt" value="0.00" name="shipamt" onChange="doMath()"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td>invoice will be emailed when shipping cost is calculated</td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td align="right">Total:</td> <td><input type="text" name="GdTotal" value="0.00" id="GdTotal" readonly></td> <td> </td> </tr> </table> </form> <script type='text/javascript'> function doMath(which){ var gdtot = 0; var tx //" Excluding TX Sales tax"; var units = document.getElementById("qty"+which).value; var shipamt = document.getElementById("shipamt").value; shipamt = parseFloat( shipamt ); if (isNaN(units)) { document.getElementById("qty"+which).value = ""} if (isNaN(shipamt)) { document.getElementById("shipamt").value = ""; shipamt = 0; // so no error when added to gdtot } var rate = document.getElementById("cost"+which).value; var total = units * rate; if(!isNaN(total)) { var total2dp = total.toFixed(2); document.getElementById("amount"+which).value = total2dp; for (var i = 1; i <=3; i++) { x = document.getElementById("amount" + i).value; gdtot = +x +gdtot; // ensure x is a number } if (document.getElementById("taxbox").checked) { var taxamt = gdtot * 0.0825; document.getElementById("taxamt").value = taxamt.toFixed(2); gdtot += taxamt; } gdtot += shipamt; document.getElementById("GdTotal").value = gdtot.toFixed(2); } } </script> How do you make an image begin to load after a certain amount of time? e.g 3 seconds.
This is my table which the user will see. When the user select a category, the table will show the result. Therefore the number of row of details that will be shown is uncertain. Over here i show 3 example. ------------------------- Edit | Name | Number | ------------------------- radbtn | John | 123456 | radbtn | MJ | 654321 | radbtn | JP | 443224 | I have a edit button. Once i click on it all my N amount of radio button will be enable. How can i do it? the problem is i have to hard code it [0] [1] [2], how can i change it to N? document.formname.btnname[0].disabled=false; thanks for helping anyone! Beginner JavaScripter here. I'm wanting to run a piece of code (add rows) a specified amount of times based upon the number selected. Also, rows can be added after initial number has been specified. Example: User1 selects 2 -> 2 rows are added User1 goes back and selects 3 -> 1 row is added, making 3 rows total I've tried the following, but it seems to not take into account the number of rows already added. Any help is appreciated. Code: if (numSelected > 0) { var counter = 0; while (rowsAdded < numSelected ) { function.addRow(); counter++; } } |