ajax loaded single checkbox showing udefined on javascript validation

Question

Hiall,

I have Simple HTML FROM

 <form id="adda" name="adda" method="post" action="">

    Select Batch :<br/>

    <select  name="standard" id="standard" onchange="return changestudent(this.value);"  >

        <option value="0">-Select Batch-</option>

         <option value="1">BatchName1</option>
              <option value="2">BatchName2</option>
    </select>


   Students :

    <div id="s">

    <input type="checkbox" name="sname"  value="<?=$raw2['Id']?>"  /><?=$raw2['FirstName']?> <?=$raw2['LastName']?><br />

    </div>

    <input type="button"  value="Add" onclick="return val();" style="width:80px; height:28px; color:#8A4E00; background-color:#8bc33f;cursor:pointer;margin-left:10px;" /> <? } ?>


    <input type="hidden"  name="hsid" id="hsid" value="" />

    <input type="hidden" name="sub" id="sub" value="1" />

    </form>

onchange of dropdown i have called javascript function changestudent() which is creating ajax content,showing list of the students with ckeckboxes for that batch. here is ajax function

    <script>
function changestudent(stdid)
{



    var strName="Msxml2.XMLHTTP"

            if (window.XMLHttpRequest)

            { // Mozilla, Safari, ...

                xmlhttp = new XMLHttpRequest();

            }

            else if (window.ActiveXObject)

            { // IE

                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }   



            xmlhttp.open('GET', 'changestudent.php?stdid='+stdid+'&table=studentdetail', true);

            xmlhttp.onreadystatechange = showsub;   

            xmlhttp.send(null);

}

function showsub()

{

if (xmlhttp.readyState == 4)

{

    str = xmlhttp.responseText; 



    document.getElementById("s").innerHTML = str;

}

}


    </script>

my problem is,when ajax returned single checkbox javascript function i used to validate form showing that check box undefined.

here is javacript function i used to validate form

 <script type="text/javascript">
function val()

{



    if(document.adda.standard.value=="0")

    {

        alert("Please Select Batch");

        document.adda.standard.focus();

        return false;

    }


var cnt = 0;



    for(var i = 0;i < document.adda.sname.length;i++)

    {

        //alert("1");

        if(document.adda.sname[i].checked==true)

        {

            document.adda.hsid.value = document.adda.hsid.value+','+document.adda.sname[i].value; 

            cnt = cnt+1;

        }

    }

    if(cnt==0)

    {

    alert("Please Select Student");

    return false;

    }

    document.adda.submit();

can any one help me to sort this out ? thanks in advance

Answer 1

The problem is document.adda.sname returns an array-like object if there are multiple checkboxes with that name, however if there is only one then it returns the checkbox object itself (so you can't use the [i] syntax when there's just one.

The solution is to use something else to grab the checkboxes, such as querySelectorAll , which will always return the array like object, regardless of how many were found.

var checkboxes = document.querySelectorAll('form[name=adda] input[name=sname]');

for(var i=0; i<checkboxes.length; i++){
    if(checkboxes[i].checked){
        document.adda.hsid.value = document.adda.hsid.value+','+ checkboxes[i].value; 
        cnt = cnt+1;
    }
}