|
JavaScript - Javascript For A Simple Order Form With Drop Down Payment
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>
Similar TutorialsHi folks! I know this is a really simple script, but I'm still a beginner, still learning and struggling..haha thanks for sticking with me Anyway my aim here is to have x,y, or z Div come to the front onClick. I've figured out how to do it with two Div's (using the code below) but not with 3 or more. I'm not attached to the code, so if you want to suggest something totally different I am all ears! Thank you greatly! ian Code: <script>
function changeZunder() {
layer1.style.zIndex = 1;
layer2.style.zIndex = 2;
}
function changeZover() {
layer1.style.zIndex = 2;
layer2.style.zIndex = 1;
}
</script>
----
<body>
<div id="layer1" style="z-index: 1; position: absolute;" onClick="changeZover()">
FIRST BOX
</div>
<div id="layer2" style="z-index: 1; position: absolute;" onClick="changeZunder()">
SECOND BOX
</div>
</body>
Problem 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>
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>
I need to be able to drag an image from one browser window to a form text input in a different window, populating it with the image file name. I can do this easily, except that the result is the whole url, and I only want the filename to be inserted. In other words, it inserts http://www.path/path/file.jpg, but I just want to end up with file.jpg. I believe the file object .name property holds the info I need, but I don't know how to populate the input field with it. Any help appreciated. I have the perfect form for a client - but its missing one thing. She sells hair clips in various colors. A user can select a hair clip color and quantity quite easily (as seen in the code below). My issue is that she wants to be able to give the user a 'special price' based on the quantity ordered by the user. Contrary to simply adding the default price of $7 over and over again based on the quantity selected. To Reiterate The way I want it to work... 1 clip is $7 2 clips are $12 3 clips are $22 5 clips are....etc. ...however, with the way that the javascript is set up now I'm only able to select one default price. This means that whatever quantity is selected -- it's simply multiplied by the number 7 to provide a total. 1 clip is $7 2 clips are $14 3 clips are $21 5 clips are....etc. If some kind soul can give their advice or point me in the right direction I would appreciate it. Code: <script type="text/javascript" src="_inc/orderform04.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>
<form id="frmOrder">
<p>
<input type="checkbox" id="chk0" />
Black Hair Clips
$<span id="txtPrice0">10</span>
<select id="sel0">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="checkbox" id="chk1" />
Red Hair Clips
$<span id="txtPrice1">10</span>
<select id="sel1">
<option value="val0">0</option>
<option value="val1">1</option>
<option value="val2">2</option>
<option value="val3">3</option>
</select>
</p>
<p>
<input type="text" id="txtTotal" size="8" />
</p>
</form>
orderform04.js is located he http://www.mredkj.com/javascript/orderform04.js hi im new to scripting so apologies if this is a basic question. I have a form which has javascript validation which triggers hidden divs if certain input boxes are left blank. I have it working with text fields and text areas, but im having trouble with a drop down menu. This is the code for my drop down: Code: <select name="department" size="1" id="department"> <option value="" selected>Please select</option> <option value="1">Personal Injury</option> <option value="2">ULR & Credit Hire</option> <option value="3">Consumer Credit</option> <option value="4">Health & Safety</option> <option value="5">Property</option> </select> And this is the code currently for the Javascript validating: Code: if(department.selectedIndex == 0){
var error = true;
$('#department_error').fadeIn(500);
}else{
$('#department_error').fadeOut(500);
If i leave the drop down on the 'Please Select' value, the error message should show, but at the moment it doesnt show up. I have a feeling the syntax is wrong in the javascript? Any help very much appreciated Thanks I'm trying to do a simple validation to see if the field is blank, if it is, I want to write a message to a div. I've added the function call to an onclick. It seems to be set off no matter if there is a value or not, and what's more, the fields are clearing out when the link is clicked. My brain is mush right now, so what am I missing? Code: function validateThis() {
document.getElementById('messages').innerHTML = ''
var theMessage = '';
var reqMsg = 'must have a value.';
for (var i = 0; i <document.theForm1.elements.length; i++) {
if (document.theForm1.elements[i].value = ' ') {
theMessage += document.theForm1.elements[i].name +' ' + reqMsg +'<br/>';
}}
document.getElementById('messages').innerHTML = theMessage;
}
Hi Coders... I'm building a 'really simple' JavaScript program to help editors write SEO-friendly META titles and META descriptions. The idea is you have 3 text boxes, each on a separate line: BOX 1 - META TITLE [ i.e. "Cool website page" ] BOX 2 - FILE NAME [ i.e. "This is a really cool web page about cool stuff"] BOX 3 - META DESCRIPTION [ i.e. "cool-web-page" ] As the editor types in the boxes, a serp listing is displayed as it would appear on Google (and ideally how it would appear on Bing and Yahoo): Cool website page www.coolwebsite.com/cool-web-page This is a really cool web page about cool stuff Kudos to any one who could point a JavaScript newbie in the right direction Hi, Im looking to make a payment form that calculates the prices as you go along, similar to this i just dont know how to go about it, is there software that can be used? thanks alot, Dan I'm trying to make an xhtml form that validates itself through a javascript function. I have the form up but for some reason I can't get it to validate. I'm not even sure if I linked things correctly. Here's what I have: the xhtml file <?xml version = ″1.0″ encoding = ″utf-8″ ?> <!DOCTYPE html PUBLIC ″-//W3C//DTD XHTML 1.0 Strict//EN″ http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <script src="gas24.js" type="text/javascript"></script> <h2> Registration Form </h2> <title> Javascript Form Validation Homework </title> </head> <body> <table border=""> <form name="validation_form" method="post" onsubmit="return validate()"> <tr> <td> <t>Name: <input type="text" name="YourName" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> E-mail Address: <input type="text" name="YourEmail" size="10" maxlength="24"/> </td> </tr> </br> <tr> <td> Password: <input type="password" name="YourPassword" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> Re-Type Password: <input type="password" name="passwordConfirmed" size="10" maxlength="10"/> </td> </tr> </br> <tr> <td> Your Gender: <input type="radio" name="MaleBox" Value="Male"> Male <input type="radio" name="FemaleBox" Value="Female"> Female </td> </tr> </br> <tr> <td> Comments: <input type="text" name="Comments" size="100" maxlength="500" value=""/> </td> </tr> <tr> <td> <input type="submit" value="Submit"/> </td> </tr> </form> </table> <p></p> </body> </html> The javascript file: I've tried two things. This: <SCRIPT LANGUAGE="JavaScript"> function validation() { var x=document.forms["validation_form"]["YourName"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } And this: function validation() if ( document.validation_form.YourName.value == "" ) { alert( "Please type your name."); valid = false; } if ( document.validation_form.YourPassword.value =! "document.validation_form.Confirm.value" ) { alert ( "Please confirm your password." ); valid = false; } I would greatly appreciate it if somebody could tell me what I'm doing wrong. Hello, On my client's site: www.twdcycling.com he wanted a place where people could make suggestions for his blog. I accomplished the simple form using a textarea field and even put a little text that clears on clicks and reappears on blur. When you go there--go to the bottom left. It also actually works. The problem is that (besides the fact that so far no one has cared to make a suggestion) somehow the form is (this is what I believe) being submitted automatically. I don't believe a human is clicking submit. When I click submit w/o clicking in the field the default text that I have in the field already gets submitted in the generated email. So I now need to work on my validation in my php file that sends the email. For background I obtained my php file from html-form-guide.com here the file is in its entirety: Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$message = $_POST['message'];
//Validate first
if(empty($name)||empty($visitor_email))
{
echo "Name and email are mandatory!";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
$email_from = 'tom@amazing-designs.com';//<== update the email address
$email_subject = "New Form submission";
$email_body = "You have received a new message from the user $name.\n".
"Here is the message:\n $message".
$to = "tom@amazing-designs.com";//<== update the email address
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
It does have some validation code, and it also is set up to handle more parameters than I needed. I tried to just pare it down to the one simple thing (I just need the user to type anything they want into my text area) My reasoning is that I should be able to go get some simple validation snippet to make it so that if there is the possibility something is causing the form to just "fire off" w/o a human clicking, the validation shouldn't allow it to send, cause the text field is empty. But one would think if that is happening my default text would allow it to send, but oddly enough, no! when I get the email (last one at 5:49 am) it was a blank email! So its like some robot is doing two things: clicking in the field to empty it and THEN clicking submit! Weird, I know. But the validation code would fix this if only I knew how. (But on another note, if I try to send an empty box my default text pops back in when I click submit--proving that its happening automatically. I tried all morning yesterday to implement a snippet from several sources. Here's a couple of examples of what I added: Code:
function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}
I didn't modify this code at all....maybe where I went wrong here. Should "value" correspond to text area name "message"? (about the only thing I didn't try) Here's another one --this one from W3 schools: Code: function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
this is how it was on the source site, all I changed was "myForm" and "fname" to "blog_suggestion" But when testing both these snippets separately what happened is that on submit I just go to my php page (which is just blank) I'm assuming code I'm adding is crashing the script somehow. And then of course no thank you page and no email sent. Finally here is my current php page in its entirety, followed by the form code on the home page... Code: <?php
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Need to submit the form.
echo "error; you need to submit the form!";
}
$message = $_POST['message'];
//Validate first
if(empty($message))
{
echo "Please enter a suggestion before clicking submit.";
exit;
}
$email_from = 'f7digitaldesign@gmail.com';//<== update the email address
$email_subject = "SOMEONE HAS SUBMITTED A SUGGESTION FOR THE BLOG!";
$email_body = "\n $message".
$to = "f7digitaldesign@gmail.com";//<== update the email address
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: thank-you.html');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
I tried to modify the validation I got w/ this to produce the "echo" message "Please enter a suggestion before clicking submit." But let's be honest, by now you know I don't know what in the heck I'm doing (it doesn't seem to matter). Form code: Code: <form name="blog_suggetion" method="post" action="send_form_blogidea.php">
<span class="bloginfotext" ><textarea name="message" rows="14" cols="12" onfocus="clearValue(this, 'Please submit ideas for our blog here—we’d love to hear from you!')" onclick="this.value='';" onblur="if (this.value == '') {this.value = 'Please submit ideas for our blog here—we’d love to hear from you!';}" ></textarea></span>
<div style="font-size:6px; color:#FFF;">sdsadfds</div>
<input type="submit" name='submit' value="submit">
</form>
Any time spent and help offered for this is greatly appreciated!! Also if you need to/want to test the field, I don't care--send me a message. I'll know someone cares! Brian 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 have built a signup form which has several text inputs and text areas. Their labels are set as their values. When the user focuses on the field, the label text is cleared to accept text input. When focus is changed to another field. The field checks if text has been entered. If it has not, it then resets the value back to the default label value. For example: Code: <input type="text" name="company_name" size="50" class="textInput" value="Company Name" onfocus="if(this.value=='Company Name')this.value='';" onblur="if(this.value=='')this.value='Company Name';" /> What I would like to do is have some simple javascript which checks the fields on submit. If any of the required fields still have the default label value, then I would like to change the colour of the label value in the input to red and disable the form submit until the value is corrected. Most of the inputs and text areas will accept any text, though one is an email text input. I don't think any fancy validation is needed for this email input , other than checking to be sure a '@' has been entered. Since the website that this form will be contained in runs jQuery, I have looked into some plugins for form validation. However, these seem to be over-complicated for what I need. I want to keep this as simple and light as possible. Oh, and also, I am not allowed to use anything php based as this is not allowed to run on our servers for security reasons... Any advice or suggestions are much appreciated! Hello i need help with a simple single field javascript login form, i am building a small website for I and my classmates. i want it to be able to redirect each user to a specific page when a corresponding passcode is entered, i know its unsafe but we dont plan on keeping valuable information on the site, i dont know about MSQL and dont even wish to use it, the code works at this level but am unable to add users since i dont understand javascript if someone could help me i will be very grateful thanks in advance /*here is the code i got so far*/ <tittle> Enter Passcode to proceed </title> <h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt; color:#00FF00;> </h1> <form name="login"> Passcode: <input type="text" name="userid"/> <input type="button" onclick="check(this.form)" value="Login"/> <input type="reset" value="Cancel"/> </form> <script language="javascript"> function check(form)/*function to check userid */ { if(form.userid.value == "JohnDoe") /* checkes userid */ { window.open("johndoe.php")/*target page */ } else { alert("Invalid Passcode, please try again!")/*error message*/ } } 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. I have a challenge I gave to myself. I want a script that asks me to put things in order. Say I want a quiz of family, order of age. I have a table with the left cell everybody's name I want a script where I click on a name and it moves over to the right hand cell, up top, then the next clicked named is put under it and so on until all the names are moved over. So far I have this, but I know there is a lot of room for improvment. any suggestions? <HTML> <HEAD> <TITLE>Put Bible books in proper order</TITLE> </head> <body> <h1>Hello World!</h1> <TABLE BORDER=5><TR><TD> <FORM NAME="BOOKS"> <script language="javascript" type="text/javascript"> alert('This is what an alert message looks like.'); FUNCTION TESTER() { ALERT('WORKS'); VAR GOOD=0; VAR BAD=0; if (BOOKS.FONE="A") { GOOD++; } ELSE { BAD++; }; ALERT("YOU HAVE INCORRECT"); } </script> <TABLE BORDER=0><TR><TD> <TABLE BORDER=1> <TR><TD><INPUT TYPE="BUTTON" VALUE="Adam" NAME="GONE" onClick="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="Dave" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="Kile" NAME="GTHREE" ONCLICK="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="John" NAME="GFOUR" ONCLICK="javascript:TEMP.value=this.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="Geroge" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value;"> </TABLE> <TD VALIGN="CENTER" ALIGN="CENTER" WIDTH=30> <INPUT TYPE="BUTTON" VALUE=" " NAME="TEMP"> <TD> <TABLE BORDER=1> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FONE" ONCLICK="javascript:this.value=TEMP.value;TEMP.value=' '"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTWO" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTHREE" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFOUR" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFIVE" ONCLICK="javascript:this.value=TEMP.value;"> </TABLE> </TABLE> <INPUT TYPE="BUTTON" NAME="CHECK" onClick="JAVASCRIPT:ALERT()" VALUE="CORRECT???"> </FORM> </TABLE> </BODY> </HTML> Hello guys, please help me in building an order form, the details. The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price. There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box. Please help me to develop this form. Thank You Hi, I need help with my javascript codes to finish my order form. The first problem I am encountering is this: I need the quantity to appear automatically in the total quantity for sub total. how is this? I have assigned TotalQuantity.value for the quantity. Thank you. You can see the image here. http://img821.imageshack.us/i/oderform.jpg/ |
|||||||