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 Coder
    Join Date
    Jun 2012
    Posts
    10
    Thanks
    10
    Thanked 0 Times in 0 Posts

    JS need help with the code using document.getElementById

    Hi guys,

    I need your help with my simple problem

    I want to add the value of textbox1 and textbox2 and then show the result using the "document.getElementById"

    Here is my code:
    ------------------------------

    <HTML>
    <HEAD>
    <TITLE></TITLE>

    </HEAD>
    <BODY>

    <script language="javascript">
    function Addnow(form)
    {
    var TextBox1 = form.textname1.value;
    var TextBox2 = form.textname2.value;
    form.textname3.value = eval(TextBox1) + eval(TextBox2);
    }
    </script>

    <form>
    <INPUT type = text name="textname1" onChange="Addnow(this.form);">
    <INPUT type = text name="textname2" onChange="Addnow(this.form);">
    <INPUT type = text name="textname3" READONLY>
    </form>

    </BODY>
    </HTML>

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Are you concatenating strings? Or are you adding/subtracting integers?

    Stay away from eval(). It is JavaScripts programming evil. Opens up all kinds of issues.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    09Harvey (06-20-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    In this case, eval didn't really do anything useful... except provide for a script injection...
    Code:
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    
    </HEAD>
    <BODY>
    
    
    <form name = "form1">
    <INPUT type = "text" name="textname1" >
    <INPUT type = "text" name="textname2" >
    <INPUT type = "text" name="textname3" >
    </form>
    
    <script language="javascript">
    function Addnow(form)
    {
      if (!(form1.textname1.value||form1.textname2.value)) {
        form1.textname3.value = 'nada';
        return false;
      }
      var TextBox1 = form1.textname1.value;
      var TextBox2 = form1.textname2.value;
      form1.textname3.value = TextBox1 + TextBox2;  //opt1 for string concatenation
      //form1.textname3.value = (Number(TextBox1)||0) + (Number(TextBox2)||0);  //opt2 for numeric operations
    }
    
    form1.textname1.onblur = form1.textname2.onblur = Addnow;
    
    </script>
    </BODY>
    </HTML>

    Edit:
    I like Philips idea for number validation (in option 2...)
    Last edited by blaze4218; 06-19-2012 at 06:24 PM.
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • Users who have thanked blaze4218 for this post:

    09Harvey (06-20-2012)

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Never use eval()!! <script language = "Javascript"> is long obsolete. Do not use upper-case for tags.

    This provides validation that the user has entered numbers (which is what I assume you require). The result is dispalyed both in the textbox and a <span>.

    It is a bad idea to assign your variables confusing names such as "TextBox1" which seems to refer to the box as opposed to its value.

    Code:
    <html> 
    <head> 
    <body>
    
    <script type = "text/javascript">
    
    function Addnow(form) {
    var val1 = Number(form.textname1.value) || 0;
    form.textname1.value = val1;  // write it back to the field
    if (val1==0) {form.textname1.value = ""}  // erase zero or NaN entries
    var val2 = Number(form.textname2.value) || 0;
    form.textname2.value = val2;
    if (val2==0) {form.textname2.value = ""}
    form.textname3.value = val1 + val2;
    document.getElementById("myspan").innerHTML = val1 + val2;
    }
    
    </script>
    
    <form>
    <input type = text name="textname1" onchange="Addnow(this.form);">
    <input type = text name="textname2" onchange="Addnow(this.form);">
    <input type = text name="textname3" readonly>
    </form>
    <span id = "myspan"></span>
    
    </body>
    </html>
    Last edited by Philip M; 06-19-2012 at 06:15 PM.

    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.

  • Users who have thanked Philip M for this post:

    09Harvey (06-20-2012)


  •  

    Posting Permissions

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