JavaScript - Caculating Total Cost With Forms Javascript
I need to implement a function in JavaScript to calculate the total of the purchase which is equal to price of each tool * quantity ordered* sales tax=.08. I also need to use confirm() to display the total cost of the purchase so the user can see it. If my user confirms the order by clicking ok then but clicking cancel will terminate the order.
<!DOCTYPE html> <html> <head> <title>Form</title> <meta charset="UTF-8" /> <body> <h1 style="text-align:center"> Hardware Store</h1> <form action="http://www.yahoo.com/formtest.php"> <p> <label> Buyer's Name: <input type="text" name="name" size="30"/> </label> <label> Street Address: <input type="text" name="street" size="30"/> </label> <label> City, State, Zip: <input type="text" name="city" Size="30"/> </label> </p> <table> <tr> <th> Tool Name </th> <th> Price </th> <th> Quantiy </th> </tr> <tr> <td> Hammer </td> <td> $12.00</td> <td> <input type= "text" name="Hammer" size="2" /> </td> </tr> <tr> <td> Shovel </td> <td> $18.00 </td> <td> <input type="text" name="Shovel" size="2" /> </td> </tr> <tr> <td> Trimmer </td> <td> $22.00 </td> <td> <input type="text" name="Trimmer" size="2" /> </td> </tr> </table> <h2> Payment Method </h2> <label> Visa <input type="radio" name="payment" id="payment_visa" value="visa" checked="checked"/> </label> <br /> <label> Mastercard <input type="radio" name="payment" id="payment_mastercard" value="mastercard"/> </label> <br /> <label> American Express <input type="radio" name="payment" id="payment_american_express" value="american express"/> </label> <br /> <input type="submit" value="Submit" /> </form> </body> </html> Similar TutorialsBeginner here, so please bear with me... Essentially, I'm trying to put together a survey which keeps a running total at the bottom of the page that is updated each time the user makes a choice. So, something like this: Checkbox A - $5.00 Checkbox B - $10.00 Checkbox C - $20.000 Total _____ (Where Total is a textbox.) Originally, I thought this would be easy -- I could just include the onClick attribute in the input tags and call a function each time a checkbox is selected. The problem is that the survey software I'm using doesn't seem to allow me to alter the input tags. Basically, I can create the survey using their customized software and it generates the form, input tags, etc. I can then add customized html/javascript before and after each question. All the code I add appears within the same form. So, is there an easy way to solve this problem without altering the input tags? 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, 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. Hi, I'm trying to create a Invoice form with javascript. Basically, my invoice form should have the field item, cost, quantity and product total. It shd have a function to allow the user to add rows if they want more than one item. In the end, there should be a sub total. I am able to use javascript to calc the total of each product, but not all products(Grand total). I am also unable to add rows. Can anyone help me? Thanks! This is what I have so far: <? mysql_connect("", "", ""); mysql_select_db(invoice); session_start(); ?> <!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> <script type="text/javascript" language="javascript"> function calcProdTotal(){ var total; var amount = parseInt(document.invoiceForm.qty.value); total = (parseFloat(document.invoiceForm.price.value) * amount); document.invoiceForm.Prodtotal.value = round_decimals(total, 2); } function round_decimals(original_number, decimals) { var result1 = original_number * Math.pow(10, decimals) var result2 = Math.round(result1) var result3 = result2 / Math.pow(10, decimals) return pad_with_zeros(result3, decimals) } function pad_with_zeros(rounded_value, decimal_places) { // Convert the number to a string var value_string = rounded_value.toString() // Locate the decimal point var decimal_location = value_string.indexOf(".") // Is there a decimal point? if (decimal_location == -1) { // If no, then all decimal places will be padded with 0s decimal_part_length = 0 // If decimal_places is greater than zero, tack on a decimal point value_string += decimal_places > 0 ? "." : "" } else { // If yes, then only the extra decimal places will be padded with 0s decimal_part_length = value_string.length - decimal_location - 1 } // Calculate the number of decimal places that need to be padded with 0s var pad_total = decimal_places - decimal_part_length if (pad_total > 0) { // Pad the string with 0s for (var counter = 1; counter <= pad_total; counter++) value_string += "0" } return value_string } </script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Invoice</title> <style type="text/css" media="screen"> @import url("css/layout.css"); .style1 { font-size: 14px; font-weight: bold; } .style2 {font-size: 14px} </style> </head> <body> <? include("header.php"); ?> <div class="find_more"> <p>Create new Invoice</p> </div> <div class="container_row"> <div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px"> <? $sqlstmt = "SELECT * From Client"; $result = mysql_query($sqlstmt); $options= ""; while ($row=mysql_fetch_array($result)) { $ClientID = $row["Client_ID"]; $orgName = $row["Org_Name"]; $options.="<option value = \"$ClientID\">".$orgName."</option>"; } $sqlstmt2 = "SELECT * From Item"; $result2 = mysql_query($sqlstmt2); $options2= ""; while ($row=mysql_fetch_array($result2)) { $ItemID = $row["Item_ID"]; $itemName = $row["Item_Name"]; $options2.="<option value = \"$ItemID\">".$itemName."</option>"; } ?> <form name="invoiceForm" method="post" action=""> <p><strong>TO:</strong> <select name ="Client"> </br></br></br> <option value = ""> --Select a Client-- <?= $options ?></option> </select></p> <table> <table border='0' cellpadding='2' cellspacing='2' width='600' > <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Attention</th> <th>From</th> <th colspan="2">Payment terms</th> </tr> <tr align='centre' valign='centre'> <td><input type="text" name = "contact"/></td> <td><input type="text" name = "sender"/></td> <td colspan="2"><input type="text" name = "paymentTerms"/></td> </tr> <tr bgcolor='#CCCCFF' align='centre' valign='centre' > <th>Item Name</th> <th>Cost ($)</th> <th>Quantity</th> <th>Total</th> </tr> <tr align='centre' valign='centre'> <td><select name ="ItemName"> <option value = ""> --Select a Item-- <?= $options2 ?></option> </select> </td> <td><input name="price" type="text" id="price"></td> <td><input type="text" size="5" name="qty" onChange="calcProdTotal()"></td> <td><input type="text" name="Prodtotal" onBlur="parseelement(this)"></td> </tr> <tr> <th colspan="3" align='right'>GST:</th> <td><input type="text" value="7" name = "gst"/>%</td> </tr> <tr> <th colspan="3" align='right'>Sub Total:</th> <td><input type="text" name = "Subtotal"/></td> </tr> <tr> <th colspan="3" align='right'>Grand Total:</th> <td><input type="text" name = "Grandtotal"/></td> </tr> </table> </form> <br /> <? include("footer.php"); ?> </body> </html> Hi, my javascript calculates a total figure. It rounds it up though and I want it to give me a decimal (x2) total. Please help. Here is my code so far: Code: <script type="text/javascript"> function calculateText() { var op1=document.getElementById('Age02'); var op2=document.getElementById('Girl35'); var op3=document.getElementById('Boy35'); var op4=document.getElementById('Girl610'); var op5=document.getElementById('Boy610'); var op6=document.getElementById('Age11'); var op7=document.getElementById('Guest'); var op8=document.getElementById('VIP'); var op9=document.getElementById('School'); var op10=document.getElementById('3DFilm'); var op11=document.getElementById('BFast'); var op12=document.getElementById('PNGift'); var op13=document.getElementById('PStand'); var op14=document.getElementById('PLrg'); var op15=document.getElementById('PReP'); var op16=document.getElementById('KyMg'); var op17=document.getElementById('SnwGlb'); var op18=document.getElementById('PBbl'); var op19=document.getElementById('USB'); var op20=document.getElementById('SantaL'); var op21=document.getElementById('SantaK'); var op22=document.getElementById('FreeP'); var op23=document.getElementById('PUpgrd'); var op24=document.getElementById('StaffP'); var op25=document.getElementById('CompEntry'); var op26=document.getElementById('241'); var op27=document.getElementById('50Percent'); var op28=document.getElementById('Voucher'); var result=document.getElementById('Total'); if(op1.value=="" || op1.value!=parseFloat(op1.value)) op1.value=0; if(op2.value=="" || op2.value!=parseFloat(op2.value)) op2.value=0; if(op3.value=="" || op3.value!=parseFloat(op3.value)) op3.value=0; if(op4.value=="" || op4.value!=parseFloat(op4.value)) op4.value=0; if(op5.value=="" || op5.value!=parseFloat(op5.value)) op5.value=0; if(op6.value=="" || op6.value!=parseFloat(op6.value)) op6.value=0; if(op7.value=="" || op7.value!=parseFloat(op7.value)) op7.value=0; if(op8.value=="" || op8.value!=parseFloat(op8.value)) op8.value=0; if(op9.value=="" || op9.value!=parseFloat(op9.value)) op9.value=0; if(op10.value=="" || op10.value!=parseFloat(op10.value)) op10.value=0; if(op11.value=="" || op11.value!=parseFloat(op11.value)) op11.value=0; if(op12.value=="" || op12.value!=parseFloat(op12.value)) op12.value=0; if(op13.value=="" || op13.value!=parseFloat(op13.value)) op13.value=0; if(op14.value=="" || op14.value!=parseFloat(op14.value)) op14.value=0; if(op15.value=="" || op15.value!=parseFloat(op15.value)) op15.value=0; if(op16.value=="" || op16.value!=parseFloat(op16.value)) op16.value=0; if(op17.value=="" || op17.value!=parseFloat(op17.value)) op17.value=0; if(op18.value=="" || op18.value!=parseFloat(op18.value)) op18.value=0; if(op19.value=="" || op19.value!=parseFloat(op19.value)) op19.value=0; if(op20.value=="" || op20.value!=parseFloat(op20.value)) op20.value=0; if(op21.value=="" || op21.value!=parseFloat(op21.value)) op21.value=0; if(op22.value=="" || op22.value!=parseFloat(op22.value)) op22.value=0; if(op23.value=="" || op23.value!=parseFloat(op23.value)) op23.value=0; if(op24.value=="" || op24.value!=parseFloat(op24.value)) op24.value=0; if(op25.value=="" || op25.value!=parseFloat(op25.value)) op25.value=0; if(op26.value=="" || op26.value!=parseFloat(op26.value)) op26.value=0; if(op27.value=="" || op27.value!=parseFloat(op27.value)) op27.value=0; if(op28.value=="" || op28.value!=parseFloat(op28.value)) op28.value=0; result.value=0; result.value=parseInt(result.value); result.value=parseInt(result.value)+parseInt(op1.value*5)+parseInt(op2.value*5)+parseInt(op3.value*5)+parseInt(op4.value*5)+parseInt(op5.value*5)+parseInt(op6.value*5)+parseInt(op7.value*0)+parseInt(op8.value*8.50)+parseInt(op9.value*3.75)+parseInt(op10.value*0)+parseInt(op11.value*10)+parseInt(op12.value*5)+parseInt(op13.value*3)+parseInt(op14.value*4)+parseInt(op15.value*2)+parseInt(op16.value*4)+parseInt(op17.value*5)+parseInt(op18.value*3)+parseInt(op19.value*5)+parseInt(op20.value*4)+parseInt(op21.value*3)+parseInt(op22.value*0)+parseInt(op23.value*1)+parseInt(op24.value*0)+parseInt(op25.value*0)+parseInt(op26.value*4)+parseInt(op27.value*2)-parseInt(op28.value); } </script> Hi, jI have a javascript script that adds/deletes input in a form. I'd like to calculate the volume for each ligne : l*h*d Then a total of all the volume fileds The data will be inserted in a php table. Thanks for your help (I hope you can understand my english) I have trouble with php but even more with javascript versions. PHP Code: -- Structure of mysql table named 'tbox' -- CREATE TABLE IF NOT EXISTS 'tbox' ( 'tboxid' int(11) NOT NULL AUTO_INCREMENT, 'tboxidtproid' int(11) NOT NULL, 'tboxdate' date NOT NULL, 'tboxL' int(11) NOT NULL, 'tboxD' int(11) NOT NULL, 'tboxH' int(11) NOT NULL, 'tboxnet' float NOT NULL, 'tboxgros' float NOT NULL, PRIMARY KEY ('tboxid') ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=55 ; The html page wiith js : PHP Code: <html> <head> <script type="text/JavaScript"> // add a box <!-- function create_champ(i){ var l = document.getElementById('l_1').value; var d = document.getElementById('d_1').value; var h = document.getElementById('h_1').value; var v = document.getElementById('v_1').value = (l * d * h) ; var i2 = i + 1; document.getElementById('champs_'+i).innerHTML = '<span id="ligne_'+i+'">L <input type="text" size="9" maxlength="9" name="l[]" id="l_'+i+'" \/> D <input type="text" size="9" maxlength="9" name="d[]" id="d_'+i+'" \/> H <input type="text" size="9" maxlength="9" name="h[]" id="h_'+i+'" \/> Volume : <input type="text" size="9" maxlength="50" name="v[]" id="v_'+i+'" value = "" " disabled="true" \/> <input type="button" value="x" id="boutton_'+i+'"onclick="delete_champ('+i+')" \/><br \/><\/span>'; document.getElementById('champs_'+i).innerHTML += '<span id="champs_'+i2+'"><input type="button" value="Add a box" onclick="create_champ('+i2+')" \/><\/span>'; } function delete_champ(i){ document.getElementById("ligne_"+i).innerHTML=""; } </script> </head> <body> <form id="1" name="addalbum" method="post" action=""> <td width="250" valign="top"><fieldset> <legend>Boxes Dimensions(mm)</legend> <table width="95%" border="0" cellspacing="0" cellpadding="3"> <tr> <span id="ligne_1"> L <input type="text" name="l[]" id="l_1" size="9" maxlength="9" value="" /> D <input type="text" name="d[]" id="d_1" size="9" maxlength="9" value="" /> H <input type="text" name="h[]" id="h_1" size="9" maxlength="9" value="" /> Volume : <input type="text" name="v[]" id="v_1" size="9" maxlength="9" value="" disabled="true" /> <input type="button" value="x" id="boutton_1" onclick="delete_champ(1)" /> <br /> </span> <span id="champs_2"> <input type="button" value="Add a box" onclick="create_champ(2)" \/></span> </table> </fieldset></td> <label> <input type="submit" name="button" id="button" value="Envoyer"> </label> </form> <?php /* insert fields in table tbox */ ?> </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 want the calculator to take what was clicked display the item number and also the cost. (if possible i'd like to be able to display cost with no button) sorry if the code is messy i'm new to javascript. Code: <SCRIPT TYPE="TEXT/JAVASCRIPT"> // Definitions var in2 = "" var in3 = "" //costs var $mat = "" var cmat = Number($mat) var $sqft = "" var csf = Number($sqft) var chngcost = cmat*csf var $coga = 30 var $cos = 40 var $coshp = 15 var $total = chngcost + $coga + $cos + $coshp // Add a letter to string function itemnumber2(numb) { in2 = numb document.myform.i2.value = in2 document.itemnumber.i2.value = in2 if (in2 == "10") { $mat = 3 document.myform.cmat1.value = $mat } if (in2 == "11") { $mat = 6 document.myform.cmat1.value = $mat } if (in2 == "12") { $mat = 12 document.myform.cmat1.value = $mat } } function itemnumber3(numb) { in3 = numb document.myform.i3.value = in3 document.itemnumber.i3.value = in3 if (in3 == "1") { $sqft = 7.5 document.myform.sqrf1.value = $sqft } if (in3 == "2") { $sqft = 5.5 document.myform.sqrf1.value = $sqft } if (in3 == "3") { $sqft = 5 document.myform.sqrf1.value = $sqft } } //total cost function function totalcost() { ttc1 = $total document.myform.ttc.value = ttc1 } </SCRIPT> Code: <input type="radio" id="10" name="Size" value="18x22" onclick="itemnumber2(10)"> 18" X 22"<br> <input type="radio" id="11" name="Size" value="24x36" onclick="itemnumber2(11)"> 24" X 36"<br> <input type="radio" id="12" name="Size" value="36x48" onclick="itemnumber2(12)"> 36" X 48"<br> Code: <input type="radio" id="1" name="Material" value="Photo Gloss" onclick="itemnumber3(1)"> Photo Gloss<br> <input type="radio" id="2" name="Material" value="Bond Laminate" onclick="itemnumber3(2)"> Bond Laminate<br> <input type="radio" id="3" name="Material" value="Photo Gloss" onclick="itemnumber3(3)"> Vinyl<br> Code: <form name="itemnumber" action="#"> <span class="style6">Item # <input type="text" size="3" name="i1" value="101" disabled>- <input type="text" size="2" name="i2" disabled>-<input type="text" size="1" name="i3" disabled></span></p> </form> Code: <input name="cost" type="button" onclick="totalcost()" value="Cost"> $<input type="text" size="5" name="ttc" disabled> I am having troubles with calculating costs on a form. When I press the cost button, it doesn't generate the calculations. Code: var fday = document.getElementById("reg_start_date").value; var lday = document.getElementById("reg_end_date").value; if (fday == "2011-09-05" && lday == "2011-09-06") { cost = cost * 2; } else if (fday == "2011-09-06" && lday == "2011-09-07") { cost = cost * 2; } else if (fday == "2011-09-05" && lday == "2011-09-07") { cost = cost * 3; } Hi there I have tried to work on this code for the last 2 weeks, can not figure out what is wrong with my code, please have a look for me, it will greatly appreciated from me; here my details; I work on <script type="text/javascript" language="javascript"> from dreamweaver to set my code to calculate, different Fiji tour (4 options, choose 1 in options) Payment (4 options, choose 1 in options) The cost of tour - discount base on tour cost. (discount has 4 different calculate) Need to be alert if they not choose 1 in each type. Second cost if they choose to fly out , will cost plus $400 on top the above cost. This is an optional, so they don;t need to buy if they want. I have attached my code, please have a look, Thank you very much I'm having a total brain fart as to why this is happening. I just transferred my company's website from aplus.net servers to a linux based server on GoDaddy. My company's "shop" page has a drop down menu which should automatically re-direct you to a different page (on a different website where our shopping cart is hosted) when the option is selected. For some reason, after the switch to a different host, the option tags are no longer re-directing to the proper pages. Instead, they just tack on the value URL onto the existing URL and i just go in circles. javascript: <script language="JavaScript" type="/text/javascript"> function nav() { var w = document.myform.mylist.selectedindex.html; var url_add = document.myform.mylist.options[w].value; window.location.href = url_add; } </script> HTML for options form: <FORM NAME="myform"> <SELECT NAME="mylist" onChange="nav()"> <OPTION VALUE="http://bedvoyage.com/shop">Select Your Product <OPTION VALUE="http://bedvoyage.myshopify.com/products/twin-sheet-set">Sheet Set - Twin - $139.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/double-sheet-set">Sheet Set - Double - $159.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/queen-sheet-set">Sheet Set - Queen - $179.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/king-sheet-set">Sheet Set - King - $199.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/twin-pillow-case">Pillow Case - Twin - $20.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/double-pillow-case">Pillow Case Set - Double - $40.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/queen-pillow-case">Pillow Case Set - Queen - $42.00 <OPTION VALUE="http://bedvoyage.myshopify.com/products/king-pillow-case">Pillow Case Set - King - $45.00 <option value="http://bedvoyage.myshopify.com/products/zippered-travel-pillow-case">Zippered Travel Pillow Case - $19.00 <!-- <OPTION VALUE="http://bedvoyage.myshopify.com/produ...uot;>Travel Blanket - $39.00 --> </SELECT> </FORM> Is there an option on godaddy that i'm just missing out on that i'm too ignorant to notice? Thanks in advance. When I click Vacant after 5 and it goes to occupied. How would I make it come back to vacant when clicked again? Code: <html> <head> <script type="text/javascript"> function fillForm() { if (counter > 10){ } } </script> <script type="text/javascript"> function StartCounting(){ setInterval("DoCounting()", 1000) } var Counter = 0; function DoCounting(){ var obj = document.getElementById('countingtext'); obj.innerHTML = '' + Counter; Counter++; if( Counter > 5) { var obj1 = document.getElementById("closed").value = "Open"; var space1 = document.getElementById("space1") space1.onclick = linkClick; } } function linkClick(){ space1 = document.getElementById("space1").value = "Occupied"; } </script> </head> <body onload= "StartCounting()"> Open at 5: <span id="countingtext"></span> </body> </html> <div style="margin-right:3mm; " > <form action="#" method="post" id="theForm" > <input size="10" id="closed" value="Closed" style="text-align:center;" /> <script type="text/javascript"> </script> <input type='button' id="space1" name='s"+ i+"' value='Vacant' onclick='readSpace(s"+ i+")' style='width:15mm;' /></td> </form> </div> I cannot get the result right. I write area and phone by numbers but it still gives me error Code: function validate_text(field,alerttext) { with(field) { var re = /[a-zA-Z]/g; if(re.test(field)) { return true;}else{alert(alerttext);return false;} } } function validate_number(field,alerttext){ with(field) { var re = /[0-9]/g; if(re.test(field)) { return true;}else{alert(alerttext);return false;} } } function validateForm(thisForm){ with(thisForm) { if(validate_number(area,"wrong area code") == false) { area.focus();return false; } if(validate_number(phone,"wrong phone") == false) { phone.focus();return false; } if(validate_text(name_surname,"wrong name") == false) { name_surname.focus();return false; } } } Code: ...<b>Name Surname :</b><input style="margin-left:10px;" type="text" name="name_surname"/> <br /><br /> <b>phone :</b><input type="text" style="margin-left:19px;" maxlength="4" size="4" name="area" /> -<input type="text" style="margin-left:5px;" maxlength="7" size="10" name="phone" /><br /><br />.... Hi, I am trying to produce a form which customers fill in to acquire a car park permit for my car park. In the form, I take details of reg plate, make and model, colour etc, and also take the period of time they are paying for (1-6 months) and the date in which they want their permit to start (either immediately or they select the date from the calendar). I was trying to implement a script that I found online into my form so that it will show them on the form when the expiry date of their new permit will be. However, when I try to use the script, and click on the button that I produced to work out the expiry date, it submits the form and takes them to checkout without filling out the expiry date. Please can someone help me?! Kind Regards, Dan. Hello, I need to solve the following task on my website: I have products with add to cart button, like this: Code: <form action="cart.php" method="post" id="_cart" name="_cart"> <input type="hidden" name="prodid" value="Product1" /> <a href="javascript: AddToCart()"> <img src="/images/design/buynow.gif" /> </a> </form> However, it doesn't work, since i have the same value under the name of each form: "_cart". Is there any way i still can send a form regardless the name of the form? I tried to use "onclick", like this: Code: <a href="javascript: void(0);" onclick="document._cart[0].submit();return false;"> However, i still have to change the value under the _cart element from 0 to the number of my forms. I need just submit a form itself, with the same form names. For some reason i cannt use the html submit button. Everything should be done with JavaScript. I beleive this text is not hard for understanding ) Look forward to your help Guys. I just have a quick question.... Is it possible to use Javascript to set the name of a tag to be the tag's id? For example, something like this: Code: <input type="text" id="textInput" name="this.id"> The example code above doesn't work. The reason I'm asking is because I have a complex form that uses Javascript to change ids a lot (the input fields are dynamically created). When I was coding the form I completely overlooked the fact I need to use the name tag to process it with PHP. (to enter it into a mysql database) It'd be a pain to have to go through all my javascript and change the name where ever I change the ids. If need be, I'll do this, but I'm just looking for an easier way. Thanks in advance! i am new to JavaScript and i have an assignment to create a tour calculator here is the code and its not working please help its urgent thanks. [code] <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .font { font-size: 28pt; } font2 { font-size: 15pt; } </style> </head> <body> <strong class="font">USA Tour Cost Calculator</strong> <br/> <br/> Conplete the form below to calculate the cost of your tour of the United States <script type="text/javascript"> function calculate(){ var cost=0; var accomodation=0 var radio1 var radio2 var duration=0 function accomodation() { for (var i=1; i<=3; i++) {radio1= document.getElementById("radio"+i); if (radio1.checked==true) {accomodation=i;}} if (accomodation=1){cost=parseInt(radio.value); return value;} else if (accomodation=2){cost=parseInt(radio.value); return value;} else if (accomodation=3) {cost=parseInt(radio.value);return value;} else {window.alert("Please select the type of accomodation")} } function peak() { var cost=accomodation() var peak=document.getElementById("check1") if (peak.checked==true) {cost +=parseInt(checkbox.value); return value;} else {cost=accomodation()} } function calc(){ var cost=peak() for (var i=1; i<=4; i++){ radio2=document.getElementById("Radiobutton"+i); if (radio2.checked==true) {duration=i;} if (duration=1) {cost*=parseInt(radio.value); return value;} else if (duraion=2){cost*=parseInt(radio.value); return value;} else if(duration=3) {cost*=parseInt(radio.value); return value;} else if(duration=4){caost*=parseInt(radio.value); return value;} else {alert("Please select the duration of tour")} } } </script> <br/> <form id="form2" name="form2" method="post" action=""> <p> <label> <input type="radio" name="RadioGroup2" value="95" id="Radio1" /> Camping</label> <br /> <label> <input type="radio" name="RadioGroup2" value="140" id="Radio2" /> Budget Hotel</label> <br /> <label> <input type="radio" name="RadioGroup2" value="170" id="Radio3" /> Premier Hotel</label> <br /> </p> </form> Click here if you will be travelling during the peak season of June to August: <input name="" type="checkbox" value="20" id="check1" /> <br/> <br/> Duration of tour: <form id="form1" name="form1" method="post" action=""> <label> <input type="radio" name="RadioGroup1" value="4" id="Radiobutton1" /> 4 days, 1sate</label> <br /> <label> <input type="radio" name="RadioGroup1" value="7" id="Radiobutton2" /> 7 dasy, 3 states</label> <br /> <label> <input type="radio" name="RadioGroup1" value="14" id="Radiobutton3" /> 14 days, 12 states</label> <br /> <label> <input type="radio" name="RadioGroup1" value="20" id="Radiobutton4" /> 20 days, 18 states</label> <br /> </p> </form> <br/> <p> <input type="submit" value="Calculate" onClick='alert("The total cost of your tour is $calculate();")'><input type="reset" value="Reset" /></p> </body> </html> [code] |