javascripting

naveendk.55 · 09-13-2011, 02:37 PM

Hi, I'm new to javascripting. I need help with below code.

There are six html <select> tags. Each tag has options YES, NO and NA. I want to count the number of 'NO' selected by the user and assign it to a textbox value. help please.

devnull69 · 09-13-2011, 02:51 PM

Do you want to do that only once? On a click of a button maybe? Or everytime the user changes one of the selects? We need more info!

The counting can be done like this:

Code:

var counter = 0; // counting NO
var allSelects = document.getElementsByTagName('select');
for(i=0; i<allSelects.length; i++) {
   if(allSelects[i].value == 'NO') counter++;
}
// I assume that the destination textbox has an id attribute 'mytextbox'
document.getElementById('mytextbox').value = counter;

naveendk.55 · 09-13-2011, 03:05 PM

I want it to change the value every time the user change the Select options.

devnull69 · 09-13-2011, 03:13 PM

Then you will have to move the above code into a function and call this function onchange of every select

Code:

var allSelects = document.getElementsByTagName('select');

function countNo() {
   var counter = 0; // counting NO
   for(i=0; i<allSelects.length; i++) {
      if(allSelects[i].value == 'NO') counter++;
   }
   // I assume that the destination textbox has an id attribute 'mytextbox'
   document.getElementById('mytextbox').value = counter;
}

for(i=0; i<allSelects.length; i++) {
   allSelects[i].onchange = countNo;
}

naveendk.55 · 09-13-2011, 05:20 PM

I tried that and it is not showing the count in ERROR Textbox. I'm posting the HTML Code and JAVA Script. onchange="changed1(this)" is not related to the count. onchange="countNo()" is the method for counting the total errors.

Code:

<form  name="pinkskill" method="POST" action="">

            <table id="table"> 
                <tr>
                    <td background-color="green"> Evaluator Name  </td>
                    <td> <input type="text" name="evaluator_name" id="evaluator_name"/> </td>
                </tr>

                <tr>
                    <td> Agent Name </td> 
                    <td> <select name="aname" id="aname" style="width: 147px">
                            <?php
                            $result = mysql_query("SELECT name FROM empdata where role='user' ORDER BY name ASC");
                            while ($row = mysql_fetch_array($result)) {
                                echo "<option>" . $row['name'] . "</option>";
                            }
                            ?>
                        </select></td>
                </tr> 
<tr>
                    <td> ERRORS </td> 
                    <td colspan='3'> <input type="text" name="product_name3" id="product_name3" value=""  />
                    
                        
                    </td>
                </tr> 
            
               

                

                <tr align="centre">
                    <th> <span style="color:black" BGcolor="Blue"><b> PARAMETERS </span> </th>
                    <th>  <span style="color:black"><b> TOGGLE </span> </th>
                    <th>  <span style="color:black"><b> COMMENTS </span></th>
                    <th>  <span style="color:black"><b> SCORES </span> </th>
                </tr> 
                
                <tr>
                   <td colspan="4" bgcolor="CCCC66" align="left"> <b> Order Handling (Pink Skill)</b> </td>
                </tr>
                <tr>
                    <td> Processed </td> 
                   <td> 
                        <select name="Para_A_A" id = "Para_A_A" align="center" onchange="changed(this)" onchange="countNo()">
                            <option value="s1"> Select</option>
                            <option value="Yes"> Yes </option>
                            <option value="No"> No </option>
                        </select>
                    </td>
                    <td> 
                        <input type="text" name="Para_A_A_comment" value="" disabled/>
                    </td>

                    <td align="center"> <input type="text" name="Para_A_A_score" value="" />
                    </td>

                </tr>
                <tr>
                    <td>  Exit code </td>
                    <td> 
                        <select name="Para_A_A1" id = "Para_A_A1" align="center" onchange="changed1(this)" onchange="countNo()">
                            <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=""/>
                    </td>
                </tr>

                <tr>
                    <td> History Accepted</td>
                    <td> 
                        <select name="Para_A_A2" id = "Para_A_A2" align="center" onchange="changed2(this)" onchange="countNo()">
                            <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> Cases open </td>
                    <td> 
                        <select name="Para_A_A3" align="center" onchange="changed3(this)" onchange="countNo()">
                            <option value="s3"> Select</option>
                            <option value="Yes"> Yes </option>
                            <option value="No"> No </option>
                            <option value="Na" onclick="na3()"> 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> Personal Details </td>
                    <td> 
                        <select name="Para_A_A4" align="center" onchange="changed4(this)" onchange="countNo()">
                            <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> OPT </td>
                    <td> 
                        <select name="Para_A_A5" align="center" onchange="changed5(this)" onchange="countNo()">
                            <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>

Quote:

Script is mentioned below

PHP Code:


			


var allSelects = document.getElementsByTagName('select');



function countNo() {

   var counter = 0; // counting NO

   for(i=0; i<allSelects.length; i++) {

      if(allSelects[i].value == 'No') counter++;

   }

   

   document.getElementById('product_name3').value = counter;



}



for(i=0; i<allSelects.length; i++) {

   allSelects[i].onchange = countNo;

}

devnull69 · 09-13-2011, 07:40 PM

You can not use more than one onchange attribute or onchange handler at the same time.... one of them will win, and obviously it wasn't the one that calculates the number of NO's :-)

Solution: Put all the code for onchange into one function and just assign this function to one onchange attribute OR the onchange handler in the code.

naveendk.55 · 09-14-2011, 02:39 PM

Hi below is the code that automatically calculate its score. How to merge this with the above code. I tried already but it was not working. So I'm here.

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 = 40;
}

function disable2()

{
document.audit_billing_IE.Para_A_A2_comment.disabled = true;
document.audit_billing_IE.Para_A_A2_score.value = 20;
}
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();
}

naveendk.55 · 09-14-2011, 02:52 PM

Hi below is the code that automatically calculate its score. How to merge this with the above code. I tried already but it was not working. So I'm here. The function will repeat from changed1 to changed6().

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 = 40;
}

function disable2()

{
document.audit_billing_IE.Para_A_A2_comment.disabled = true;
document.audit_billing_IE.Para_A_A2_score.value = 20;
}
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();
}