Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Simple Calculating Form using JavaScript

    I am very new to JavaScript, and this is my first attemp at creating a shipping calculator. The doctype must be XHTM Strict, so I am using id= in the form fields rather than name. However, my alert box will not pop up unless i change it to transitional and change the id to name....i am going nuts trying to figure this out. Any help would be greatly appreciated.


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calculate Shipping</title>

    <script type="text/javascript">
    /* <![CDATA[ */
    function calculateshipping()
    {
    var salesprice = parseFloat(document.calcship.price.value);
    var salestotal = salesprice;

    if (salesprice <= 25)
    salestotal += 1.5;

    else
    salestotal += salesprice * 1.1;
    window.alert("Your total cost including shipping is $" + salestotal);
    }
    /* ]]> */
    </script>

    </head>

    <body>
    <h1>Calculate Shipping and Handling</h1>
    <form action="" id="calcship">
    <p>Please enter the Purchase Price: <input type="text" id="price" /></p>
    <p><input type="button" value="Calculate Shipping and Handling" onclick="calculateshipping()" /></p>
    </form>
    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,252
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    It is the form itself where the name attribute is deprecated. Form elements may and should be addressed by name.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calculate Shipping</title>
    
    <script type="text/javascript">
    /* <![CDATA[ */
    function calculateshipping() {
    var salesprice = parseFloat(document.forms[0].price.value);
    var salestotal = salesprice;
    
    if (salesprice <= 25) {
    salestotal += 1.5;
    }
    
    else {
    salestotal = (salesprice * 1.1).toFixed(2);
    window.alert("Your total cost including shipping is $" + salestotal);
    }
    }
    /* ]]> */
    </script>
    
    </head>
    
    <body>
    <h1>Calculate Shipping and Handling</h1>
    <form action="" id="calcship">
    <p>Please enter the Purchase Price: <input type="text" name = "price" id="price" /></p>
    <p><input type="button" value="Calculate Shipping and Handling" onclick="calculateshipping()" /></p>
    </form>
    </body>
    </html>
    Or pass the id of the form to the script with
    <p><input type="button" value="Calculate Shipping and Handling" onclick="calculateshipping(this.form)" /></p>
    and in the script
    function calculateshipping(frm) {
    var salesprice = frm.price.value;


    Some tips: alert() is quite obsolete aand useful only for debugging - you should use DOM methods such as innerHTML to display the result.

    It is recommended that the opening brace { is placed on the same line as the function, if, else, do, while, or for statement and not on the following line. This is because of something known as automatic semi-colon insertion. If you disregard this advice it is looking out and one day it will rise up and bite you in the undercarriage, and create an error which can be hard to find.

    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.




    "Copy from one book, it’s called plagiarism; copy from three, it’s called research." -- Wilson Mizner (1876-1933)
    Last edited by Philip M; 06-24-2012 at 07:54 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •