...

Shipping costs, based on the text field input

dyasten
08-09-2012, 07:09 PM
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! :thumbsup:
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"]


<!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>&nbsp;</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:">&nbsp;</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 &amp; 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>

AndrewGSW
08-09-2012, 11:14 PM
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.

dyasten
08-09-2012, 11:41 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum