www.webdeveloper.com
Results 1 to 3 of 3

Thread: how to fix value in form

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    how to fix value in form

    Code:
    <html>
    <head>
    <title>backon's Total</title>
    <script type="text/javascript">
    function display()
    {
    alert('display');
    }
    function totalfu()
    {
    var name1=document.getElementById("name").value;
    //alert(name1);
    var cake1=document.getElementById("cake").value;//alert(cake1);
    var peanut1=document.getElementById("peanut").value;//alert(peanut1);
    //alert(name1+cake1+peanut1);
    var subtotal=(cake+peanut)*12;
    var total=subtotal*20;
    document.getElementById("name").value=name;//.toFixed(2);
    document.getElementById("subtotal").value="$"+subtotal;//.toFixed(2);
    document.getElementById("total").value="$"+total;//.toFixed(2);
    }
    
    </script>
    </head>
    <body>
    <form>
    Name<input type="text" id="name"><br>
    # of cake<input type="text" id="cake"><br>
    # of peanut<input type="text" id="peanut"><br>
    Subtotal<input type="text" id="subtotal"><br>
    Tax<input type="text" id="tax"><br>
    Total<input type="text" id="total"><br>
    <input type="submit" onclick="totalfu();" value="order"><br>
    </form>
    </body>
    </html>
    here i fills three value in name field ,# of cake field,#of peanut field and then i want a form with all the values in name,subtotal and total field to be field but Nan appears in total,subtotal field and that is just for a instance.NaN appears only for short duration and immediate form gets refresh and blank form is appared.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    I don't see any jquery in this... Anyway, the reason you see 'NaN' for a short duration and then the page refreshes is because your <form> has no action set. Thus the form submits itself to the same page (so the page refreshes, clearing the form). If you want the data to go somewhere you should have an action set (and a page that can read/process the data once received). If you just want the form to do a calculation, well then you shouldn't really be using a form (as these are essentially for submitting data).

    Now as for why 'NaN' appears. It's because you store your values in variables named 'cake1' and 'peanut1' but then in your calculation you are using 'cake' and 'peanut', which do not have values, thus they return 'NaN' (not a number) when you try to preform mathematical operations on them. So you just need to update your variable names to the correct ones (either use 'cake1' and 'peanut1' for both, or 'cake' and 'peanut' for both).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2012
    Posts
    1,417
    Quote Originally Posted by Sup3rkirby View Post
    ...you shouldn't really be using a form (as these are essentially for submitting data).
    I agree with the rest of your comments, but disagree with this one point. The form is being used to take input as well as display the result of a calculation, so I think it is perfectly legitimate.

    However, my preference would be to use PHP to do the calculation server-side, rather than JavaScript, because:
    - It is more secure.
    - Presumably you want to do something with the order if a "buy" button is pressed.

    Against that, JavaScript has the advantage of displaying the calculation result without needing an "update" button.

    You could do both a JavaScript and a PHP calculation, but that creates maintenance issues as the two calculations will undoubtedly get out-of-step at some point when one is updated and not the other! Besides which, people are used to having to update changes in a shopping-cart type of process. So is it worth the added complication?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles