php - ajax loaded single checkbox showing udefined on javascript validation -

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 have called javascript function changestudent() creating ajax content,showing list of students ckeckboxes batch. here 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 used validate form showing check box undefined.

here javacript function used 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 = 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 1 me sort out ? in advance

the problem document.adda.sname returns array-like object if there multiple checkboxes name, if there 1 returns checkbox object (so can't use [i] syntax when there's one.

the solution use else grab checkboxes, such queryselectorall, return array object, regardless of how many 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;     } }