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 3 of 3
  1. #1
    lzr
    lzr is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Calculating multiple variables onclick

    Hi,
    I have a js that introduces some function a() that includes math formulas for a number of variables, say v1, v2,v3, etc. When a user enters data in my form and clicks a button, the calculated values of all the variables have to be displayed in appropriate fields of the form. I am using this script:
    Code:
    <td><input value="Calculate" onclick="a(document.form.v1.value);" type="button"></td>
    Note that although it includes only variable v1, I saw that all other variables (v2, v3, etc) are also calculated onclick and displayed in the form. This is good, however, I am not sure if this is the right practice and this script would work in all browsers. I wonder if anyone could suggest the best practice for a form buttom that would calculate and display multiple variables onclick.
    Thanks.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Best practice would be to move the JavaScript out of the HTML input tag and into a separate JavaScript file. Simply give the button an id and then you can attach as much onclick JavaScript as you need in the JavaScript file rather than in the HTML.

    <input value="Calculate" id="calc" type="button">

    Code:
    document.getElementBiId('calc').onclick = function() {
       a(document.form.v1.value); // or whatever JavaScript you want
       b(document.form.v2.value);
    };
    or better still use an event listener instead of the event handler so that other independent actions can be attached to the same event.
    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:

    lzr (12-13-2012)

  • #3
    lzr
    lzr is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Best practice would be to move the JavaScript out of the HTML input tag and into a separate JavaScript file. Simply give the button an id and then you can attach as much onclick JavaScript as you need in the JavaScript file rather than in the HTML.

    <input value="Calculate" id="calc" type="button">

    Code:
    document.getElementBiId('calc').onclick = function() {
       a(document.form.v1.value); // or whatever JavaScript you want
       b(document.form.v2.value);
    };
    Stephen,
    Thank you for the script. Should this code be placed inside or outside the brackets that describe my js function a()? Actually, I tried both ways but it does not seem to work. I put the script for my function a() along with your code in an external .js file and changed html for the button exactly as wrote, but I am not proficient with js so maybe I am missing a simple thing. And I presume of course if all v1, v2, etc are described within the same function a(), I can put there
    a(document.form.v1.value);
    a(document.form.v2.value);
    ?


  •  

    Posting Permissions

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