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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I really need help with this form implementation.

    This is the code i have... It allows adding the form inputs for it's calculation of them. I need to alter it so that it will calculate 6 inputs.

    <html>
    <head>
    <title>Text Summation</title>

    <script type="text/javascript">
    function calc(A,B,SUM) {
    var one = Number(A);
    if (isNaN(one)) { alert('Invalid entry: '+A); one=0; }
    var two = Number(document.getElementById(B).value);
    if (isNaN(two)) { alert('Invalid entry: '+B); two=0; }
    document.getElementById(SUM).value = one + two;
    }
    </script>

    <body>
    <form name="form" >
    Enter a number:
    <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" />
    and another number:
    <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" />
    Their sum is:
    <input name="sum" value="" id="result" readonly style="border:0px;">
    </form>

    </body>
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Sounds like homework to me. Here you are:-

    Code:
    <form name="form" > 
    Enter a number: 
    <input type = "text" name="sum1"  id="sum1"  onfocus = "this.value = ''" onchange="calc()" /> <br>
    and another number: 
    <input type = "text" name="sum2" id="sum2" onfocus = "this.value = ''" onchange="calc()" /><br> 
    and another number: 
    <input type = "text" name="sum3"  id="sum3" onfocus = "this.value = ''" onchange="calc()" /><br> 
    and another number: 
    <input type = "text" name="sum4" id="sum4" onfocus = "this.value = ''" onchange="calc()" /><br> 
    and another number: 
    <input type = "text" name="sum5" id="sum5" onfocus = "this.value = ''" onchange="calc()" /><br> 
    and another number: 
    <input type = "text" name="sum6"  id="sum6"  onfocus = "this.value = ''" onchange="calc()" /><br><br> 
    
    Their sum is: 
    <input type = "text" name="sumtot" value="" id="sumtot" readonly only"> 
    </form> 
    
    
    <script type = "text/javascript">
    
    function calc() {
    var a1 = Number(document.getElementById("sum1").value) || 0;  // trap NaN entries
    var a2 = Number(document.getElementById("sum2").value) || 0;
    var a3 = Number(document.getElementById("sum3").value) || 0;
    var a4 = Number(document.getElementById("sum4").value) || 0;
    var a5 = Number(document.getElementById("sum5").value) || 0;
    var a6 = Number(document.getElementById("sum6").value) || 0;
    
    
    document.getElementById("sum1").value = a1;  // write the values back into the fields
    document.getElementById("sum2").value = a2;
    document.getElementById("sum3").value = a3;
    document.getElementById("sum4").value = a4;
    document.getElementById("sum5").value = a5;
    document.getElementById("sum6").value = a6;
    
    var tot = a1+a2+a3+a4+a5+a6;
    document.getElementById("sumtot").value = tot;
    }
    
    </script>

    It makes little sense to assign a different name and id to the same form element.
    There is no need to assign an initial blank value to the fields which is the default anyway.
    Be aware that alerts are regarded as obsolete. You should use DOM methods to show a message to your users.


    Quizmaster: What is the largest carnivore which lives on land?
    Contestant: A whale.
    Last edited by Philip M; 08-27-2014 at 09:07 AM.

    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
    •