addition help plz !!!!!

[naveendk.55]

Hi, I want to add values of a 6 textboxs and its result should be displayed in another text box. The first six textboxes will get its values from user input. The 7th one should display its total automatically without clicking any submit or calculate button. Help plz!!!!!

[Pikachu2000]

Post the code you have so far within the forum's

 . . . 

BBCode tags, and tell us what you're having problems with.

[naveendk.55]

I have the below code that reads values from 6 text boxes and tries to display its sum in 7th text box.  This has to be done without clicking any button. As the user types its value in a text box and press tab, the 7th text box should be updated automatically. I'm new to JavaScript. Help plz

 

 

function calculate_a() {
var A = document.audit_billing_IE.Para_A_A1_score.value ;
var B = document.audit_billing_IE.Para_A_A2_score.value ;
var C = document.audit_billing_IE.Para_A_A3_score.value ;
var D = document.audit_billing_IE.Para_A_A4_score.value ;
var E = document.audit_billing_IE.Para_A_A5_score.value ;
var F = document.audit_billing_IE.Para_A_A6_score.value ;
var G = (A+B+C+D+E+F) ;
document.audit_billing_IE.product_name4.value = G ;
}

[AyKay47]

to grab the value of a textbox use..

 

var a = document.getElementById('ID').value

 

where ID is the id of your textbox

[premiso]

Look at the onBlur html attribute. This should do what you want.

 

<input type="text" name="Para_A_A6_score" onblur="javascript:calculate_a(); return false;" />

[naveendk.55]

Hi,

 

The value is displayed as 101010101010 after setting all the values for text boxes to 10. Also the text box didn't display the sum result immediately (I need to go to that text box and press tab to get the results).  Below is the script that I'm using.

 

function calculate_a() {
var a = document.getElementById('Para_A_A1_score').value ;
var b = document.getElementById('Para_A_A2_score').value ;
var c = document.getElementById('Para_A_A3_score').value ;
var d = document.getElementById('Para_A_A4_score').value ;
var e = document.getElementById('Para_A_A5_score').value ;
var f = document.getElementById('Para_A_A6_score').value ;
var g = (a+b+c+d+e+f) ;
document.audit_billing_IE.product_name4.value = g ;
}

 

 

Below is the code for calling above script

 

 

<td> Parameter A </td> 
                    <td colspan='3'> <input type="text" name="product_name4" id="product_name4" onblur="javascript:calculate_a(); return false;" /> </td>
                </tr>

[premiso]

+ in js is also the concatenation, so you need to use parseInt on each item. Example:

 

var a = parseInt(document.getElementById('Para_A_A1_score').value) ;

 

Do that for each value and it should add them up.

[naveendk.55]

Fantastic, that worked.. However, once I set the first textbox value to 10, it is not showing the total 10 in the last text box. I need to got to that box and then press tab to get it. Also for your information, I set a drop down box for the 6 textboxes, if the drop down is set to YES, then it will display 10 else 0. Once I select YES from drop down, it will display 10 in the first text box but not in the total box (that is where the sum should appear).

[PFMaBiSmAd]

Here's a method that calculates the sum in real time - http://javascript.internet.com/forms/auto-sum-form-boxes.html

[naveendk.55]

That worked. However, I I use the keyboard that total is automatically displayed. If I use the mouse to select YES or "No, then it will not calculate the total automatically.  Code I've mentioned below.

 

 

Below is the javascript that calculate total automatically while using keyboard to select YES or NO. if I use mouse, it doesn't work.

function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
  one = document.audit_billing_IE.Para_A_A1_score.value;
  two = document.audit_billing_IE.Para_A_A2_score.value; 
  three = document.audit_billing_IE.Para_A_A3_score.value; 
  four = document.audit_billing_IE.Para_A_A4_score.value; 
  five = document.audit_billing_IE.Para_A_A5_score.value; 
  six = document.audit_billing_IE.Para_A_A6_score.value; 
  document.audit_billing_IE.product_name4.value = (one * 1) + (two * 1) + (three * 1) + (four * 1) + (five * 1) + (six * 1);
}
function stopCalc(){
  clearInterval(interval);
}

 

 

 

Below is the code that should work  while using mouse also. But this doesn't work

 

<html>

    <head>
        <script type="text/javascript" src="javascript/addfunctions.js"></script>
        <script type="text/javascript">
            function enable1()

            {
                document.audit_billing_IE.Para_A_A1_comment.disabled = false;
                document.audit_billing_IE.Para_A_A1_score.value = 00;

            }
            function enable2()

            {
                document.audit_billing_IE.Para_A_A2_comment.disabled = false;
                document.audit_billing_IE.Para_A_A2_score.value = 00;
            }

            function enable3()

            {
                document.audit_billing_IE.Para_A_A3_comment.disabled = false;
                document.audit_billing_IE.Para_A_A3_score.value = 00;
            }
            function enable4()

            {
                document.audit_billing_IE.Para_A_A4_comment.disabled = false;
                document.audit_billing_IE.Para_A_A4_score.value = 00;
            }

            function enable5()

            {
                document.audit_billing_IE.Para_A_A5_comment.disabled = false;
                document.audit_billing_IE.Para_A_A5_score.value = 00;
            }
            function enable6()

            {
                document.audit_billing_IE.Para_A_A6_comment.disabled = false;
                document.audit_billing_IE.Para_A_A6_score.value = 00;
            }
            function disable1()

            {
                document.audit_billing_IE.Para_A_A1_comment.disabled = true;
                document.audit_billing_IE.Para_A_A1_score.value = 10;
            }

            function disable2()

            {
                document.audit_billing_IE.Para_A_A2_comment.disabled = true;
                document.audit_billing_IE.Para_A_A2_score.value = 10;
            }
            function disable3()

            {
                document.audit_billing_IE.Para_A_A3_comment.disabled = true;
                document.audit_billing_IE.Para_A_A3_score.value = 10;
            }
            function disable4()

            {
                document.audit_billing_IE.Para_A_A4_comment.disabled = true;
                document.audit_billing_IE.Para_A_A4_score.value = 10;
            }
            function disable5()

            {
                document.audit_billing_IE.Para_A_A5_comment.disabled = true;
                document.audit_billing_IE.Para_A_A5_score.value = 10;
            }
            function disable6()

            {
                document.audit_billing_IE.Para_A_A6_comment.disabled = true;
                document.audit_billing_IE.Para_A_A6_score.value = 10;
            }

            function na1()
            {
                document.audit_billing_IE.Para_A_A1_comment.disabled = true;
                document.audit_billing_IE.Para_A_A1_score.value = 00;
            }
            function na2()
            {
                document.audit_billing_IE.Para_A_A2_comment.disabled = true;
                document.audit_billing_IE.Para_A_A2_score.value = 00;
            }

            function na3()
            {
                document.audit_billing_IE.Para_A_A3_comment.disabled = true;
                document.audit_billing_IE.Para_A_A3_score.value = 00;
            }
            function na4()
            {
                document.audit_billing_IE.Para_A_A4_comment.disabled = true;
                document.audit_billing_IE.Para_A_A4_score.value = 00;
            }

            function na5()
            {
                document.audit_billing_IE.Para_A_A5_comment.disabled = true;
                document.audit_billing_IE.Para_A_A5_score.value = 00;
            }

            function na6()
            {
                document.audit_billing_IE.Para_A_A6_comment.disabled = true;
                document.audit_billing_IE.Para_A_A6_score.value = 00;
            }



            function changed1(el)
            {
                var sel = el.options[el.selectedIndex];
                if (sel.value == "Yes")disable1();
                if (sel.value == "No")enable1();
                if (sel.value == "Na")na1();
            }

            function changed2(el)
            {
                var sel = el.options[el.selectedIndex];
                if (sel.value == "Yes")disable2();
                if (sel.value == "No")enable2();
                if (sel.value == "Na")na2();
            }
            function changed3(el)
            {
                var sel = el.options[el.selectedIndex];
                if (sel.value == "Yes")disable3();
                if (sel.value == "No")enable3();
                if (sel.value == "Na")na3();
            }

            function changed4(el)
            {
                var sel = el.options[el.selectedIndex];
                if (sel.value == "Yes")disable4();
                if (sel.value == "No")enable4();
                if (sel.value == "Na")na4();
            }
            function changed5(el)
            {
                var sel = el.options[el.selectedIndex];
                if (sel.value == "Yes")disable5();
                if (sel.value == "No")enable5();
                if (sel.value == "Na")na5();
            }
            function changed6(el)
            {
                var sel = el.options[el.selectedIndex];
                if (sel.value == "Yes")disable6();
                if (sel.value == "No")enable6();
                if (sel.value == "Na")na6();
            }
            </script>
        </head>

        <body>
            <form  name="audit_billing_IE" method="POST" action="billing.php">
                <table>
                    <tr>
                        <td> Parameter A </td>
                        <td colspan='3'> <input type="text" name="product_name4" id="product_name4" /> </td>
                    </tr>


                    <tr>
                        <td> Procedure </td>
                        <td>
                            <select name="Para_A_A1" id = "Para_A_A1" align="center" onchange="changed1(this)">
                                <option value="s1"> Select</option>
                                <option value="Yes"> Yes </option>
                                <option value="No"> No </option>
                                <option value="Na"> Na </option>
                            </select>
                        </td>
                        <td>
                            <input type="text" name="Para_A_A1_comment" value="" disabled/>
                        </td>

                        <td align="center"> <input type="text" name="Para_A_A1_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
                        </td>
                    </tr>

                    <tr>
                        <td> Days Calculation </td>
                        <td>
                            <select name="Para_A_A2" id = "Para_A_A2" align="center" onchange="changed2(this)">
                                <option value="s2"> Select</option>
                                <option value="Yes"> Yes </option>
                                <option value="No"> No </option>
                                <option value="Na"> Na </option>

                            </select>
                        </td>

                        <td >
                            <input type="text" name="Para_A_A2_comment" value="" disabled/>
                        </td>

                        <td> <input type="text" name="Para_A_A2_score" id="Para_A_A2_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
                        </td>
                    </tr>

                    <tr>
                        <td> request form </td>
                        <td>
                            <select name="Para_A_A3" align="center" onchange="changed3(this)">
                                <option value="s3"> Select</option>
                                <option value="Yes"> Yes </option>
                                <option value="No"> No </option>
                                <option value="Na"> Na </option>

                            </select>
                        </td>

                        <td >
                            <input type="text" name="Para_A_A3_comment" value="" disabled/>
                        </td>

                        <td> <input type="text" name="Para_A_A3_score" id="Para_A_A3_score" value="" onFocus="startCalc();" onBlur="stopCalc();" />
                        </td>
                    </tr>

                    <tr>
                        <td> Case </td>
                        <td>
                            <select name="Para_A_A4" align="center" onchange="changed4(this)">
                                <option value="s4"> Select</option>
                                <option value="Yes"> Yes </option>
                                <option value="No"> No </option>
                                <option value="Na"> Na </option>

                            </select>
                        </td>

                        <td >
                            <input type="text" name="Para_A_A4_comment" value="" disabled/>
                        </td>

                        <td> <input type="text" name="Para_A_A4_score" id="Para_A_A4_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
                        </td>
                    </tr>

                    <tr>
                        <td> interaction </td>
                        <td>
                            <select name="Para_A_A5" align="center" onchange="changed5(this)">
                                <option value="s5"> Select</option>
                                <option value="Yes"> Yes </option>
                                <option value="No"> No </option>
                                <option value="Na"> Na </option>

                            </select>
                        </td>

                        <td >
                            <input type="text" name="Para_A_A5_comment" value="" disabled/>
                        </td>

                        <td> <input type="text" name="Para_A_A5_score" id="Para_A_A5_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
                        </td>
                    </tr>

                    <tr>
                        <td> MIS</td>
                        <td>
                            <select name="Para_A_A6" align="center" onchange="changed6(this)">
                                <option value="s6"> Select</option>
                                <option value="Yes"> Yes </option>
                                <option value="No"> No </option>
                                <option value="Na"> Na </option>

                            </select>
                        </td>

                        <td >
                            <input type="text" name="Para_A_A6_comment" value="" disabled/>
                        </td>

                        <td> <input type="text" name="Para_A_A6_score" id="Para_A_A6_score" value="" onFocus="startCalc();" onBlur="stopCalc();"/>
                        </td>
                    </tr>

                </table>
            </form>
        </body>                
    </html>