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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    149
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Add/Multiply values in an HTML form

    How can I add two values entered by a user in an html form?

    For ex: Sub-Total + GST = Total

    I gave them individual names already. I want it to display on the form before it goes into the db. Can I do this in html or would I need to make it php (the adding/multiplying part not the db part obviously)

    Thanks

  • #2
    Regular Coder
    Join Date
    Aug 2013
    Posts
    149
    Thanks
    21
    Thanked 0 Times in 0 Posts
    That was a terrible example but you get what I mean.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Simplest code is:

    Code:
    <form>
    <input type="text" id="first">
    <input type="rext" id="second">
    <input type="button" id="do" value="Multiply">
    <input type="rext" id="answer" readonly>
    </form>
    <script>
    document.getElementById('do').onclick = function() {
    document.getElementById('answer').value = document.getElementById('first').value *  document.getElementById('second').value;
    };
    </script>
    Last edited by felgall; 08-12-2013 at 03:35 AM.
    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.

  • Users who have thanked felgall for this post:

    7daytheory (08-12-2013)

  • #4
    Regular Coder
    Join Date
    Aug 2013
    Posts
    149
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Thanks, is there a way of doing that without an onclick? So it just automatically shows?

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Any math you can do with javascript you can also do with php, and pretty much vice versa. And the syntax is very similar. It's purely a matter of convenience which one you choose.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Code:
    <form id="theForm">
        <input type="text" name="first">
        <input type="rext" name="second">
        <input type="rext" name="answer" readonly>
    </form>
    
    <script type="text/javascript">
    var form = document.getElementById("theForm");
    form.first.onblur = calculate;
    form.second.onblur = calculate;
    function calculate( )
    {
        var v1 = Number( form.first.value );
        var v2 = Number( form.second.value );
        form.answer.value = ( isNaN(v1) || isNaN(v2) ) 
                         ? "--invalid number(s) --"
                         : v1 * v2;
    };
    </script>
    I try very hard to avoid using id's for <form> fields (except when applying <label>s to them). I much prefer just giving an id to the form and then using the names of the fields. As above.
    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.

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's better to do in php method because arithmetic operations are well go with only php more than html.

  • #8
    New Coder
    Join Date
    Aug 2013
    Posts
    25
    Thanks
    2
    Thanked 2 Times in 1 Post
    To multiply-

    <tr class="txtMult">
    <td>
    <input name="txtEmmail" class="val1" />
    </td>
    <td>
    <input name="txtEmmail" class="val2"/>
    </td>
    <td>
    <span class="multTotal">0.00</span>
    </td>
    </tr>
    <tr class="txtMult">
    <td>
    <input name="txttax" class="val1" />%
    </td>
    <td>

    </td>
    <td>
    <span class="multTax">0.00</span>
    </td>
    </tr>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    How does that multiply anything??

    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
    •