JavaScript - Javascript Price Form Help Me Please
Similar TutorialsNeed 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'm building an order form for a food delivery business website and I'm struggling of getting the page to display the total prices of the items on the order page before the order is sent. The form ideally consists of: Product 1 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Product 2 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) ..... Product n - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Total price: (sum of all selected multiplied by the single prices) Name Telephone Address Postal Code Comment SUBMIT BUTTON What I have so far is: HTML: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>COMIDA GREGA OLYMPO</title> <style type="text/css"> .Subheader { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: large; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; color: #000000; text-decoration: none; } .Header { font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: x-large; font-weight: bold; font-style: normal; font-variant: normal; text-transform: capitalize; text-decoration: none; } .auto-style1 { text-align: center; } </style> <link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" /> <style type="text/css"> a.fancybox img { border: none; box-shadow: 0 1px 7px rgba(0,0,0,0.6); -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.fancybox:hover img { position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03); } .auto-style2 { border-style: solid; border-width: 2px; } </style> </head> <body class="Subheader" style="background-image: url('bg.png')"> <p><br /> </p> <table align="center" style="width: 940px" bgcolor="white" class="auto-style2"> <tr> <td style="height: 33px"><span class="Header">HEADER IMAGE + LOGO</span></td> </tr> <tr> <td style="height: 33px"> <table style="width: 100%"> <tr> <td class="auto-style1" style="width: 17%"> <a href="#prediastia">ПРЕДЯСТИЯ</a></td> <td class="auto-style1" style="width: 17%"><a href="#osnovni"> ОСНОВНИ</a></td> <td class="auto-style1" style="width: 17%"><a href="#deserti"> ДЕСЕРТИ</a></td> <td class="auto-style1" style="width: 17%"><a href="#napitki"> НАПИТКИ</a></td> <td class="auto-style1" style="width: 17%"><a href="order.html">ПОРЪЧАЙ</a></td> <td class="auto-style1" style="width: 15%">КОНТАКТИ</td> </tr> </table> </td> </tr> <tr> <td> <form name="contactform" method="post" action="send_form_email.php"> <table width="750px" align="center"> <tr> <td valign="top" width="40%"> <label for="first_name">ГРЪЦКА САЛАТА</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="gruckasalata" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="grucka-salata.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top" width="40%"> <label for="first_name">МУСАКА</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="musaka" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="musaka.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top" width="40%"> <label for="first_name">ПЪЛНЕНИ ЧУШКИ</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="pulnenichushki" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="palneni_chushki26.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top" width="40%"> <label for="first_name">СВИНСКО СЪС ЗЕЛЕ</label> </td> <td valign="top" width="30%"> <input type="number" placeholder="0" name="svinskosuszele" maxlength="5" size="5"> </td> <td width="30%"><img class="fancybox" alt="" height="42" src="zele-sus-svinsko.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" /> </td> </tr> <tr> <td valign="top"> <label for="first_name">Name *</label> </td> <td valign="top"> <input type="text" name="name" maxlength="50" size="30"> </td> </tr> <tr> <td valign="top"> <label for="email">Email Address *</label> </td> <td valign="top"> <input type="text" name="email" maxlength="80" size="30"> </td> </tr> <tr> <td valign="top"> <label for="telephone">Telephone Number *</label> </td> <td valign="top"> <input type="text" name="telephone" maxlength="30" size="30"> </td> </tr> <tr> <td valign="top"> <label for="telephone">Address *</label> </td> <td valign="top"> <textarea name="address" maxlength="1000" cols="45" rows="6"></textarea> </td> </tr> <tr> <td valign="top"> <label for="telephone">Postal Code *</label> </td> <td valign="top"> <input type="text" name="postalcode" maxlength="30" size="30"> </td> </tr> <tr> <td valign="top"> <label for="comments">Comments</label> </td> <td valign="top"> <textarea name="comments" maxlength="1000" cols="45" rows="6"></textarea> </td> </tr> <tr> <td colspan="2" style="text-align:center"> <input type="submit" value="Submit"> </td> </tr> </table> </form></td> </tr> <tr> <td><span class="Header">FOOTER</span></td> </tr> </table> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script> <script type="text/javascript"> $(function($){ var addToAll = false; var gallery = false; var titlePosition = 'inside'; $(addToAll ? 'img' : 'img.fancybox').each(function(){ var $this = $(this); var title = $this.attr('title'); var src = $this.attr('data-big') || $this.attr('src'); var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title); $this.wrap(a); }); if (gallery) $('a.fancybox').attr('rel', 'fancyboxgallery'); $('a.fancybox').fancybox({ titlePosition: titlePosition }); }); $.noConflict(); </script> </body> </html> and the PHP: PHP Code: <?php if(isset($_POST['email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "georgi.pepelyankov@gmail.com"; $email_subject = "COMIDA GREGA ORDER"; function died($error) { // your error code can go here echo "We are very sorry, but there were error(s) found with the form you submitted. "; echo "These errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "Please go back and fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['telephone']) || !isset($_POST['address']) || !isset($_POST['postalcode']) || !isset($_POST['gruckasalata']) || !isset($_POST['musaka']) || !isset($_POST['pulnenichushki']) || !isset($_POST['svinskosuszele']) || !isset($_POST['comments'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $name = $_POST['name']; // required $gruckasalata = $_POST['gruckasalata']; // not required $musaka = $_POST['musaka']; // not required $pulnenichushki = $_POST['pulnenichushki']; // not required $svinskosuszele = $_POST['svinskosuszele']; // not required $email_from = $_POST['email']; // required $telephone = $_POST['telephone']; // required $address = $_POST['address']; // required $postal_code = $_POST['postalcode']; // required $comments = $_POST['comments']; // not required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "ГРЪЦКА САЛАТА: ".clean_string($gruckasalata)."\n"; $email_message .= "МУСАКА: ".clean_string($musaka)."\n"; $email_message .= "ПЪЛНЕНИ ЧУШКИ: ".clean_string($pulnenichushki)."\n"; $email_message .= "СВИНСКО СЪС ЗЕЛЕ: ".clean_string($svinskosuszele)."\n"; $email_message .= "Name: ".clean_string($name)."\n"; $email_message .= "Email: ".clean_string($email_from)."\n"; $email_message .= "Telephone: ".clean_string($telephone)."\n"; $email_message .= "Address: ".clean_string($address)."\n"; $email_message .= "Postal Code: ".clean_string($postalcode)."\n"; $email_message .= "Comments: ".clean_string($comments)."\n"; // create email headers $headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_from."\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); ?> <!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> Please, can you help me integrate a total of all the selected prices to be displayed somewhere in the form? Thanks in advance! Regards, Georgi 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> I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post"> <table cellspacing="5" style="border: 2px solid black;"> <tr> <td valign="top"> <table cellspacing="5"> <tr> <td>*First name</td> <td align="right"><span id="valid_one"></span></td> <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td> </tr> <tr> <td align="left">*Last name</td> <td align="right"><span id="valid_two"></span></td> <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td> </tr> <tr> <td align="left">*Email address</td> <td align="right"><span id="result"></span></td> <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td> </tr> <tr> <td align="left">*Phone number</td> <td align="right"><span id="valid_three"></span></td> <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td> </tr> <tr> <td align="left">*City/Town</td> <td align="right"><span id="valid_four"></span></td> <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td> </tr> <tr> <td></td> <td></td> <td> <select name="s"> <option value="AL">Alabama <option value="AK">Alaska <option value="AZ">Arizona <option value="AR">Arkansas <option value="CA">California <option value="CO">Colorado <option value="CT">Connecticut <option value="DE">Delaware <option value="FL">Florida <option value="GA">Georgia <option value="HI">Hawaii <option value="ID">Idaho <option value="IL">Illinois <option value="IN">Indiana <option value="IA">Iowa <option value="KS">Kansas <option value="KY">Kentucky <option value="LA">Louisiana <option value="ME">Maine <option value="MD">Maryland <option value="MA">Massachusetts <option value="MI">Michigan <option value="MN">Minnesota <option value="MS">Mississippi <option value="MO">Missouri <option value="MT">Montana <option value="NE">Nebraska <option value="NV">Nevada <option value="NH">New Hampshire <option value="NJ">New Jersey <option value="NM">New Mexico <option value="NY">New York <option value="MC">North Carolina <option value="ND">North Dakota <option value="OH">Ohio <option value="OK">Oklahoma <option value="OR">Oregon <option value="PA">Pennsylvania <option value="RI">Rhode Island <option value="SC">South Carolina <option value="SD">South Dakota <option value="TN">Tennessee <option value="TX">Texas <option value="UT">Utah <option value="VT">Vermont <option value="VA">Virginia <option value="WA">Washington <option value="WV">West Virginia <option value="WI">Wisconsin <option value="WY">Wyoming </select> </td> </tr> <tr> <td> <br> </td> </tr> <tr> <td></td> <td></td> <td><span id="error"></span></td> </tr> <tr> <td valign="top">*Anti-Spam Verification</td> <td></td> <td id="reCaptcha"></td> </tr> </table> </td> <td valign="top"> <table cellspacing="5"> <tr> <td align="left">*Affiliation</td> <td align="right"><span id="valid_five"></span></td> <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td> </tr> <tr> <td align="left">*Research Area:</td> <td align="right"><span id="valid_six"></span></td> <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td> </tr> <tr> <td valign="top" align="left">*Research Overview</td> <td align="right"><span id="valid_seven"></span></td> <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td> </tr> <tr> <td></td> <td></td> <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td> </tr> <tr> <td align="left">*Talk Availability</td> <td></td> <td> <input type="radio" name="ta" value="In person">In person <input type="radio" name="ta" value="Online">Online <input type="radio" name="ta" value="Both" checked>Both </td> </tr> <tr> <td align="left" valign="top">Links</td> <td></td> <td> <table id="linkTable" border="0"> <td><input type="text" style="width: 320px;" name="link"></td> <td><div id="result"></div></td> </table> </td> <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td> </tr> <tr> <td></td> <td><span style="color: red;"></span></td> </tr> </table> </td> </tr> </table> <br /> <input type="submit" id="submit" name="submit" value="Submit Form"> </form> Javascript file: Code: /* * script.js - ajax and table functions */ var xmlHttp; // global instance of XMLHttpRequest var xmlHttp2; // second for captcha functions var validAjax = new Boolean(); var validCaptcha = new Boolean(); var valid_one = new Boolean(); var valid_two = new Boolean(); var valid_three = new Boolean(); var valid_four = new Boolean(); var valid_five = new Boolean(); var valid_six = new Boolean(); var valid_seven = new Boolean(); function init() { showRecaptcha('reCaptcha'); // Separate booleans for AJAX funcs validAjax = false; validCaptcha = false; // Booleanse for fields that don't require servlet validation valid_one = false; valid_two = false; valid_three = false; valid_four = false; valid_five = false; valid_six = false; valid_seven = false; } function showRecaptcha(element) { Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field}); } function validate_form() { if (valid_one && valid_two && valid_three && valid_four && validEmail) { startCaptchaRequest(); if (validCaptcha) { return true; } } else { alert("Submission contains errors. Please fill out all required fields before submitting."); return false; } } function validate_one() { if (document.getElementById("fn").value == 0) { valid_one = false; document.getElementById("valid_one").innerHTML = "No"; } else { valid_one = true; document.getElementById("valid_one").innerHTML = ""; } } function validate_two() { if (document.getElementById("ln").value == 0) { valid_two = false; document.getElementById("valid_two").innerHTML = "No"; } else { valid_two = true; document.getElementById("valid_two").innerHTML = ""; } } function validate_three() { if (document.getElementById("pn").value == 0) { valid_three = false; document.getElementById("valid_three").innerHTML = "No"; } else { valid_three = true; document.getElementById("valid_three").innerHTML = ""; } } function validate_four() { if (document.getElementById("c").value == 0) { valid_four = false; document.getElementById("valid_four").innerHTML = "No"; } else { valid_four = true; document.getElementById("valid_four").innerHTML = ""; } } function validate_five() { if (document.getElementById("affl").value == 0) { valid_five = false; document.getElementById("valid_five").innerHTML = "No"; } else { valid_five = true; document.getElementById("valid_five").innerHTML = ""; } } // //function validate_six() { // if (document.getElementById("ra").value == 0) { // valid_six = false; // document.getElementById("valid_six").innerHTML = "No"; // } // else { // valid_six = true; // document.getElementById("valid_six").innerHTML = ""; // } //} // //function validate_seven() { // if (document.getElementById("ro").value == 0) { // valid_seven = false; // document.getElementById("valid_seven").innerHTML = "No"; // } // else { // valid_seven = true; // document.getElementById("valid_seven").innerHTML = ""; // } //} function addLink(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; element1.name = "link" + rowCount; element1.style.width = "320px"; cell.appendChild(element1); } function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } function createXmlHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } } function startRequest() { createXmlHttpRequest(); var param1 = document.getElementById('mailfield').value; if (param1 == "") { validEmail = false; document.getElementById("result").innerHTML = "Blank"; } else { xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true) xmlHttp.onreadystatechange = handleStateChange; xmlHttp.send(null); } } function handleStateChange() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var message = xmlHttp.responseXML .getElementsByTagName("valid")[0] .childNodes[0].nodeValue; if (message == "Unregistered") { validEmail = true; document.getElementById("result").style.color = "green"; } else { validEmail = false; document.getElementById("result").style.color = "red"; } document.getElementById("result").innerHTML = message; } else { alert("Error checking e-mail address - " + xmlHttp.status + " : " + xmlHttp.statusText); } } } function createCaptchaRequest() { if(window.ActiveXObject) { xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp2=new XMLHttpRequest(); } } function startCaptchaRequest() { alert('made it to captcha requeswt'); createCaptchaRequest(); var param1 = Recaptcha.get_challenge(); var param2 = Recaptcha.get_response(); xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true) xmlHttp2.onreadystatechange = handleStateChangeCaptcha; xmlHttp2.send(null); } function handleStateChangeCaptcha() { if(xmlHttp2.readyState==4) { if(xmlHttp2.status==200) { var message = xmlHttp2.responseXML .getElementsByTagName("result")[0] .childNodes[0].nodeValue; if (message == "Valid") { alert("captcha valid"); validCaptcha = true; } else { document.getElementById("error").innerHTML = message; validCaptcha = false; } } else { alert("Error checking captcha validity - " + xmlHttp2.status + " : " + xmlHttp2.statusText); } } } Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html> <head> <script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "textareas", theme : "simple" }); </script> <script language="javascript"> function MM_openBrWindow(theURL,winName,features) { window.open(theURL,winName,features); } function err_check(){ var email = document.getElementById('to_email').value; if(email.length==0){ alert('Please Enter Email Address'); return false; } var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } email = document.getElementById('cc_email').value; if(email.length != 0){ var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } } var answer = confirm ("Send E-Mail?"); if (!answer){ return false; } } </script> <!-- /TinyMCE --> <style type="text/css"> body, table, td, th{ background-color:#CCCCCC; font-family: Arial; font-size:14px; } .que{ font-weight:bold; } </style> </head> <body> <form method="post" enctype="multipart/form-data"> <?php include 'library/database.php'; include 'library/opendb.php'; $query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error()); $row = mysql_fetch_row($query); $from_email = $row[0]; $from_person = $row[1]; $from_mobile = $row[2]; $query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error()); $row = mysql_fetch_row($query); $cusid = $row[0]; $query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error()); $row = mysql_fetch_row($query); $toer = $row[0]; include 'library/closedb.php'; ?> <table width="100%" border="0"> <tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%"> <?php echo "<br><br><br>" . $from_person . "<br>" . $from_mobile; ?> </textarea> </td></tr> </table> </form> </body> </html> I know im not supposed to use this for someone to write my codes for me but i need help with something the page AtreusComputers is what im working on at the bottom of the page is a price box which i might move to the side or the top later but right now just trying to get it to work here is my html page code Code: <html> <head> <title>ACS - Custom Computers</title> <link rel="stylesheet" href="script.css" /> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-19288524-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="scripttest.js"> </script> </head> <body bgcolor="#000000" text="#ffffff"> <center> <P align=center ><a href="http://www.atreuscomputerservices.com"><img src="webACSlogofinal.bmp" border="0"></a></P> <P align=center ><FONT color="#ffffff" size=6 face="Palatino Linotype" ><STRONG><EM>Computer Customization</EM></STRONG></FONT></P> </center> <table width="100%" border="0"> <tr> <td width="10%"></td> <td width="457px"><center><img src="ACSbanner.bmp" width="457px" height="100%" /></center></td> <td width="40%"></td> <td width="20%"> <style type="text/css"> @import url(http://www.google.com/cse/api/branding.css); </style> <div class="cse-branding-right" style="background-color:#000000;color:#FFFFFF"> <div class="cse-branding-form"> <form action="http://atreuscomputers.99k.org/google.html" id="cse-search-box"> <div> <input type="hidden" name="cx" value="partner-pub-3415227737255042:y4oouh-9ccq" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </div> </form> </div> <div class="cse-branding-logo"> <img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" /> </div> <div class="cse-branding-text"> Custom Search </div> </div> </td> </tr> <tr> <td align="center" valign="top"> <script type="text/javascript"><!-- google_ad_client = "pub-3415227737255042"; /* 160x600, created 10/24/10 */ google_ad_slot = "6248958700"; google_ad_width = 160; google_ad_height = 600; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </td> <td width="457px" valign="top" bgcolor="#FFFFFF"><div id="header"><center> <img id="caseimg" src="start.jpg" /></div> </td> <td> <center> <form action="#"> <h1>COMPONENTS</h1> <select id="caseselect" style="width:625px" name="Items" class="select" onchange="swapImage()"; "priceUpdate()";> <option id="49.99" value="start.jpg">Case</option> <option id="49.99" value="COOLER MASTER Elite 310red.jpg">COOLER MASTER Elite 310 Red ($49.99)</option> <option id="49.99" value="COOLER MASTER Elite 310blue.jpg">COOLER MASTER Elite 310 Blue ($49.99)</option> <option id="49.99" value="COOLER MASTER Elite 310orange.jpg">COOLER MASTER Elite 310 Orange ($49.99)</option> <option id="49.99" value="COOLER MASTER Elite 310silver.jpg">COOLER MASTER Elite 310 Silver ($49.99)</option> </select> <br /><br /> <select id="powersupply" style="width:625px"> <option id="0" value="">Power Supply</option> </select><br /><br /> <select id="motherboard" style="width:625px"> <option id="0" value="">Motherboard</option> </select><br /><br /> <select id="cpu" style="width:625px"> <option id="0" value="">CPU</option> </select><br /><br /> <select id="cooling" style="width:625px"> <option id="0" value="">Cooling</option> </select><br /><br /> <select id="memory" style="width:625px"> <option id="0" value="">Memory</option> </select><br /><br /> <h1>AUDIO & VIDEO</h1> <select id="gpu" style="width:625px"> <option id="0" value="">Video</option> </select><br /><br /> <select id="monitor" style="width:625px"> <option id="0" value="">Monitor</option> </select><br /><br /> <select id="audio" style="width:625px"> <option id="0" value="">Audio</option> </select><br /><br /> <select id="cooling" style="width:625px"> <option id="0" value="">Speakers</option> </select><br /><br /> <h1>STORAGE & MEDIA</h1> <select id="hd1" style="width:625px"> <option id="0" value="">Hard Drive 1</option> </select><br /><br /> <select id="hd2" style="width:625px"> <option id="0" value="">Hard Drive 2</option> </select><br /><br /> <select id="od1" style="width:625px"> <option id="0" value="">Optical Drive 1</option> </select><br /><br /> <select id="od2" style="width:625px"> <option id="0" value="">Optical Drive 2</option> </select><br /><br /> <select id="mediaread" style="width:625px"> <option id="0" value="">Media Reader</option> </select><br /><br /> <h1>COMMUNICATION & NETWORKING</h1> <select id="netadapt" style="width:625px"> <option id="0" value="">Network Adapter</option> </select><br /><br /> <select id="wifi" style="width:625px"> <option id="0" value="">WiFi Adapter</option> </select><br /><br /> <select id="router" style="width:625px"> <option id="0" value="">Router</option> </select><br /><br /> <select id="modem" style="width:625px"> <option id="0" value="">Modem</option> </select><br /><br /> <select id="usb" style="width:625px"> <option id="0" value="">USB Ports</option> </select><br /><br /> <select id="bt" style="width:625px"> <option id="0" value="">Bluetooth</option> </select><br /><br /> <h1>SOFTWARE</h1> <select id="os" style="width:625px"> <option id="0" value="">Operating System</option> </select><br /><br /> <select id="productsoftware" style="width:625px"> <option id="0" value="">Productivity Software</option> </select><br /><br /> <select id="Secure" style="width:625px"> <option id="0" value="">Security Software</option> </select><br /><br /> <h1>ACCESORIES</h1> <select id="keyboard" style="width:625px"> <option id="0" value="">Keyboard</option> </select><br /><br /> <select id="mouse" style="width:625px"> <option id="0" value="">Mouse</option> </select><br /><br /> <select id="netcable" style="width:625px"> <option id="0" value="">Network Cable</option> </select><br /><br /> <select id="cam" style="width:625px"> <option id="0" value="">Web Cam</option> </select><br /><br /> <select id="surge" style="width:625px"> <option id="0" value="">Surge Protector</option> </select><br /><br /> </form><br /><br /> <input type="text" id="total" value="?" width="625px"></input> </center> </td> <td valign="top" align="center"> <script type="text/javascript"><!-- google_ad_client = "pub-3415227737255042"; /* 300x250, created 10/24/10 */ google_ad_slot = "4027168799"; google_ad_width = 300; google_ad_height = 250; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></td> </tr> </table> </body> </html> and here is my js code Code: window.onload = initForm; function swapImage(){ var image = document.getElementById("caseimg"); var dropd = document.getElementById("caseselect"); image.src = dropd.value; } function priceUpdate() { var itemprice = document.getElementById("caseselect"); var box = document.getElementById("total") box.value = itemprice.id; } *PARTS IN RED ARE WHAT IM WORKING ON I'm a long time lurker on here just barely created an account to ask this question. I work at a call center, and we use different webapps to fill out tickets. One I've used for a long time allows dynamically updating forms with javascript. I have a whole bunch of bookmarked javascript injections like: Code: javascript:if((top.detail.findObj('X31').value="Inquiry")!=""); That code will fill out most everything in that ticket, leaving me to fill in the details. I have one of those for all of the most common tickets, and can create and finish a ticket in less than 30 seconds when it takes others 3-4 minutes. I recently switched to a different system and I'm having trouble with my code. I'm a noob at javascript for sure, but I'm not new to programming. Anyway any pointers would be nice. The system we use doesn't allow me to see the source... I'm not sure how to explain it. It loads everything in a frame. In chrome I can right click then inspect element and get the ID but it the above javascript doesn't work. Examples: Old app source ex: Code: <label for="X31">Category:</label> was all i needed new app(before the body code is just code for the login form, etc): Code: <body onLoad="startit()" onUnload="stopit()"> </body> <div align="center" valign="center" id="LoadMessageID" style="position: relative; top:40%; color:#0069A5; font-size:100% ;"> <img src="/arsys/shared/images/Progress_NonModal-circle.gif" alt="wait image"/> Loading... </div> </html> formloader: Code: <form name="form1" action="/arsys/forms/bmcitsm/HPD:Incident+Management+Console/Default+User+View+(Support)/?cacheid=a22a36a8" method="post"> example of inspect element in chrome (something i want to change with javascript injection): Code: <input id="arid301602600" type="text" class="text " style="top:0; left:0; width:225; height:21;" readonly=""> Hallo. I am a total newbie to JavaScript coding, but I would like to have a price calculator on our internal website. It should calculate the square meter of the product and then multiply it with the square meter price, multiply it with quantity and then plus it with the startup cost. But... if the square meter extend 20 m2 the square meter price should be lower, and also lower when it hit 50 m2. And at 100 m2 it should write that you have to contact sales department. Can this be done with JavaScript? Here is an example: 6 pieces of 2 x 4 meter. 2x4 = 8 m2 6x8 = 48 total m2 48 m2 x price2 x startup = total price I really hope that someone can help me... //Daniel I have a form that is working just fine the only thing is that I need to add a quantity field that will update the price. Can anyone help me with this please. I am not that good at javascript as you can see. I have gotten snippet from here and there to be able to create this form. Here is the code that I have at he moment: Code: <script type="text/javascript"> florida_tax_rate = .07; function update_price(radio) { price = parseFloat(radio.getAttribute("price")); shipping = parseFloat(document.getElementById("shipping").innerHTML); subtotal = document.getElementById("subtotal"); grand_total = document.getElementById("grand_total"); subtotal.innerHTML = price; grand_total.innerHTML = (shipping + price).toFixed(2); update_tax(); } function update_tax() { menu = document.getElementsByName("ShippingState")[0]; state = menu.value; is_florida = state.match(/^(florida|fl)$/i); price = parseFloat(document.getElementById("subtotal").innerHTML); shipping = parseFloat(document.getElementById("shipping").innerHTML); real_subtotal = price + shipping; taxes = 0.00; if (is_florida) { taxes = real_subtotal * florida_tax_rate; } grand_total = document.getElementById("grand_total"); document.getElementById("taxes").innerHTML = taxes.toFixed(2); grand_total.innerHTML = (real_subtotal + taxes).toFixed(2); } </script> <form> <input onchange="update_price(this);" type="radio" name="package" value="non-chamber" price="450.00" /> Non-Chamber Member (Qty: 0-5)<br /> <input name="non-chamber qty" type="text" id="non-chamber qty" value="" size="5" maxlength="999" /> Please Enter Your Quantity <br /> <input onchange="update_price(this);" type="radio" name="package" value="chamber" price="425.00" /> Chamber Member (Qty: 0-5)<br /> <input name="chamber qty" type="text" id="chamber qty" value="" size="5" maxlength="999" /> Please Enter Your Quantity <br /> <input onchange="update_price(this);" type="radio" name="package" value="standard" price="400.00" /> Bulk Orders (Qty: Over 5)<br /> <input name="bulk qty" type="text" id="bulk qty" value="" size="5" maxlength="999" /> Please Enter Your Quantity <br /> <br /><br /> <div style="display:none;"><select onchange="update_tax();" name="ShippingState"> <option value="Florida" selected="selected">Florida</option> </select></div> <br /> Subtotal: $<span id="subtotal">0.00</span><br /> <div style="display:none;">Shipping: $<span id="shipping">0.00</span><br /></div> Taxes: $<span id="taxes">0.00</span><br /> Grand Total: $<span id="grand_total">0.00</span><br /> <br /> <img src="http://www.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" onClick="document.paypalPayment.submit();" /> <input type="hidden" name="process" id="process" value="1" /> </form> Thanks I am currently using a price calculator - although it's really not a calculator; I have to enter every price manually. Currently, it works in half inch increments. I need it to do two things that it doesn't do currently: 1) Allow the customer to enter a dimension in 1/4 inch increments (1/8 would be even better, but I'm not requesting a miracle) 2) Make the result automatically round up to the nearest 1/2 inch Page containing calculator External file: sizecalc.js Hello guys, I'm having some problems with jquery.. What I'm trying to do is, a jquery script to show in real time the total price. I got this: Code: <li>Users</li> <li> <select name="users" id="users"> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value='4'>4</option> <option value='5'>5</option> <option value='6'>6</option> <option value='7'>7</option> <option value='8'>8</option> <option value='9'>9</option> <option value='10'>10</option> </select> </li> <li>Months</li> <li> <select name="months" id="months"> <option value='1'>1 Month</option> <option value='2'>2 Months</option> <option value='3'>3 Months</option> <option value='4'>4 Months</option> <option value='5'>5 Months</option> <option value='6'>6 Months</option> <option value='7'>7 Months</option> <option value='8'>8 Months </option> <option value='9'>9 Months</option> <option value='10'>10 Months</option> <option value="11">11 Months</option> <option value="12">12 Months</option> </select> </li> <div class="grand_total"> <h4 class="colr">Price</h4> <ul> <li class="price">$0.50</li> </ul> </div> 1 Month and 1 User price should be 0.50 USD +1 Month = + 0.50 USD + 1 User = + 0.50 USD Example: 5 Users + 2 Months = 3.50 USD I wanna make the jquery to show the total price at li class="price" Sorry, I'm newbie at jquery. Anyone could help me please? Thank you. Hi friends, I am collecting and selling football stickers. Yes, World Cup 2010 stickers. The album have 640 distinct numbers. Everytime I receive a list of that stickers to buy by the user I would need ckeck out the price list because some stickers have different price from another. For example Stickers numbers: 00, 000, 1, 2, 3, 4, 5 and 29 costs 3,00. The stickers number 31, 50, 69, 88, 107, 126, 202, 411, 392, 544 and 637 costs = 1,00. The stickers 30, 49, 68, 87, 106, 125 costs 0,25 The sticker from 32 to 48 51 to 67 70 to 86 89 to 105 (and so on) costs 0,25 I would be glad if someone could help me for building a script which read from a textarea numbers contents and create a "short report" with the stickers numbers followed by its price and total sum. Bob Kuspe Hello, I am having a little issue with creating an updating price script for my website. I tried to look at examples like those at Apple, Hp, Dell, and other sites that have the kind of script I am looking to create. The way I have my page is that it grabs data from my database when someone clicks my product, after that they go to the customize the product page. The price is supposed to change as they click and remove options. I just need a little help on where to start and how to update the price. I know Javascript is the coding but I have been struggling with it. Examples of the script can be found on the link below. There is also a snippet of my code I am working with.. Thanks in advance for some help. http://configure.us.dell.com/dellsto...en&s=dhs&cs=19 Code: <script type="text/javascript"> //<![CDATA[ window.onload = setupScripts; function setupScripts() { var anOrder1 = new OrderForm(); } //]]> </script> <form id="Options"> <div style="color:#F00"><?=$msg?></div> <?php if(is_array($_SESSION['cart'])){ $max=count($_SESSION['cart']); for($i=0;$i<$max;$i++){ $pid=$_SESSION['cart'][$i]['productid']; $pname=get_product_name($pid); $price=get_price($pid); $pdes=get_desc($pid); $pdim=get_dimen($pid); $pweight=get_weight($pid); $pcode=get_code($pid); $picture=get_pic($pid); } } ?> <table width="850" border="0" cellpadding="8"> <tr> <td width="50" align="left" colspan="2"><font color="#FF9933" size="+5" style="letter-spacing:20px;" ><?=$pname?></font><br /> <img src="<?=$picture?>" border="2" height="300" width="300"/> </td> <td width="275" align="left" colspan="2"><b>Description:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdes?></font><br /><br /> <b>Product Code:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pcode?></font><br /><br /> <b>Dimensions:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdim?></font><br /><br /> <b>Weight:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pweight?></font><br /><br /> <b>Price:</b> <big style="color:green">$</big><font style="letter-spacing:4px; word-spacing:7px;"><?=$price?></font><br /><br /> </td> </tr> <tr> <td align="left" colspan="2"><img src="<?=$picture?>" border="2" height="50" width="50"/> <img src="<?=$picture?>" border="2" height="50" width="50"/> </td> </tr> <tr> <td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Fabric</font><hr color="#999999" size="5" width="400" align="left"/> (Please describe the type of fabric you would like and we will try and match it. If you have a picture or link of a fabric style, please send along with item request.) </td> <td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Handles</font><hr color="#999999" size="5" width="400" align="left"/> (These handles are great for the children and adult type products) </td> </tr> <tr> <td colspan="2" align="left"> Check this box if you have your own fabric and would like to send to us. <input name="own" type="checkbox" value="Own" id="chk0" /> <span id="txtPrice0">-5</span> <input type="text" id="txtTotal" size="8" value="<?=$price?>"/> <br /> Hi all, im looking for some help with some javascript if thats ok. I am building a system for creating a booklet. I want the user to be able to select the quantity of booklets they require. (eg 50, 75, 100, 125) Then also select the number of pages each booklet will require. (eg. 4, 8, 12) both will be select drop down boxes. I would like the price to be calculated based on the selections and displayed on the page. It will be total price not price per booklet. This is how i have built up the prices in php. if($b_maxpages == '4' && $b_quantity == '50') { $amount = "95.00"; } elseif($b_maxpages == '4' && $b_quantity == '75') { $amount = "103.00"; } elseif($b_maxpages == '4' && $b_quantity == '100') { $amount = "115.00"; } elseif($b_maxpages == '4' && $b_quantity == '125') { $amount = "132.00"; } elseif($b_maxpages == '8' && $b_quantity == '50') { $amount = "147.00"; } elseif($b_maxpages == '8' && $b_quantity == '75') { $amount = "171.00"; } elseif($b_maxpages == '8' && $b_quantity == '100') { $amount = "194.00"; } elseif($b_maxpages == '8' && $b_quantity == '125') { $amount = "218.00"; } elseif($b_maxpages == '12' && $b_quantity == '50') { $amount = "190.00"; } elseif($b_maxpages == '12' && $b_quantity == '75') { $amount = "222.00"; } elseif($b_maxpages == '12' && $b_quantity == '100') { $amount = "255.00"; } elseif($b_maxpages == '12' && $b_quantity == '125') { $amount = "288.00"; } I will also need the selected data to be posted once the form is submitted. Cheers vince My name is matt a very fed up up person at the min iam building a website my self for my print and design business, and it has come to the part where i need to list my products and buy now options etc. Well to be frank i dont have a clue how to do it so i dont have reams of pages of boxes etc. So could you help me (point me in the right direction i saw some of your tutorials and hope you can help here is the page with business cards on this one is ok because there is only 6 options to chose in sense of qty. but when it comes to LEAFLETS ITS HARD COS YOU HAVE DIFFERENT SIZE QTY PRICE. Iam using a cart software that links to google checkout for payment side If there is anything you can suggest i would be greatfull Sorry this is all over the place been up all night Matthew Cook Hi all. I hope that everyone is fine and doing well. This is something of an annual visit for me. You guys helped me enormously with the code below. It is a price quote generator that takes a number (entered by the client) and depending on the package selected, produces a price quote. As I said, it works really well, but it's time for me to expand my business overseas. At the moment, I display the price as a single currency, but I would like for clients to be able to select (maybe from a drop down list in the answer field) any one of 4 different currencies (i.e., GBP, USD, EURO, MYR). The different exchange rates don't need to be up to the minute accurate. I'm quite happy to go in to the code and update them weekly or as required. I have attempted to research different ways of doing this, but as my needs are quite unusual and my brain really can't wrap around the ins and outs of java script, i'm here again begging with my cap in hand for help. To see this code in action as it stands, please go to www.grammarproofing.com Code: <head> <!--quote generator --> <script type="text/javascript"> function update(){ var price = document.getElementById("Package").value; var words = document.getElementById("words").value; if (words != "") { words = parseInt(words); if (isNaN (words)) { alert ("Please enter the number of words in figures"); document.getElementById("words").value = ""; return false; } } var wordsOver2000 = words-2000; if (wordsOver2000 <0) {wordsOver2000 = 0} words = words - wordsOver2000; var Tprice = ((price * words) + (price * .95 * wordsOver2000)).toFixed(2) ;document.getElementById("Totprice").value = Tprice; document.getElementById("Totprice2").innerHTML = "Your Quote Total Is: MYR" + Tprice } </script> <!--end quote generator --> </head> Code: <body> <!--start quote generator --> <div class="quote" id="quote"> <select name="Package" id = "Package" onchange = "update()"> <option value="0.052">STUDENTS THE 11th HOUR PACKAGE</option> <option value="0.041">STUDENTS EXPRESS PACKAGE</option> <option value="0.035" selected="selected">STUDENTS WORK in PROGRESS PACKAGE</option> </select> x <input type="text" id="words" onchange="update()" value="" /> WORDS<br /> = MYR <input type = "text" id = "Totprice" readonly /> </div> <!--end quote generator --> </body> Thanks in advance for any help offered. Regards as always, Phil |