View Full Version : Shipping costs, based on the text field input

08-09-2012, 08:09 PM

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]

[Outside Eeklo we provide from 20 + 3 transport.]
St. Laureins

[knesselare, Bassevelde, lovendegem, maldegem "have its own rate]


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! :thumbsup:

[hint: if you have the total in the table, then move your mouse over that total to see it appea in textbox "totaal bedrag"]

<!DOCTYPE html>

Bestel nu:

<!-- 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;
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 == "."))
return false;
return false;


<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 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')
<!--[if lt IE 10]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<body id="public">

<div id="container" class="ltr">

<h1 id="logo">

<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 />



<li id="foli1846" class="likert notranslate
<table cellspacing="0">
<caption id="title1846">
<td >Aantal:</td>

<tr bgcolor="#d9254c" class="statement1869">
<th><span style="font-size: x-large; color: #FFFFFF;"><b>Desserts:</b></span></th>
<td title="Aantal:">&nbsp;</td>
<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 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 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 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>


<li id="foli2061"
class="notranslate "><label class="desc" id="title2061" for="Field2061">
Totaal bedrag:

<input id="Bestelling_totaalb" name="Field2061" type="text" readonly/>

<li id="foli1947" class="notranslate notStacked ">
<![if !IE | (gte IE 8)]>
<legend id="title1947" class="desc">
Ik betaal gepast:
<span id="req_1947" class="req">*</span>
<!--[if lt IE 8]>
<label id="title1947" class="desc">
Ik betaal gepast:
<span id="req_1947" class="req">*</span>
<input id="Field1947" name="Field1947" type="checkbox" class="field checkbox" value="Ja" tabindex="151" />
<label class="choice" for="Field1947">Ja</label>
<input id="Field1948" name="Field1948" type="checkbox" class="field checkbox" value="Nee" tabindex="152" />
<label class="choice" for="Field1948">Nee</label>
<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">

<textarea id="Field2054"
class="field textarea medium"
rows="10" cols="50"
style="text-transform:uppercase;" on keyup="javascript:this.value=this.value.toUpperCase();" ></textarea>

<li id="foli2056" class="notranslate ">
<label class="desc" id="title2056" for="Field2056">
<span id="req_2056" class="req">*</span>
<input id="Field2056" name="Field2056" type="text" class="field text fn" value="" size="8" tabindex="154" required />
<label for="Field2056">Voornaam</label>
<input id="Field2057" name="Field2057" type="text" class="field text ln" value="" size="14" tabindex="155" required />
<label for="Field2057">Achternaam</label>
<li id="foli2058" class="notranslate ">
<label class="desc" id="title2058" for="Field2058">
<span id="req_2058" class="req">*</span>
<input id="Field2058" name="Field2058" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="156" required />
<li id="foli2059" class="notranslate ">
<label class="desc" id="title2059" for="Field2059">
<span id="req_2059" class="req">*</span>
<input id="Field2059" class="field text medium" name="Field2059" tabindex="157" required
type="tel" maxlength="255" value="04" />
</li><li id="foli2047" class="complex notranslate ">
<label class="desc" id="title2047" for="Field2047">
<span class="req">*</span></label>
<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 &amp; nummer</label>
<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 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>

<li class="buttons ">
<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"



08-10-2012, 12:14 AM
You have a number of errors in your code (validate (http://validator.w3.org/#validate_by_input)) including mismatched tags and duplicate ids. You should fix these first.

08-10-2012, 12:41 AM
You have a number of errors in your code (validate (http://validator.w3.org/#validate_by_input)) including mismatched tags and duplicate ids. You should fix these first.

first i want to now how to make it work correctly before fixing the errors