#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    1
    Rep Power
    0

    Question Shipping costs, based on the text field input


    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>&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>
  2. #2
  3. No Profile Picture
    buildmyweb.org
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Location
    NY
    Posts
    72
    Rep Power
    8
    i am not sure what youre describing or what your problem is either. but i am fairly certain this is not an HTML issue. maybe you should have this moved to the JS forum?
    Freelance Web Developer | PHP Applications
    Web Development, Hosting, Graphic Design, SEO

IMN logo majestic logo threadwatch logo seochat tools logo