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 4 of 4
  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 trying to create a form that will allow the user to input a price and view a second amount that includes the shipping. If 25 or less, the shipping is 1.50. If 25 or more shipping is purchase price plus 10%. Nothing is happening when I submit a number. Are my variables wrong...how do I link the javaScript function to display in the form? I must use strict DTD


    <!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 (purchaseprice, minimumfee, form)
    {
    var purchaseprice=parseFloat(purchasepricetext);
    var minimumfee=1.5;
    if (form.totalpurchasprice.value <= 25)
    totalpurchaseprice=purchaseprice + minimumfee;

    else
    totalpurchaseprice=purchaseprice + [purchaseprice * 10 / 100]
    }
    /* ]]> */
    </script>


    </head>

    <body>
    <form action="">
    <p>Please enter the Purchase Price: <input type="text" id="purchaseprice" /></p>
    <p>Total Purchase Price including Shipping: <input type="text" id="totalpurchaseprice" /></p>
    </form>
    </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You are not calling the function - plus you have a few typos in the function.

    If you move the script to the bottom then you can use:

    Code:
    function calculateshipping (purchaseprice, totalpurchaseprice) 
     {
     var minimumfee=1.5;
     purchaseprice=+purchaseprice;
     if (purchasprice <= 25)
     totalpurchaseprice=purchaseprice + minimumfee;
     else
     totalpurchaseprice=purchaseprice * 1.1;
     }
    calculateshipping (
        document.getElementById('purchaseprice').value,
        document.getElementById('totalpurchaseprice').value);
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Urgent...im drowning on simplicity

    I'm really dying here...i've taken a different approach, and the button is now allowing me to submit the variable purchase price in the form. However, I do not get my document.write statement. It's as though nothing happens. I guess I do not fully understand how to call a function and have the results displayed in a seperate field on the form.


    function calculateshipping(purchaseprice, totalpurchaseprice)
    {

    if (purchasprice <= 25)
    totalpurchaseprice=purchaseprice + 1.5;
    else
    totalpurchaseprice=purchaseprice * 1.1;
    }
    /* ]]> */
    </script>
    </head>

    <body>
    <form action="" id="calcship">
    <p>Please enter the Purchase Price: <input type="text" id="purchaseprice" /></p>
    <p><button onclick="calculateshipping()">Calculate Shipping</button></p>
    </form>
    <script type="text/javascript">
    document.write("your total including shipping is:" + totalpurchaseprice);
    </script>

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,633 Times in 4,595 Posts
    Look at your code:

    You invoke the function via
    Code:
    <button onclick="calculateshipping()">
    Yet the function *says* that it is expecting to receive TWO ARGUMENTS:
    Code:
    function calculateshipping(purchaseprice, totalpurchaseprice)
    When you call the function and don't pass those arguments, they are just null and so of course nothing after that works as you expected.

    Beyond that, your code is doomed to failure for other reasons.

    You are doing document.write( ) to output the value of totalpurchaseprice, but that is happening WHEN THE PAGE IS BEING CREATED, long long before the user has entered a value and pushed the button.

    And you can't solve the problem by moving the document.write inside the function, because if you use document.write after a page is loaded, it wipes out ALL CONTENT on the page, including even the JavaScript code that did the write.

    And Felgall's answer was purposely incomplete because he didn't want to do your homework for you. I think you need to go back and reread a chapter or two.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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