JavaScript - Javascript/html Order Form Problem
Hello,
I am nearing completion on the modification of a Javascript/Html Order Form. The problem arises when I click on 'Submit Order' after filling in details and choosing a product. For some reason, the pop up box shows the correct product, but it shows the $ Total from the previous box in the table. Thank you all for your time in looking into this: Code: <html> <head> <title>JS Order</title> <script language="JavaScript"> <!-- Start hiding from older browsers. // This function displays the nag screen when a field hasn't been filled in. function nag(form, field, x) { ufield=field.toUpperCase(); alert("Details missed " + ufield + "!" + "\n\nPlease fill in the field and submit the form again."); form.elements[x].focus(); } // This function is used to round the tax amount to the nearest hundreths. function roundPrice(price) { // save a copy of the price in case it is an even dollar amount. var workPrice = price; // Make the price a string by adding a string 0 to the end. workPrice += "0"; // Find out where the decimal point is. var pointIndex = workPrice.indexOf(".",0); // If there is a decimal point now check to see if it needs to be rounded up. if (pointIndex >= "0") { // Set an index for the thousands digit. var thousands = pointIndex +3; // if the third number past the decimal point is greater than or // equal to 5, then we need to round up the hundredth digit. if (workPrice.charAt(thousands) >= "5") { // Turn the price into a number. workPrice=parseFloat(price); // Round up the price. workPrice=workPrice + .01; // Turn it back into a string. workPrice=workPrice + "0"; // Cut off the thousands on down. rPrice = workPrice.substring(0,thousands); } else { // We didn't need to round the price up so cut off the // thousands on down and return the price rPrice = workPrice.substring(0,thousands); } // Its an even dollar amount so just put on the .00 on the end. } else { rPrice = price + ".00"; } // Now return the rounded price. return rPrice; } // This function calculates the form. function updatePrice() { // Reset the subtotal price var addPrice = 0; // Reset the running total prices. var nowPrice = 0; // Reset the nubmer of part ordered. var partcount = 0; // Step through each element in the form. for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++) { // If the form element has "qty" in the name then we need to process it. if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty') { // If the item has a quantity of not 0, then we need to process it. if (self.document.forms[0].elements[i].value != 0) { // Locate the cost costIndex = i + 1; // Increment the part counter. partcount++; // Get the actual value for the quantity. nowQty = eval(self.document.forms[0].elements[i].value); // Get the cost of the item. nowPrice = eval(self.document.forms[0].elements[costIndex].value); // Calculate the extended cost (i.e., quanty * cost). nowPrice = eval(nowPrice * nowQty); // Add to the subtotal. addPrice += nowPrice; } } } // Round off the subTotal price. subTotal=roundPrice(addPrice); // Put the sub total price into the form. self.document.forms[0].subtot.value = subTotal; // Figure the tax. tax = parseFloat(self.document.forms[0].taxrate.value * addPrice); // Round off the tax price. totalTax = roundPrice(tax); // Put the total tax into the form. self.document.forms[0].totaltax.value = totalTax; // Start figuring the total including tax. // Turn the price string into a number. subPrice = parseFloat(addPrice); // Turn the tax string into a number. addTax = parseFloat(totalTax); // Add the tax and subtotal to get the total price. totalPrice = (addTax + subPrice); // Round the total price. finalPrice = roundPrice(totalPrice); // Update the form with the total cost. self.document.forms[0].cost.value = finalPrice; // Update the form with the number of line items. self.document.forms[0].items.value = partcount; } function orderIt(form) { // If the order is zero, display a message. if (form.cost.value == "0.00") { alert("You have not ordered anything. Please select an item and re-submit your order.") } else { if (form.elements[0].value == "") { nag(form, form.elements[0].name,0) } else if (form.elements[1].value == "") { nag(form, form.elements[1].name, 1) } else if (form.elements[2].value == "") { nag(form, form.elements[2].name, 2) } else if (form.elements[4].value == "") { nag(form, form.elements[4].name, 4); } else if (form.elements[5].value == "") { nag(form, form.elements[5].name, 5); } else if (form.elements[6].value == "") { nag(form, form.elements[6].name, 6); } else if (form.elements[10].value == "") { nag(form, form.elements[10].name, 10); } else { var message = "You have ordered the following items:\n"; message = message + "Qty\tCost\tDescription\n"; // Step through each element in the form. for (i = 0; i < parseInt(self.document.forms[0].elements.length); i++) { // If the form element has "qty" in the name then we need to process it. if (self.document.forms[0].elements[i].name.substring(0,3) == 'qty' && self.document.forms[0].elements[i].value !=0) { // Get the quantity. qtyItem = self.document.forms[0].elements[i].value; costItem = self.document.forms[0].elements[i-2].value; // Get the description. descItem = self.document.forms[0].elements[i-1].value; // add the line item to the confirmation message. message = message + qtyItem + "\t" + costItem + "\t" + descItem + "\n"; } } message = message + "\nOrder total: $" + self.document.forms[0].cost.value if (confirm(message)) { self.document.forms[0].submit(); } } } } // end hiding from older browsers --> </script> </head> <body bgcolor="white" text="black" alink="red" vlink="purple" link="blue" background="images/bkgrd.gif"> <p> <table width=440> <tr><td> <p> <form name=options method=post action="/cgi-bin/order.cgi"> <table border="0" width="100%" id="table1"> <tr> <td width="109" align="right"><font face="Arial" size="2"> First Name:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=FirstName size=30 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Last Name:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=LastName size=30 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Address Line 1:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Address1 size=40 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Address Line 2:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Address2 size=40 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Suburb:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Suburb size=25 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">City:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=City size=25 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Postal Code:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=PostalCode size=15 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Country:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=Country size=15 maxlength=40 value=NZ></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Home Phone:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=HomePhone size=20 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Mobile Phone:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=MobilePhone size=20 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">E-Mail Address:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=EmailAddress size=30 maxlength=40></font></td> </tr> <tr> <td width="109" align="right"><font face="Arial" size="2">Domain Name:</font></td> <td width="15"> </td> <td align="left"><font size="1" face="Arial"> <input type=text name=DomainName size=30 maxlength=40></font></td> </tr> </table><br> <font face="Arial" size="2">Enter a quantity of 1 into the package you require.<br><br> Monthly payments incur a $2 per month administration fee. Set up is <b>free</b> for all packages (for a limited time).</font><br><br> <table border=1 cellpadding=2 width="500" bordercolorlight="#808080"> <tr> <th><font face="Arial" size="2">Description</font></th> <th><font face="Arial" size="2">Qty</font></th> <th><font face="Arial" size="2">Total</font></th> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc1" value="Basic Monthly"> </font><font face="Arial" size="2">Basic Package <BR><B> Pay Monthly</B></font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty1" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost1" value="11.99"> </font><font face="Arial" size="2">$11.99</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc2" value="Basic PrePay 1 Year"> </font><font face="Arial" size="2">Basic Package - $9.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty2" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost2" value="109.89"> </font><font face="Arial" size="2">$109.89</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc3" value="Basic PrePay 2 Years"> </font><font face="Arial" size="2">Basic Package - $8.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty3" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost3" value="197.78"> </font><font face="Arial" size="2">$197.78</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc4" value="Basic PrePay 3 Years"> </font><font face="Arial" size="2">Basic Package - $7.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty4" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost4" value="263.67"> </font><font face="Arial" size="2">$263.67</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc13" value="Deluxe Monthly"> </font><font face="Arial" size="2">Deluxe Package<BR><B> Pay Monthly</B></font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty13" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost13" value="21.99"> </font><font face="Arial" size="2">$21.99</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc14" value="Deluxe PrePay 1 Year"> </font><font face="Arial" size="2">Deluxe Package - $19.99 per month<BR><B> Pre-pay 12 mths (1 month free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty14" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost14" value="219.89"> </font><font face="Arial" size="2">$219.89</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc15" value="Deluxe PrePay 2 Years"> </font><font face="Arial" size="2">Deluxe Package - $18.99 per month<BR><B> Pre-pay 24 mths (2 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty15" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost15" value="417.78"> </font><font face="Arial" size="2">$417.78</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc16" value="Deluxe PrePay 3 Years"> </font><font face="Arial" size="2">Deluxe Package - $17.99 per month<BR><B> Pre-pay 36 mths (3 months free limited offer) </B> </font></td> <td align=center><font size="1" face="Arial"><input type=text name="qty16" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center><font size="1" face="Arial"><input type=hidden name="cost16" value="593.67"> </font><font face="Arial" size="2">$593.67</font></td> </tr> </table> <font face="Arial" size="2"> <br> </font> <table border=1 cellpadding=2 width="500" bordercolorlight="#808080"> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc17" value="Blogging Software Installation Service"> </font><font face="Arial" size="2">Installation Service<BR><B> Blogging software (Wordpress etc)</B></font></td> <td align=center width="39"><font size="1" face="Arial"><input type=text name="qty17" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost18" value="39.00"> </font><font face="Arial" size="2">$39.00</font></td> </tr> <tr> <td align=center><font size="1" face="Arial"><input type=hidden name="desc19" value="Shopping Cart Installation Service"> </font><font face="Arial" size="2">Installation Service<BR><B> Shopping Cart (ZenCart, osCommerce, Cubecart etc)</B></font></td> <td align=center width="39"><font size="1" face="Arial"><input type=text name="qty19" size=3 maxlength=3 value="0" onchange="updatePrice()"></font></td> <td align=center width="63"><font size="1" face="Arial"><input type=hidden name="cost19" value="349.00"> </font><font face="Arial" size="2">$349.00</font></td> </tr> </table> <p> <table width=500> <tr> <td align=right> <div align="left"> <table cellpadding=1 cellspacing=1> <tr> <td colspan=2 align=right><font face="Arial" size="2">Sub Total: $</font><font size="1" face="Arial"><input name=subtot value="0.00" size=10 maxlength=10 onChange="updatePrice()"></font></td> </tr> <tr> <td valign=bottom><font size="1" face="Arial"><input type=hidden value=".15" name=taxrate size=5 maxlength=5 onchange="updatePrice()"> </font></td> <td align=right><font face="Arial" size="2">GST: $</font><font size="1" face="Arial"><input type=text name=totaltax size=10 maxlength=10 value="0.00" onChange="updatePrice()"></font></td> </tr> <tr> <td colspan=2 align=right><font face="Arial" size="2">Total Order: $</font><font size="1" face="Arial"><input name="cost" type=text value="0.00" size=10 maxlength=10 onChange="updatePrice(this.form)"><input type=hidden maxlength=4 size=4 name=items></font></td> </tr> </table> </div> <p> <font size="1" face="Arial"> <input type=button value="Submit Order" onClick="orderIt(this.form);" style="float: left"></font><font face="Arial" size="2"> </font><font size="1" face="Arial"> <input type=reset value="Clear Order" style="float: left"><font face="Arial" size="2"> </form> </font></font> </center> </body> </html> Similar TutorialsProblem solved thanks to Philip M. ____________________________________________________________________________________ Here is the source code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE>Order Forms</TITLE> <SCRIPT> /******************************* Form Calculations ************************************/ function calculate(fld, price) { // fld will equal pw1 or pe1 var dir = fld.name.charAt(1); // used to determine whether it is the East or West Form var num = fld.name.charAt(2); // what Item number is it var quant = fld.options[fld.selectedIndex].value; // how many of the items did the User choose var subtotal = eval(quant * price); // the eval converts a string to an Object property - in this case the value // dir = East or West & num = Item number // with this information we can post the result to appropriate Form & // to the appropriate Field on the Form eval('document.order.t' + dir + num).value = fix(subtotal); var total = 0; // this loop sums the totals for each of the Items to give us the Grand Total for that Form for (i = 1; i < 11; i++) { // does that particular Item have a "total" - in other words did the User choose this Item var itemTotal = eval('document.order.t' + dir + i).value; // total is a running sum of the Form's "subtotals" if (parseFloat(itemTotal) > 0) total += parseFloat(itemTotal); } // prior to sticking in the Grand Total into the Total Field we need to "dollarize" the number eval('document.order.total' + dir ).value = fix(total); } // a number like 6.6 should ultimately read as $6.60 and not $6.6 // a number like 6.6275 should ultimately read as $6.63 // the fix(total) function takes care of these particular problems function fix(total) { // ie, total == 6.6275 var dollars = Math.floor(total); // dollars = 6 // browsers sometimes have rounding errors - 662.75 - 600 = 62.75 var cents = (total * 100) - (dollars * 100); cents = Math.round(cents); // 63 if (cents < 10) cents = "0" + cents; // .998 will become 1.00 so we need to increment the dollar value by one if (cents == 100) dollars++; // if cents equal 0 then dollars equal total or total + 1 incase of .998 if (dollars == total || dollars == Math.floor(total) + 1) cents = "00"; total = dollars + "." + cents; // 6.63 return total; } /******* End of Form Calculations ********/ </SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><form action="sendemail.php" method="post" name="order" id="order" onSubmit="return ValidateInput(this)"></td> <td><input type="hidden" name="Formulaire de commande site Pain et Passion" value=""></td> <td></td> <td></td> </tr> <tr> <td>Product</td> <td>Price</td> <td>Quantity</td> <td>Total</td> </tr> <tr> <td>Item 1</td> <td>1.99</td> <td><SELECT NAME="pw1" SIZE="1" ONCHANGE="calculate(this, 1.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw1" SIZE="10" VALUE></td> </tr> <tr> <td>Item2</td> <td>2.99</td> <td><SELECT NAME="pw2" SIZE="1" ONCHANGE="calculate(this, 2.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw2" SIZE="10" VALUE></td> </tr> <tr> <td>item3</td> <td>3.99</td> <td><SELECT NAME="pw3" SIZE="1" ONCHANGE="calculate(this, 3.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw3" SIZE="10" VALUE></td> </tr> <tr> <td>Item3</td> <td>1.99</td> <td><SELECT NAME="pw4" SIZE="1" ONCHANGE="calculate(this, 1.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw4" SIZE="10" VALUE></td> </tr> <tr> <td>Item4</td> <td>3.99</td> <td><SELECT NAME="pw5" SIZE="1" ONCHANGE="calculate(this, 3.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw5" SIZE="10" VALUE></td> </tr> <tr> <td>Item5</td> <td>2.99</td> <td><SELECT NAME="pw6" SIZE="1" ONCHANGE="calculate(this, 2.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw6" SIZE="10" VALUE></td> </tr> <tr> <td>Item6 </td> <td>4.99</td> <td><SELECT NAME="pw7" SIZE="1" ONCHANGE="calculate(this, 4.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw7" SIZE="10" VALUE></td> </tr> <tr> <td>Item7</td> <td>5.99</td> <td><SELECT NAME="pw8" SIZE="1" ONCHANGE="calculate(this, 5.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw8" SIZE="10" VALUE></td> </tr> <tr> <td>Item8</td> <td>1.99</td> <td><SELECT NAME="pw9" SIZE="1" ONCHANGE="calculate(this, 1.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw9" SIZE="10" VALUE></td> </tr> <tr> <td>Item9 (not working)</td> <td>5.99</td> <td><SELECT NAME="pw10" SIZE="1" ONCHANGE="calculate(this, 5.99)"> <OPTION VALUE="0">0</OPTION> <OPTION VALUE="1">1</OPTION> <OPTION VALUE="2">2</OPTION> <OPTION VALUE="3">3</OPTION> <OPTION VALUE="4">4</OPTION> <OPTION VALUE="5">5</OPTION> <OPTION VALUE="6">6</OPTION> <OPTION VALUE="7">7</OPTION> <OPTION VALUE="8">8</OPTION> <OPTION VALUE="9">9</OPTION> <OPTION VALUE="10">10</OPTION> <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> <OPTION VALUE="18">18</OPTION> <OPTION VALUE="19">19</OPTION> <OPTION VALUE="20">20</OPTION> </SELECT></td> <td><INPUT TYPE="text" NAME="tw10" SIZE="10" VALUE></td> <tr> <td><p align="right">grand total <img src="arrow.png" width="32" height="32" border="0" alt="" align="absmiddle"></p></td> <td><input type="text" name="totalw" size="10" style="background: #87cefa;"></td> <td align="left"><input type="submit" value="SEND YOUR ORDER" style="background: #87cefa;"></td> </tr> </tr> <tr> <td>Name</td> <td><input type="text" name="name"></td> <td></td> <td></td> </tr> <tr> <td>e-mail</td> <td><input type="text" name="e-mail"></td> <td></td> <td></td> </tr> <tr> <td>Phone</td> <td><input type="text" name="phone"></td> <td></td> <td></td> </tr> </table> </FORM> </BODY> </HTML> Hi everyone, I am converting a program that displays the payment options as a list of check boxes to a drop down list. I have tried using onBlur(), etc. but the program is displaying my error that says I didn't select a payment method. Here is the code, thanks for any hints or help! Code: <html> <head> <title>Order form</title> <meta http-equiv="Content-Type" content="text/javascript"> <script type="text/javascript"> function total() { var subtotal=0; var total=0; var adjustment=1; payment=false; var elmnts=document.payform.elements; for (var x=0; x<(document.payform.elements['item[]'].length); x++) { if (document.payform.elements['item[]'][x].checked) { subtotal=subtotal+parseFloat(document.payform.elements['item[]'][x].value); } } for (var x=0; x<(document.payform.pay.length); x++) { if (document.payform.pay[x].checked) { adjustment=document.payform.pay[x].value; payment=true; } } if (payment) { total=subtotal*adjustment; total = total.toFixed(2); document.payform.display.value="subtotal: "+subtotal+"\rAdjustment: "+adjustment+"\rTotal: "+total; } else { window.alert("Please choose payment type."); } } </script> </head> <body> <form name="payform"> <table border="0" cellpadding="5"> <tr> <td width="250" valign="top"> <b>Please buy some stuff!</b><br /> <input type="checkbox" name="item[]" value="14.99" />Chang $14.99<br /> <input type="checkbox" name="item[]" value="12.99" />Chartreuse verte $12.99<br /> <input type="checkbox" name="item[]" value="13.99" />Gnocchi di nonna Alice $13.99<br /> <input type="checkbox" name="item[]" value="14.99" />Gudbrandsdalsost $14.99<br /><br /> <b>Choose payment methods</b><br /> <select name = "pay" size = 0> <option value = "0"></option> <option value = "1.2">Monday order (20% service charge)</option> <option value = "1.1">Personal check (10% service charge)</option> <option value = ".8">Visa (preferred -- 20% discount)</option> <option value = "1.2">MasterCard (10% discount)</option> <option value = "1.2">Discover (10% discount)</option> </select> <br /><br /> <input type="button" value="Process Order" onClick="total()" /> <input type="reset" value="Reset Form" /> </td></tr> <tr> <td width="200" valign="bottom"> <textarea name="display" rows="5" cols="35"></textarea></td> </tr> </table> </form> </body> </html> Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var initial = 0 var total = 0; var services = 0; function addServices() { initial = 150 total = initial services = 0; $("input:checked").each(function(){ value = $(this).attr("value"); services += parseInt(value); }); } $(function() { addServices(); total += services; $("form").before('<p class="price"></p>') $("p.price").text("Total Price: US$" + total); }); $("input:radio, input:checkbox").click(function () { addServices(); total += services $("p.price").text("Total Price: US$" + total); }); }); </script> I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(this.form)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() { var beds = document.forms[2].prod_bed_359.value; document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>"); document.write("<pre>Doggie Bed\t\t" + beds + "</pre>"); } This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. Hey guys, I've never use JavaScript before so bare with me. But, I have a registration form, and I want to have a location field in it, and then a region field that changes depending on what the user set as their location. But, I cannot get it to work, and I have no idea of how to go about doing it. Here is the JavaScript I have been using so far: Code: function toggleTable(select) { if(select.value == "uk") { select.value = "uk"; document.getElementById("region2").style.visibility = "collapse"; document.getElementById("region1").style.visibility = "visible"; } else if(select.value == "usa") { select.value = "usa"; document.getElementById("region1").style.visibility = "collapse"; document.getElementById("region2").style.visibility = "visible"; } } and it does show the right region depending on what the user inputed, but when the page loads, all the fields show up until the user click on the location field, here is the code for that so you can test it out: Code: <tr><td>Location: </td><td><select name="location" onclick="toggleTable(this);"> <option value="none">Please Select One</option> <option value="uk">UK</option> <option value="usa">USA</option> </select></td></tr> <tr id="region1"><td>Region: </td><td> <select name="region"> <option value="uk1">uk1</option> <option value="uk2">uk2</option> </select></td></tr> <tr id="region2"><td>Region: </td><td> <select name="region"> <option value="usa1">usa1</option> <option value="usa2">usa2</option> </select> </td></tr> Any help at all please? Is it possible to use JavaScript to send a HTML FORM this way? (By the way, this is a huge guess - I don't know JavaScript very well) Code: <SCRIPT type="text/javascript"> function Cart1Function() { get.INPUT.quantity.value send.to.formsubmit1.php } function Cart2Function() { get.INPUT.quantity.value send.to.formsubmit2.php } </SCRIPT> <FORM action="?" method="post" name="form"> <DIV> <INPUT type="text" name="quanitity"> <INPUT type="submit" value="CART 1" onClick="Cart1Function"> <INPUT type="submit" value="CART 2" onClick="Cart2Function"> <DIV> </FORM> I want to make two forms sharing the same input (quantity). This is the weirdest thing I've come across in awhile. I have some code that formats a input field for a date format. This code runs fine on all browser when the form tag isn't wrapped around the inputs. The second I wrap the form tag around the inputs everything messes up. The Javascript error I'm getting is "Object doesn't support this property or method." on line 45 which is the line of the date input field. I'm totally clueless what I'm doing wrong here. And so I'll leave it up to you the wonderful community to give me some help. Thanks, Jon W Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html leng="en"> <head> <script type="text/javascript"> function dob(val,e) { if(e.keyCode != 8) { if(val.length == 2 || val.length == 5) { if(val.match(/[\/]$/) != "/") { document.getElementById('dob').value += "/"; } } var regex = /[a-zA-Z]|\+|\-|\&|\\|\(|\)|\%\|\$|\#|\@|\*|\_|\?|\>|\<|\,|\./; if(val.match(regex)) { newStr = val.replace(regex,''); document.getElementById('dob').value = newStr; } } } </script> <style type="text/css">@import url(/css/home.css);</style> </head> <body> <div id="wrapper"> <div id="header"> <div id="logo"><a href="/index.php"><img src="/images/logo.png" /></a></div> </div> <div id="container-arrow"></div> <div id="container"> <img src="/images/no_image.png" /> <div id="sign-container"> <span class="sign-header"> Sign Up </span> <div id="sign-arrow-up"></div> <div id="sign-content"> <form method="post" action="/account/index.php" name="sign"> <label for="email">Email</label><input name="email" class="sign-inputs" type="text" /> <p> </p> <label for="password">Password</label><input name="password" class="sign-inputs" type="password" /> <p> </p> <label for="dob">Date Of Birth</label> <input type="text" name="dob" style="text-align:center;" maxlength="10" class="sign-inputs" id="dob" value="MM/DD/YYY" onkeyup="dob(this.value,event);" onkeydown="dob(this.value,event);" onfocus="if(this.value=='MM/DD/YYY') this.value='';" title="MM/DD/YYY" /> <p> </p> <input name="submit" type="submit" class="sign-submit" value="Sign Up" /> </form> </div> </form> </div> </div> </div> </body> </html> I am not familiar with javascript only html, but I have researched this problem and found some solutions, but I am unsure what to do with them. I have an html checkbox form that lists book titles. The user will click on the checkbox next to the titles that interest them. Then when they click submit, I want a pop-up box to appear with the titles they selected in a printable list. I found this javascript code: Code: <script langauge="javascript" type="text/javascript"> function openPreview() { var myWin = window.open ("popup.htm","myWindowName","width=500,height=350"); myWin.focus(); } </script> Then here is my html form code: Code: <form action="" form id= "myInput"> <table width="523"> <tr><td width="33"> <input type="checkbox" name="product" value="Ironman"></td> <td width="229"><div align="left">Ironman</div></td> <td width="174">Chris Crutcher </td> <td width="56" align="right"> </td></tr> <tr><td><input type="checkbox" name="product" value="Staying Fat for Sarah Byrnes"> <th><div align="left">Staying Fat for Sarah Byrnes </div></th> <td>Chris Crutcher </td> <td align="right"><tt>Realism</tt></td> </tr> <tr><td><input type="checkbox" name="product" value="The Watsons Go to Birmingham"> <th><div align="left">The Watsons Go to Birmingham </div></th> <td>Chrisopher Paul Curtis </td> <td align="right"> </td> </tr> </table> <input type="button" id="btnPreview" name="btnPreview" value="Preview" onclick="openPreview()" /> </form> Then on the popup.htm page I have this code Code: <script language="javascript" type="text/javascript"> document.write(window.opener.document.getElementById("myInput").value); </script> This code has worked for me when the form is a textarea or a label, but I don't know how to use it with a checkbox form. I know that labeling the form "my input" only works for textarea or labels, so I understand why the pop-up menu says undefined. What do I need to do to get the checkbox data to appear. Hey, I'm looking for some help with something I have been developing over the last day or so. Basically, I have a form with some input boxes in it, and I am trying to use some javascript to do a calculation with these input boxes. The problem is that when I go to click on the "calculate" button nothing happens. The fields where the value should go to I have made visible instead of hidden to make sure that something is going there but nothing is appearing. I've checked various parts of my syntax with online checkers and other javascript examples and I'm stuck as to what has gone wrong. If anyone can shed some light on the problem and possible solutions that would be awesome. I am using Macromedia Dreamweaver MX2004 to develop this. I have added the code below for the entire test html page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #calc_container { padding-right: 25px; padding-left: 25px; width: 900px; } .calculator_text1 { color: #FFFFFF } </style> <script type="text/javascript"> function Combat() { var Attack = (document.Combat_Calculator.Combat_Attack.value); var Strength = (document.Combat_Calculator.Combat_Strength.value); var Defence = (document.Combat_Calculator.Combat_Defence.value); var Constitution = (document.Combat_Calculator.Combat_Constitution.value); var Magic = (document.Combat_Calculator.Combat_Magic.value); var Ranged = (document.Combat_Calculator.Combat_Ranged.value); var Prayer = (document.Combat_Calculator.Combat_Prayer.value); var Summoning = (document.Combat_Calculator.Combat_Summoning.value); var Sum_Melee = parseInt(0.25 * ((1.3 * (Attack + Strength)) + Defence + Constitution + (0.5 * Prayer))); var Sum_Magic = parseInt(0.25 * ((1.3 * (2 / 3 * Magic)) + Defence + Constitution + (0.5 * Prayer))); var Sum_Ranged = parseInt(0.25 * ((1.3 * ( 2 / 3 * Ranged)) + Defence + Constitution + (0.5 * Prayer))); document.Combat_Calculator.Combat_Sum_Melee.value = (Sum_Melee); document.Combat_Calculator.Combat_Sum_Magic.value = (Sum_Magic); document.Combat_Calculator.Combat_Sum_Rangedr.value = (Sum_Ranged); } function MM_callJS(jsStr) { return eval(jsStr) } </script> </head> <body> <div id="calc_container" onselectstart="return false"> <form action="" method="post" name="Combat_Calculator" id="Combat_Calculator"> <table width="822" border="10" bordercolor="#2E2E2E" bgcolor="2E2E2E"> <tr bgcolor="2E2E2E"> <td width="87" height="15"></td> <td width="146" height="15"></td> <td width="122" height="15"></td> <td width="145" height="15"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td width="179" height="15"></td> <td width="56" height="15"></td> </tr> <tr> <td height="58" colspan="7" bgcolor="#FFFFFF"><div align="right"></div> <div align="center">Your combat level is:<input name="Free_Player" type="text" id="Free_Player" maxlength="3" disabled="disabled" style="background-color:#FFFFFF; border:none;"> +<input name="Member" type="text" id="Member" maxlength="2" disabled="disabled" style="background-color:#FFFFFF; border:none;"> </div><div align="right"></div><div align="center"></div><div align="right"></div><div align="center"></div></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Attack:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Attack" maxlength="2" type="text" id="Combat_Attack"></td> <td height="15"><div align="right" class="calculator_text1">Magic:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Magic" maxlength="2" type="text" id="Combat_Magic"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Strength:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Strength" maxlength="2" type="text" id="Combat_Strength"></td> <td height="15"><div align="right" class="calculator_text1">Ranged:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Range" maxlength="2" type="text" id="Combat_Range"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"><div align="center"> <input name="Combat_Calculate" type="button" id="Combat_Calculate" onClick="MM_callJS('Combat();')" value="Calculate"></div></td> <td height="15" bgcolor="2E2E2E"></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Defence:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Defence" maxlength="2" type="text" id="Combat_Defence"></td> <td height="15"><div align="right" class="calculator_text1">Prayer:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Prayer" maxlength="2" type="text" id="Combat_Prayer"></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> </tr> <tr> <td height="15"><div align="right" class="calculator_text1">Constituion:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Constitution" maxlength="2" type="text" id="Combat_Constitution"></td> <td height="15"><div align="right" class="calculator_text1">Summoning:</div></td> <td height="15" bgcolor="2E2E2E"><input name="Combat_Summoning" maxlength="2" type="text" id="Combat_Summoning" ></td> <td width="37" height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> <td height="15" bgcolor="2E2E2E"></td> </tr> </table> <p><input name="Combat_Sum_Melee" type="text" id="Combat_Sum_Melee">Melee</p> <p><input name="Combat_Sum_Magic" type="text" id="Combat_Sum_Magic">Magic</p> <p><input name="Combat_Sum_Range" type="text" id="Combat_Sum_Range">Range</p> </form> </div> </body> </html> Edit: I have edited the code to remove/change the things that "Philip M" kindly pointed out were not needed and a bit of re-designing the page. I still can't get the javascript to put the answer value in the correct place on the click of the button. I'm under the impression it has something to do with the button rather than the javascript code but I might be wrong. CHANGE XX to TT CHANGE zero in c0m to O becoming com CHANGE YYY to WWW hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ first an example of what im trying to do: when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically. this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways. Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself. How do I fix it? Thank you!!!! Hello All, I have a form where the number of input fields (lets call them B through N) is determined by the length of a php array. Above those input fields is another field (lets call this field input A) that I would like to be auto populated based on what the user enters in fields B through N. Here is my code. The first table (with all of the "totals" fields) holds all of the input fields that I would like to auto update. These fields should auto update so that every input in EACH of the "fy" fields in the second table is added together. Example: every input in the id="fy_{$fy.fy}_high_impact_cost" field should be added together as the user enters them, and the id="totals_high_impact_cost" field should be auto updated with that total. Code: <form method="post" name="submit" action="new_item.php" accept-charset='UTF-8'> <table border="box" width="100%"> <tr> <td align="center">$<input id="totals_high_impact_cost" size="3" name="totals_high_impact_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_most_likely_impact_cost" size="3" name="totals_most_likely_impact_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_low_impact_cost" size="3" name="totals_low_impact_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_actual_expense" size="3" name="totals_actual_expense" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_high_mitigation_cost" size="3" name="totals_high_mitigation_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_most_likely_mitigation_cost" size="3" name="totals_most_likely_mitigation_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_low_mitigation_cost" size="3" name="totals_low_mitigation_cost" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_cost_in_scope" size="3" name="totals_cost_in_scope" maxlength="20" style="text-align: right" />M</td> <td align="center">$<input id="totals_unfunded_threat" size="3" name="totals_unfunded_threat" maxlength="20" style="text-align: right" />M</td> </tr> </table> {foreach value=fy from=$php_array} <table> <tr> <td align="center">$<input id="fy_{$fy.fy}_high_impact_cost" size="3" name="fy_{$fy.fy}_high_impact_cost" maxlength="20" style="text-align: right" value="{$fy.high_impact_cost}" onchange="update_totals_high_impact_cost()" />M</td> <td align="center">$<input id="fy_{$fy.fy}_most_likely_impact_cost" size="3" name="fy_{$fy.fy}_most_likely_impact_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_impact_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_low_impact_cost" size="3" name="fy_{$fy.fy}_low_impact_cost" maxlength="20" style="text-align: right" value="{$fy.low_impact_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_actual_expense" size="3" name="fy_{$fy.fy}_actual_expense" maxlength="20" style="text-align: right" value="{$fy.actual_expense}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_high_mitigation_cost" size="3" name="fy_{$fy.fy}_high_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.high_mitigation_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_most_likely_mitigation_cost" size="3" name="fy_{$fy.fy}_most_likely_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.most_likely_mitigation_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_low_mitigation_cost" size="3" name="fy_{$fy.fy}_low_mitigation_cost" maxlength="20" style="text-align: right" value="{$fy.low_mitigation_cost}" />M</td> <td align="center">$<input id="fy_{$fy.fy}_cost_in_scope" size="3" name="fy_{$fy.fy}_cost_in_scope" maxlength="20" style="text-align: right" value="{$fy.cost_in_scope}" />M</td> </tr> </table> {/foreach} </form> Please email me at alexhall12315@yahoo.com if you would like more explanation. Thanks in advance for any help!!! =) I am just starting out using Javascript and created a simple knowledge check to give a learner feedback on a question. It will allow the learner to quickly check if they have mastered a topic. The problem that I am having is that if I put two of these knowledge checks on the same webpage than it just posts the same answer when the submit button is clicked. What I have been doing is just pasting the code below twice on the page and changing the question and answer out. When I click "Check Answer" it is the same answer for both questions. Here is my code: Code: <fieldset> <legend><strong>Question 1</strong></legend> <SCRIPT LANGUAGE="JavaScript"> function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); } function writeText (form) { form.inputbox.value = "The wavelength of the blue light scatters better than the rest, predominates over the other colors in the light spectrum, and makes the sky appear blue to us." } </SCRIPT> <form name="myform" action="" method="GET"> <label for="question">Why is the Sky Blue?</label><br><br> <input name="inputbox" value="" type="text" style="width: 287px; height: 112px"> <p> <input id="question" value="Check Answer" onclick="writeText(this.form)" type="button"> </p> </form> </fieldset> Any help would be much appreciated in terms of direction. Thank you. I am very new to javascript and really can't figure out what I am doing wrong. I am trying to make a 1 page store that allows you to type in an item and select the color and size you want for that item. If you don't fill in a field, an alert message should tell you that. If all the fields are filled in, a "thank you for purchasing ____________" message should appear in a text area at the bottom of the page. This is my current code: Code: <html> <head> <script> function processform() { if ( document.form1.item1.value == "") { alert("No Item Chosen") } else { chosen = "" len = document.form1.c1.length for (i = 0; i <len; i++) { if (document.form1.c1[i].checked) { chosen = document.form1.c1[i].value } } if (chosen == "") { alert("No Color Chosen") } } else { itemname = document.form1.item1.value; itemcolor = document.form1.c1.value; itemsize = document.form1.size.value; document.form1.txtarea1.value = "Thank you for purchasing a " + itemsize + " " + itemcolor + " " + itemname; } } </script> </head> <body> <h1>Store</h1> <br/><br/> <form name="form1"> <h4>What item would you like to buy?</h4> <input type="text" name="item1" value="" /><br /> <br/><br/> <h4>Color</h4> <input type="radio" name="c1" value="blue" /> Blue<br /> <input type="radio" name="c1" value="red" /> Red<br /> <input type="radio" name="c1" value="green" /> Green<br /> <input type="radio" name="c1" value="yellow" /> Yellow<br /> <br/><br/> <h4>Size</h4> <select name="size"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> <option value="extra large">Extra Large</option> </select> <br/><br/> <button onclick="processform()">Purchase</button> <br/><br/> <textarea rows="2" cols="40" name = "txtarea1"> </textarea> </form> </body> </html> When I press the purchase button, no alert message is shown, nor does anything get displayed in the textarea. What am I doing wrong? I'm fairly new to javascript and would appreciate any help offered. I'm trying to use the input from an HTML form to interact with a switch statement in javascript. I want my users to input a few specific words, and have each word they input redirect them to a specific page. Below is what I've currently come up with. I cannot get it to function properly as it continues to display the default output regardless of the input Code: <script language="JavaScript" type="text/javascript" > <!-- function checkform ( form ) { var favcolour =("form.data", "") switch (favcolour) { case "red": window.location="index.html"; break; case "green": window.location="index.html#tips"; break; case "blue": window.location="index.html#blue"; break; default: document.writeln("Invalid Input"); }; } // --> </script> </head> <body> <form action="" method="post" onsubmit="return checkform(this);"> <input type="text" name="data" /> Again any help would be greatly appreciated! Hi I am trying to write a simple script for html form validation before going on to write a more complicated script for the full form which will eventually be on the web page. However, I cannot tell if the javascript is executing or not, as no alert messages come up. If I fill in the form with blanks (which is what the function checkform() checks for) then it should display an alert on submission and return false. Otherwise, returns true. I need to get this licked before going on to the more complex coding, but I really can't see why this doesn't appear to work. I'd be most grateful if some kind soul out there could have a look at it for me.... Links below. Thank you in anticipation! http://www.kellyresources.co.uk/onli...ment_test.html http://www.kellyresources.co.uk/checkform.js 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>Untitled Page</title> <script language="javascript"> function send_onclick(frmName) { var bolSubmit; bolSubmit = true; if (frmName.email.value == "") { alert("You must enter an email address"); bolSubmit = false; } if (bolSubmit == true) { frmName.submit(frmName); } } </script> </head> <body> <form name="frmName" method="post" action="validate.asp"> Enter your name in the text box. If nothing is entered, a warning <br /> message will be displayed. Only when you enter something into the <br /> text box will the page be submitted. <br /><br /> Please enter your name : <input type="text" name="email" size="20" /><br /> <input type="button" name="butSent" value="Do it" onclick="return send_onclick(frmName)"> </form> </body> </html> Hi there, I would like to know the purpose of having var bolSubmit in the code above. Also, why is it that "form name" allows my code to work even though there is a warning stating that it is outdated, but when I change it from "form name" to "form id", it does not complain of the warning anymore, but instead my code does not work. Please advise. Dear all, attached is a page for my website to allow visitors to purchase photos. It is made from 2 Paypal example scripts - one for the form and another for an additional text box. It works fine apart from one detail, the text being entered does not get sent - instead, the information it forwards is "6x4 Colour Prints. Item Number id10" The "6x4 Colour prints" bit is good - the "Item number id10" is where I'd ideally like to see the custom text being entered and the guys at Paypal developer forums have said that a Javascript command is overriding the text being forwarded and to seek advice from those who know Javascript. I've tried for a day by trial and error to see if I can take this command out but it has got to the hair pulling out stage so I'm calling on those who know best to cast a wise eye over the code and see if there is an easy fix to this. Any help or suggestions as to howe to alter this will be most gratefully received. Thanks in advance, Dave. hello everyone Im new to javascript as well as to this forum, Im coming here for first class help that I can only get from skilled programmers like you. I have a html form that uses javascript for validation, this is an assignment that consists of a form that sells hard drives from three different manufacturers, more specifically the part im stuck on is where if a manufacturer hoes have a number in the number of drives textbox, javascript needs to check to see that one of the radio buttons in that row is checked, if no radio button is checked an alert is displayed, however when I do select a radio button I still get the alert I used a "if...else if...else" construction but my logic is not well structured and thereby I get those problems, I have included the code down below if anyone is interested in helping a newbie out, thanks Code: <html> <head> <style type="text/css"> .bold {font-weight:bold ; font-family:"comic sans ms"} </style> <script type="text/javascript"> function number_of_drives() { //checks that a value is entered for at least one drive's manufacturer if(document.myform.drive1.value=="" && document.myform.drive2.value=="" && document.myform.drive3.value=="") { alert("please enter a quantity for the number of drives you wish to purchase from a manufacturer"); //if no value is entered in any the message is displayed return; //no further calculation is done } else if(isNaN(document.myform.drive1.value || document.myform.drive2.value || document.myform.drive3.value ))//verifies that only numeric values were entered { alert("make sure you enter a numeric values for the 'number of drives' column"); return; } else { if(document.myform.drive1.value !="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false) alert("please select a size for the western digital drive"); else if(document.myform.drive2.value !="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false) alert("please select a size for the maxtor digital drive"); else if(document.myform.drive2.value !="" && document.myform.quantum[0].checked==false && document.myform.quantum[].checked==false && document.myform.quantum[2].checked==false) alert("please select a size for the quantum digital drive"); } } function check_radios()//function to check that a size is selected in the same row as the number of drives textbox//function to check that a size is selected in the same row as the number of drives textbox { if(document.myform.drive1!="" && document.myform.western[0].checked==false && document.myform.western[1].checked==false && document.myform.western[2].checked==false)// if drive1 textbox is not empty and no radio button is selected, a message will appear { alert("please select a size for the 'western digital' drive"); return; } else{return;} if(document.myform.drive2!="" && document.myform.maxtor[0].checked==false && document.myform.maxtor[1].checked==false && document.myform.maxtor[2].checked==false)// if drive2 textbox is not empty and no radio button is selected, a message will appear { alert("please select a size for the 'maxtor' drive"); return; } else{return;} if(document.myform.drive3!="" && document.myform.quantum[0].checked==false && document.myform.quantum[1].checked==false && document.myform.quantum[2].checked==false) // if drive2 textbox is not empty and no radio button is selected, a message will appear { alert("please select a size for the 'quantum' drive"); return; } else{return;} } function clear_form() { document.myform.western[0].value==""; document.myform.western[1].value==""; document.myform.western[2].value==""; document.myform.maxtor[0].value==""; document.myform.maxtor[1].value==""; document.myform.maxtor[2].value==""; document.myform.quantum[0].value==""; document.myform.quantum[1].value==""; document.myform.quantum[2].value==""; document.myform.drive1.value==""; document.myform.drive2.value==""; document.myform.drive3.value==""; document.myform.size1.value==""; document.myform.size2.value==""; document.myform.size3.value==""; document.myform.totalsize.value==""; document.myform.totalcost.value==""; document.myform.discount.value==""; document.myform.grandtotal.value==""; } </script> <title></title> </head> <body> <form name="myform"> <table align="center" border="1" width="80%"> <tr style="font-family:'comic sans ms'; font-size:24pt"><td align="center" colspan="6">Rupert's Hard Drive Emporium</td></tr> <tr><td class="bold" valign="middle" align="center" rowspan="2">Manufacturer</td><td colspan="3" align="center" class="bold">Drive Size</td><td rowspan="2" class="bold">Number of Drivers</td><td rowspan="2" class="bold">Number of GB</td></tr> <tr><td class="bold">500 Gigabytes</td><td class="bold">1 Terabyte</td><td class="bold">2 Terabytes</td></tr> <tr><td>Western Digital ($0.12/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="western" value="500" /></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="western" value="2048"/></td><td align="center"><input type="text" name="drive1"/></td><td align="center"><input type="text" name="size1"/></td></tr> <tr><td>Maxtor ($0.16/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="maxtor" value="2048"/></td><td align="center"><input type="text" name="drive2"/></td><td align="center"><input type="text" name="size2"/></td></tr> <tr><td>Quantum ($0.09/GB)</td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="500"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="1024"/></td><td align="center"><INPUT TYPE=RADIO NAME="quantum" value="2048"/></td><td align="center"><input type="text" name="drive3"/></td><td align="center"><input type="text" name="size3"/></td></tr> <tr><td rowspan="4" align="center"><img src="hardisk.jpg" height="120pt" width="90pt"/></td><td colspan="3" align="right">Total Gigabytes Purchased</td><td align="center" colspan="2"><input type="text" name="totalsize" readonly="true"/></td></tr> <tr><td colspan="3" align="right">Total Cost of Drives</td><td align="center" colspan="2"><input type="text" name="totalcost" readonly="true"/></td></tr> <tr><td colspan="3" align="right">Discount</td><td align="center" colspan="2"><input type="text" name="discount" readonly="true"/></td></tr> <tr><td colspan="3" align="right">Grand Total</td><td align="center" colspan="2"><input type="text" name="grandtotal" readonly="true"/></td></tr> <tr><td align="center"><input type="submit" value="calculate" onclick="number_of_drives()"/></td><td align="center" colspan="5"><input type="submit" value="clear the form" onclick="clear_form()"/></td></tr> </table> </form> </body> </html> Can any of you nice people out there help I am writing a from with user details input E.G. House Number Street City user can input the house number and the street but the city is restricted to only the city I live in How do I make the input address1 equal house number + a space + street + a space + city, I am a beginner wrote this to learn but have got stuck! The code Code: <form action="#" onsubmit="showLocation(); return false;"> <table width=780 border=0 align=center summary=""> <tr> <td colspan=3><font size="+1"><b><div style="text-align: center">just some test here</div></b></font></td> </tr> <tr> <td><b>Pick Up Address</b></td> <td>House Number</td> <td><input type="text" name="punum" size="40" maxlength="5" /></td> </tr> <tr> <td><!-- --></td> <td>Street</td> <td><input type="text" name="pustreet" size="40" maxlength="20" /></td> </tr> <tr> <td><!-- --></td> <td>City</td> <td><select name="pucity" size="1"><option value="Cardiff" selected> Cardiff</option></select></td> </tr> <tr> <td><!-- --></td> <td>Post Code</td> <td><input type="text" name="pupostcode" size="40" maxlength="10"></td> </tr> <tr> <td><b>ADDRESS 1</b></td> <td>Pick Up Address</td> <td><input type="text" name="address1" value="Contents of punum and pustreet in here" /></td> </tr> <tr> <td></td> <td>Pick Up Time</td> <td><select name="putime" size="1"> <option value="00:00"> 00:00</option> <option value="00:15"> 00:15</option> <option value="00:30"> 00:30</option> <option value="00:45"> 00:45</option> <option value="01:00"> 01:00</option> <option value="01:15"> 01:15</option> <option value="01:30"> 01:30</option> <option value="01:45"> 01:45</option> <option value="02:00"> 02:00</option> <option value="02:15"> 02:15</option> <option value="02:30"> 02:30</option> <option value="02:45"> 02:45</option> <option value="03:00"> 03:00</option> <option value="03:15"> 03:15</option> <option value="03:30"> 03:30</option> <option value="03:45"> 03:45</option> <option value="04:00"> 04:00</option> <option value="04:15"> 04:15</option> <option value="04:30"> 04:30</option> <option value="04:45"> 04:45</option> <option value="05:00"> 05:00</option> <option value="05:15"> 05:15</option> <option value="05:30"> 05:30</option> <option value="05:45"> 05:45</option> <option value="06:00"> 06:00</option> <option value="06:15"> 06:15</option> <option value="06:30"> 06:30</option> <option value="06:45"> 06:45</option> <option value="07:00"> 07:00</option> <option value="07:15"> 07:15</option> <option value="07:30"> 07:30</option> <option value="07:45"> 07:45</option> <option value="08:00"> 08:00</option> <option value="08:15"> 08:15</option> <option value="08:30"> 08:30</option> <option value="08:45"> 08:45</option> <option value="09:00"> 09:00</option> <option value="09:15"> 09:15</option> <option value="09:30"> 09:30</option> <option value="09:45"> 09:45</option> <option value="10:00"> 10:00</option> <option value="10:15"> 10:15</option> <option value="10:30"> 10:30</option> <option value="10:45"> 10:45</option> <option value="11:00"> 11:00</option> <option value="11:15"> 11:15</option> <option value="11:30"> 11:30</option> <option value="11:45"> 11:45</option> <option value="12:00"> 12:00</option> <option value="12:15"> 12:15</option> <option value="12:30"> 12:30</option> <option value="12:45"> 12:45</option> <option value="13:00"> 13:00</option> <option value="13:15"> 13:15</option> <option value="13:30"> 13:30</option> <option value="13:45"> 13:45</option> <option value="14:00"> 14:00</option> <option value="14:15"> 14:15</option> <option value="14:30"> 14:30</option> <option value="14:45"> 14:45</option> <option value="15:00"> 15:00</option> <option value="15:15"> 15:15</option> <option value="15:30"> 15:30</option> <option value="15:45"> 15:45</option> <option value="16:00"> 16:00</option> <option value="16:15"> 16:15</option> <option value="16:30"> 16:30</option> <option value="16:45"> 16:45</option> <option value="17:00"> 17:00</option> <option value="17:15"> 17:15</option> <option value="17:30"> 17:30</option> <option value="17:45"> 17:45</option> <option value="18:00"> 18:00</option> <option value="18:15"> 18:15</option> <option value="18:30"> 18:30</option> <option value="18:45"> 18:45</option> <option value="19:00"> 19:00</option> <option value="19:15"> 19:15</option> <option value="19:30"> 19:30</option> <option value="19:45"> 19:45</option> <option value="20:00"> 20:00</option> <option value="20:15"> 20:15</option> <option value="20:30"> 20:30</option> <option value="20:45"> 20:45</option> <option value="21:00"> 21:00</option> <option value="21:15"> 21:15</option> <option value="21:30"> 21:30</option> <option value="21:45"> 21:45</option> <option value="22:00"> 22:00</option> <option value="22:15"> 22:15</option> <option value="22:30"> 22:30</option> <option value="22:45"> 22:45</option> <option value="23:00"> 23:00</option> <option value="23:15"> 23:15</option> <option value="23:30"> 23:30</option> <option value="23:45"> 23:45</option> </select> <font color="#FF0000">24 Hr</font> </td> </tr> <tr> <td><b>Customer Details</b></td> <td>First Name</td> <td><input type="text" name="fname" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>Last Name</td> <td><input type="text" name="lname" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>Telephone Number</td> <td><input type="text" name="tel1" size="40" maxlength="20"></td> </tr> <tr> <td><b>Destination Address</b></td> <td>House Number</td> <td><input type="text" name="dnum" size="40" maxlength="5"></td> </tr> <tr> <td><!-- --></td> <td>Street</td> <td><input type="text" name="dstreet" size="40" maxlength="20"></td> </tr> <tr> <td><!-- --></td> <td>City</td> <td><select name="dcity" size="1"> <option value="Barry"> Barry</option> <option value="Bridgend"> Bridgend</option> <option value="Caerphilly"> Caerphilly</option> <option value="Cardiff"> Cardiff</option> <option value="Newport"> Newport</option> <option value="Pontypridd"> Pontypridd</option> </select></td> </tr> <tr> <td><!-- --></td> <td>Post Code</td> <td><input type="text" name="dpostcode" size="40" maxlength="10"> <br></td> </tr> <tr> <td><b>ADDRESS 2</b></td> <td>Destination</td> <td><input type="text" name="address2" value="Birmingham Airport UK" /></td> </tr> <tr> <td><!-- --></td> <td><!-- --></td> <td><input type="submit" value="Get Tariff" /></td> </tr> </table> <!-- END OF FORM TABLE --> </form> |