CODEWITHSUNDEEP
javascript
Ravikanth
Ravikanth

Reputation: 83

Unable to receive data from checkboxes

I am trying to receive the values of the two checkbox groups when they are checked.But,I am unable to receive the data if I change the order of retrieval of these groups.

HTML:

<div class="btn-group" data-toggle="buttons">//Hai
    <p>CheckBox Group1:</p>
    <input type="checkbox"  name="hai" value="option1" onClick="cbChanged(this);">option 1
    <input type="checkbox"  name="hai" value="option2" onClick="cbChanged(this);">option 2
</div>

<div class="btn-group" data-toggle="buttons">//Hello
    <p>CheckBox Group2:</p>
    <input type="checkbox"  name="hello" value="option3" onClick="cbChanged(this);">option 3
    <input type="checkbox"  name="hello" value="option4" onClick="cbChanged(this);">option 4
</div>

JS:

//Gets hit when a checkbox has been checked/unchecked
cbChanged = function (checkboxElem)
{
    getSelectedCB();
}

//Called by above function
function getSelectedCB()
{
     var result = "";
     //Gets value from checkbox group hai
     var c1 = getcb1();
     alert(c1);
     //Gets value from checkbox group hello
     var c2 = getcb2();
     alert(c2);
     result=c1+c2;
     alert(result);
 }

 //gets value from checkbox group hai
 function getcb1()
 {
     var res="";
     var cb1 = getCheckedBoxes("hai");
     for (var i = 0; i < cb1.length; i++)
     {
         res = res + cb1[i].value + "+";
     }

    return res;
}

//gets value from checkbox group hello
function getcb2()
{
    var res="";
    var cb2 = getCheckedBoxes("hello");
    for (var i = 0; i < cb2.length; i++)
    {
        res = res + cb2[i].value + "+";
    }
    return res;
}

//Function to gets the values
function getCheckedBoxes(chkboxName)
{
 var checkboxes = document.getElementsByName(chkboxName);
    var checkboxesChecked = [];
    // loop over them all
    for (var i = 0; i < checkboxes.length; i++)
    {
        // And stick the checked ones onto an array...
        if (checkboxes[i].checked)
        {
            checkboxesChecked.push(checkboxes[i]);
        }
    }


    // Return the array if it is non-empty, or null
    return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

Problem:

When I select checkbox group 2[Hello] before checkbox group 1[hai] I am unable to receive data. But when I select "hai" before "Hello" I am able to receive data.

Please bear with me if I am making some silly mistakes.

Upvotes: 1

Views: 131

Answers (3)

spacebean
spacebean

Reputation: 1554

Try this:

http://jsfiddle.net/thespacebean/hqQF3/

You should wrap the loops in an if statement, otherwise it is trying to get the length of an array that doesn't exist when only one set it checked. The reason it was not working when you checked the second set first is because without that check it breaks when doing getcb1();

    //Gets hit when a checkbox has been checked/unchecked
    cbChanged = function (checkboxElem)
    {
        getSelectedCB();
    }
   //Called by above function
    function getSelectedCB()
    {
        var result = "";
        //Gets value from checkbox group hai
        var c1 = getcb1();
        alert(c1);
        //Gets value from checkbox group hello
        var c2 = getcb2();
        alert(c2);
        result=c1+c2;
        alert(result);
    }
    //gets value from checkbox group hai
    function getcb1()
    {

    var res="";
    var cb1 = getCheckedBoxes("hai");
        if(cb1) {
           for (var i = 0; i < cb1.length; i++)
          {
             res = res + cb1[i].value + "+";
         }

        }      
    return res;
}
//gets value from checkbox group hello
function getcb2()
{
    var res="";
    var cb2 = getCheckedBoxes("hello");
    if(cb2) {
        for (var i = 0; i < cb2.length; i++)
        {
            res = res + cb2[i].value + "+";
        }
    }
    return res;
}
//Function to gets the values 
function getCheckedBoxes(cb) { 
    var checkboxes = document.getElementsByName(cb); 
    //console.log(checkboxes.length);
    var checkboxesChecked = []; 
           // loop over them all 

      for (var i = 0; i < checkboxes.length; i++) { // And stick the checked ones onto an array... 
          if (checkboxes[i].checked) { checkboxesChecked.push(checkboxes[i]); } 
      // Return the array if it is non-empty, or null

      }
          return checkboxesChecked.length > 0 ? checkboxesChecked : [];

}

Upvotes: 0

struthersneil
struthersneil

Reputation: 2750

Just return [] instead of null at the end of getCheckedBoxes (or just return checkboxesChecked). Returning null causes it to try and call .length against null, which will halt the execution of your function at that point.

(If you absolutely must return null for some reason not shown here, then check for it in your getcb1/getcb2 functions before you enter the for loop. Also, unrelated to anything, create a single function getcb and pass 'hai' or 'hello' as a parameter.)

Upvotes: 1

MrByte
MrByte

Reputation: 1083

This part of the code:

//Function to gets the values
function getCheckedBoxes(cb)
{
 var checkboxes = document.getElementsByName(chkboxName);
    var checkboxesChecked = [];
    // loop over them all
    for (var i = 0; i < checkboxes.length; i++)
    {
        // And stick the checked ones onto an array...
        if (checkboxes[i].checked)
        {
            checkboxesChecked.push(checkboxes[i]);
        }
    }


    // Return the array if it is non-empty, or null
    return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}

I assume you meant instead of chkboxName it should be cb? Try changing that and see if it fixes your problem.

Upvotes: 0

Related Questions