I need to make a HTML form that Adds?

I am a novice at this and I am making a ACH payment form on my web page. I have a lot of it figured out, but I need to make field 7,8, and 9 add up into field 10. Can someone help me with this



How does JavaScript work, what do I need to do.

Update 2:

Thank yo so much for the responses:)

Do I add this at the end of each form field? or do I add the whole thing to beginning or ending of the script I already have.

One other thing can it be done without a add up button?

Payment Amount

Extra Principle


3 Answers

  • 1 decade ago
    Favorite Answer

    In answer to your edited question:

    - The script will only need to be placed in the html document once, it can then be called as many times as you like.

    - The example I gave you is pretty poorly written and was designed to give you the idea.

    - You don't need the button. Try adding onchange="addFields()" into each of your input fields, this will force the calculation when u change (and leave) the fields.

    If I was you, I'd go and work through some of the tutorials at http://www.w3schools.com/ so u get a better understanding of javascript and the way it works within html docs.

    The answer below mine is an example of how to do this calculation server-side which requires all form data to be posted back to the server which will, in turn, calulcate the result. That would be a better way of doing it but will require more work. Nice and simple might be your best bet to start with.

    Here you go. Have done it as verbosely and simply as possible so you can get what's going on. I've commented for you aswell. To try it out, copy and paste everything below this explanation into a .htm file and run it through your browser.

    Note: this has no error handling, obviously...

    <script language="javascript">

    function addFields()


    //declare a var

    var number;

    //set the var to the value of field 7, using parseInt to convert string to int

    number = parseInt(document.getElementById('field7').value);

    //add the value of field 8

    number += parseInt(document.getElementById('field8').value);

    //add the value of field 9

    number += parseInt(document.getElementById('field9').value);

    //set field 10 to the total we've just made.

    document.getElementById('field10').value = number;



    <!--Provide a form to enter values-->

    <input id="field7" length="30"/><br/>

    <input id="field8" length="30"/><br/>

    <input id="field9" length="30"/><br/>

    <!--Call my javascript function when the button is pressed-->

    <input type="button" value="add 'em up" onclick="addFields()"/><br/>

    <input id="field10" readonly length="30"/><br/>

  • 1 decade ago

    In the <form> tag add the following:

    action="add.php" method="post"

    Create a file in the same directory as the file that has the html form called add.php.

    Add the following to add.php:


    $field7 = $_POST['field7'];

    $field8 = $_POST['field8'];

    $field9 = $_POST['field9'];

    $field10 = $field7 + $field8 + $field9;


    $_SESSION['field10'] = $field10;

    header("location : http://www.YourSite.com/result.php")


    In result.php set up a normal web page, set up the form, and where you have field10 in the value parameter, add

    <?php echo $_SESSION['field10']; ?>

    You can store the orriginal values in the $_SESSION superglobal like we did with field10 and then put them back in their orriginal places if you want.

    You can also do this a bit more easily with JavaScript too with something like

    Var field

    field = Window.document.form.formname.fieldname

    And so on.

  • 1 decade ago

    Use a Javascript to add the fields.

Still have questions? Get your answers by asking now.