I am not able to set the Global variable in the following code. What am i doing wrong?

Question

Here is the issue: I am trying check and uncheck the check boxes by a group.

So if you select G1 and G2, it throws a message that you cant mix groups. If you uncheck all of them, i am trying to clear the existing grouping and that is where the code seems to fail.

Any thoughts? (also,i might be having a wrong idea about that global var at the beginning. so please suggest)

<HTML>
<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
    {
    ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
        if (prodSel == "") 
            {
                prodSel = a;
            }else 
            {
            if (prodSel != a)
                {
                alert ( "Please ensure that the groups are same for the items you select");
                //alert(b);
                document.getElementById(b).checked  = false;
                }
            }

}

function ClearAllSelections()
{
    var inputs = document.getElementsByTagName("input"); 
    var cbs = []; 
        for (var i = 0; i < inputs.length; i++) 
            {  
                if (inputs[i].type == "checkbox") 
                    {  
                        inputs[i].checked = false;
                    }  
            }  
prodSel=""; // Clear the  variable; allow new selections
}

/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
var clre = true;
    var inputs = document.getElementsByTagName("input"); 
    var cbs = []; 
        for (var i = 0; i < inputs.length; i++) 
            {  
                if (inputs[i].type == "checkbox") 
                    {  
                        if (inputs[i].checked){clre= false;}
                    }  
            }  
            if (clre){
prodSel=""; // Clear the  variable; allow new selections
alert(window.prodSel);
}
}
</script>
<body>


G1<input type="checkbox" value="zxc" id="12" onclick="javascript:VerifyGroup('g1',12);"><BR>
G1<input type="checkbox" value="zxcw" id="123" onclick="javascript:VerifyGroup('g1',123);"><BR>
G1<input type="checkbox" value="zxcdw" id="124" onclick="javascript:VerifyGroup('g1',124);"><BR>
G2<input type="checkbox" value="zxcf" id="125" onclick="javascript:VerifyGroup('g2',125);"><BR>
G2<input type="checkbox" value="zxcfg" id="126" onclick="javascript:VerifyGroup('g2',126);"><BR>
<a href="#" onclick="ClearAllSelections();">clear group</a>
</body>
</html>

OK, we now know what you want. Is the code you posted doing that? If not, what is working differently than you thought? — Steve, Mar 14 '13 at 17:11
No, the code fails to clear grouping upon the last uncheck. So the call to function ClearAllSelectionsA fails to reset the variable to "". hence i have to manually include a clear function. — schar, Mar 14 '13 at 17:12
I think it might have something to do with all your id's being numeric. Try putting a letter in front of all your id's, and passing the new string as the second parameter to `VerifyGroup`. [The id attribute must contain a letter](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html/79022#79022) — jonhopkins, Mar 14 '13 at 17:16
`language="javascript"` is deprecated use `type="text/javascript"` instead. You should try to avoid global variables - or if it isn't avoidable - use namespacing or an immediately self executed function to minimize the "pollution" of the global namespace — Andreas, Mar 14 '13 at 17:18
@Andreas : Changed it. Thanks for suggestion but that did not work either. — schar, Mar 14 '13 at 17:20
When you call `ClearAllSelectionsA`, if all the checkboxes are unchecked, then `prodSel` gets cleared. Then back in `VerifyGroup`, `prodSel` is immediately being reassigned to `a` — jonhopkins, Mar 14 '13 at 17:22
@johnhopkins : you might have caught it. let me check your suggestion. — schar, Mar 14 '13 at 17:24
@johnhopkins - thank you. thank you all who looked at it. it solves the problem :D — schar, Mar 14 '13 at 17:27

score 1 · Accepted Answer · answered Mar 14 '13 at 17:28

When you call ClearAllSelectionsA, if all the checkboxes are unchecked, then prodSel gets cleared. Then back in VerifyGroup, prodSel is immediately being reassigned to a. My recommendation would be to return true or false from ClearAllSelectionsA and act based upon that value.

<script language="javascript">
var prodSel="";
function VerifyGroup(a,b)
{
    var cleared = ClearAllSelectionsA(); // check if this is the last unselect and clear the prodSel variable
    if (prodSel == "" && !cleared) //only reset prodSel if there is a checkbox checked
    {
        prodSel = a;
    }else 
    {
        if (prodSel != a)
        {
            alert ( "Please ensure that the groups are same for the items you select");
            //alert(b);
            document.getElementById(b).checked  = false;
        }
    }
}

function ClearAllSelections()
{
    var inputs = document.getElementsByTagName("input"); 
    var cbs = []; 
    for (var i = 0; i < inputs.length; i++) 
    {
        if (inputs[i].type == "checkbox") 
        {
            inputs[i].checked = false;
        }
    }
    prodSel=""; // Clear the  variable; allow new selections
}

/*loop through and if all of them are unchecke,d clear the variable*/
function ClearAllSelectionsA()
{
    var clre = true;
    var inputs = document.getElementsByTagName("input"); 
    var cbs = []; 
        for (var i = 0; i < inputs.length; i++) 
        {  
            if (inputs[i].type == "checkbox") 
            {  
                if (inputs[i].checked){clre= false;}
            }  
        }  
        if (clre){
             prodSel=""; // Clear the  variable; allow new selections
             alert(window.prodSel);
        }
        return clre;
    }
</script>

I am not able to set the Global variable in the following code. What am i doing wrong?

1 Answers1