Hello,
I am making a site for our restaurant. Customers can order online. The order will be send to our email address.
On the site I have a table of items and prices. Also I have a javascript that gets the prices from the first column (name & price of an Article are in 1 column). The right column are text boxes. At the end of my page is a cell that automatically (also javascript) is the sum of the cost. This cost is compied to another textbox (read only).
[id = "Order_totalb"]
At the end the customer is required to fill in his address.
/ / So far I have programmed everything in my html file. / /
-------
1.1) We supply from 15 in Eeklo. This + 3 transport.
If the order is greater than or equal to 20, then the transport cost 0.
1.2) If the total of the accumulated amount, so Order_totalb.value is less than or equal to 14, then get an alert 'minimum 15 euros ".
¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨
2) Outside Eeklo we provide from 20 + 3 transport.
If the order (outside Eeklo) is greater or equal to 20, then the transport cost 0.
2.1) If the total of the accumulated amount, so Order_totalb.value is less than or equal to 19, then get an alert 'minimum 20 euros ".
¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨
3) The municipalities 'knesselare, Bassevelde, Lovendegem, Maldegem' (these are towns in Belgium) have their own rate. namely: we deliver to there from 25 + 3 transport.
3.1) If the total of the accumulated amount, so Order_totalb.value is less than or equal to 24, then an alert should be "25 euro".
¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨ ¨
Now to know which transport costs are to be used I would like values linked to the text field.
[from 15 in Eeklo. This transport + 3]
Eeklo
[Outside Eeklo we provide from 20 + 3 transport.]
Ursel
Zomergem
Waarschoot
Oosteeklo
Kaprijke
Lembeke
St. Laureins
Adegem
[knesselare, Bassevelde, lovendegem, maldegem "have its own rate]
Knesselare
Lovendegem
Bassevelde
Maldegem
-
MY QUESTION FOLLOWS:
I have the following fields that links must explain: "city" (plaats), "Order_total" and "transport"
If the customer enter "Ursel" for instance in the city field (the place name is automatically put in uppercase), then it should alert ("minimum 20 euro") when total_Order.value is less than or equal to 19 [see 2.1)] and also the transportation costs have to written to the textfield "transport".
So I need a script that compares with the city.value; each with their own costs.
I thought of something: if.city.value = EEKLO
and if Order_total.value <= 15
than transportation_cost.value = "3"
else if
transportation_cost.value = ""
than this for each city separately I think.
Thank you!
Dyasten
[hint: if you have the total in the table, then move your mouse over that total to see it appea in textbox "totaal bedrag"]
Code:
<!DOCTYPE html>
<html>
<head>
<title>
Bestel nu:
</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<!-- CSS -->
<!-- JavaScript -->
<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com
// Distribute this script freely but keep this notice in place
function numbersonly(myfield, e, dec)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
//-->
</SCRIPT>
<script language="JavaScript" type="text/javascript">
<!--
/* This script is Copyright (c) Paul McFedries and
Logophilia Limited (http://www.mcfedries.com/).
Permission is granted to use this script as long as
this Copyright notice remains in place.*/
function CalculateTotal(frm) {
var order_total = 0
// Run through all the form fields
for (var i=0; i < frm.elements.length; ++i) {
// Get the current field
form_field = frm.elements[i]
// Get the field's name
form_id = form_field.id
// Is it a "product" field?
if (form_id.substring(0,10) == "Bestelling") {
// If so, extract the price from the name
item_price = parseFloat(form_id.substring(form_id.lastIndexOf("_") + 1))
// Get the quantity
item_quantity = parseInt(form_field.value)
// Update the order total
if (item_quantity >= 0) {
order_total += item_quantity * item_price
}
}
}
// Display the total rounded to two decimal places
document.getElementById("Bestelling_totaal").firstChild.data = " " + round_decimals(order_total, 2)
}
function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}
function pad_with_zeros(rounded_value, decimal_places) {
// Convert the number to a string
var value_string = rounded_value.toString()
// Locate the decimal point
var decimal_location = value_string.indexOf(".")
// Is there a decimal point?
if (decimal_location == -1) {
// If no, then all decimal places will be padded with 0s
decimal_part_length = 0
// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {
// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}
// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length
if (pad_total > 0) {
// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}
//-->
</script>
</SCRIPT>
<script type="text/javascript">
function exchange(id){
var ie=document.all&&!window.opera? document.all : 0
var frmObj=ie? ie[id] : document.getElementById(id)
var toObj=ie? ie[id+'b'] : document.getElementById(id+'b')
toObj.style.width=frmObj.offsetWidth+7+'px'
frmObj.style.display='none';
toObj.style.display='inline';
toObj.value=frmObj.innerHTML
}
</script>
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="public">
<div id="container" class="ltr">
<h1 id="logo">
<a></a>
</h1>
<form id="form6" name="form6" class="wufoo topLabel page">
<header id="header" class="info">
<h2>Bestel nu:</h2>
<div><br />
<span style="font-size: large;"><b>Pitta's / Pasta's / Schotels / Salades / Snacks / Pizza's</b></span><br />
<br />
</header>
<ul>
<li id="foli1846" class="likert notranslate
col2
hideNumbers
">
<table cellspacing="0">
<caption id="title1846">
</caption>
<thead>
<tr>
<th> </th>
<td >Aantal:</td>
</tr>
</thead>
<tbody>
<tr bgcolor="#d9254c" class="statement1869">
<th><span style="font-size: x-large; color: #FFFFFF;"><b>Desserts:</b></span></th>
<td title="Aantal:"> </td>
</tr>
<tr class="alt statement1855">
<th><label for="Field1855">Chocopudding ( 2.50)</label></th>
<td title="Aantal:">
<input id="Bestelling_2.50" name="Field1855" type="checkmark" tabindex="146" maxlength="3" autocomplete="off" onKeyPress="return numbersonly(this, event)" onkeyup="CalculateTotal(this.form)"/></td>
</tr>
<tr class="statement1856">
<th><label for="Field1856">Tiramisu ( 2.50)</label></th>
<td title="Aantal:">
<input id="Bestelling_2.50" name="Field1856" type="checkmark" tabindex="148" maxlength="3" autocomplete="off" onKeyPress="return numbersonly(this, event)" onkeyup="CalculateTotal(this.form)"/></td>
</tr>
<tr class="alt statement1857">
<th><label for="Field1857">Vanillepudding ( 2.50)</label></th>
<td title="Aantal:">
<input id="Bestelling_2.50" name="Field1857" type="checkmark" tabindex="150" maxlength="3" autocomplete="off" onKeyPress="return numbersonly(this, event)" onkeyup="CalculateTotal(this.form)"/></td>
</tr>
<tr bgcolor="#093" class="statement1869">
<th><span style="font-size: x-large; color: #FFFFFF; text-align: right;"><b>Totaal:</b></span></th>
<td title="Aantal:"><span id="Bestelling_totaal" OnMouseOver="exchange(this.id)" style="font-size: x-large; color: #FFFFFF; font-weight: bold;">0</span></td>
</tr>
</tbody>
</table>
</li>
<li id="foli2061"
class="notranslate "><label class="desc" id="title2061" for="Field2061">
Totaal bedrag:
</label>
<input id="Bestelling_totaalb" name="Field2061" type="text" readonly/>
</li>
<li id="foli1947" class="notranslate notStacked ">
<fieldset>
<![if !IE | (gte IE 8)]>
<legend id="title1947" class="desc">
Ik betaal gepast:
<span id="req_1947" class="req">*</span>
</legend>
<![endif]>
<!--[if lt IE 8]>
<label id="title1947" class="desc">
Ik betaal gepast:
<span id="req_1947" class="req">*</span>
</label>
<![endif]-->
<div>
<span>
<input id="Field1947" name="Field1947" type="checkbox" class="field checkbox" value="Ja" tabindex="151" />
<label class="choice" for="Field1947">Ja</label>
</span>
<span>
<input id="Field1948" name="Field1948" type="checkbox" class="field checkbox" value="Nee" tabindex="152" />
<label class="choice" for="Field1948">Nee</label>
</span>
</div>
</fieldset>
<p class="instruct" id="instruct1947"><small>Dit is om te weten of we wisselgeld mee moeten nemen</small></p>
</li><li id="foli2054"
class="notranslate "><label class="desc" id="title2054" for="Field2054">
Opmerkingen:
</label>
<div>
<textarea id="Field2054"
name="Field2054"
class="field textarea medium"
spellcheck="true"
rows="10" cols="50"
tabindex="153"
onkeyup=""
autocomplete="off"
style="text-transform:uppercase;" on keyup="javascript:this.value=this.value.toUpperCase();" ></textarea>
</div>
</li>
<li id="foli2056" class="notranslate ">
<label class="desc" id="title2056" for="Field2056">
Naam:
<span id="req_2056" class="req">*</span>
</label>
<span>
<input id="Field2056" name="Field2056" type="text" class="field text fn" value="" size="8" tabindex="154" required />
<label for="Field2056">Voornaam</label>
</span>
<span>
<input id="Field2057" name="Field2057" type="text" class="field text ln" value="" size="14" tabindex="155" required />
<label for="Field2057">Achternaam</label>
</span>
</li>
<li id="foli2058" class="notranslate ">
<label class="desc" id="title2058" for="Field2058">
E-mail:
<span id="req_2058" class="req">*</span>
</label>
<div>
<input id="Field2058" name="Field2058" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="156" required />
</div>
</li>
<li id="foli2059" class="notranslate ">
<label class="desc" id="title2059" for="Field2059">
GSM-nummer:
<span id="req_2059" class="req">*</span>
</label>
<div>
<input id="Field2059" class="field text medium" name="Field2059" tabindex="157" required
type="tel" maxlength="255" value="04" />
</div>
</li><li id="foli2047" class="complex notranslate ">
<label class="desc" id="title2047" for="Field2047">
Adres:
<span class="req">*</span></label>
<div>
<span class="full addr1">
<input id="Field2047" name="Field2047" type="text" class="field text addr" value="" tabindex="158" style="text-transform:uppercase;" on keyup="javascript:this.value=this.value.toUpperCase();" />
<label for="Field2047">Straat & nummer</label>
</span>
<span class="left zip">
<input id="Field2051" name="Field2051" type="text" class="field text addr" value="" maxlength="4" tabindex="159" />
<label for="Field2051">Postcode</label>
</span>
<span class="left city">
<input id="Field2049" name="Field2049" type="text" class="field text addr" value="" tabindex="160" style="text-transform:uppercase;" on keyup="javascript:this.value=this.value.toUpperCase();" />
<label for="Field2049">Plaats</label>
</span>
</div>
</li>
<li class="buttons ">
<div>
<P span id="Bestelling_totaal" style="text-align:center;" OnMouseOver="exchange(this.id)" >
<input id="Bestelling_totaal" name="saveForm" class="btTxt submit"
type="submit" value="Verstuur" tabindex="161"
/></P>
</li>
</ul>
</form>
</div>
</body>
</html>
Before you post, read our: 
Shipping costs, based on the text field input
