javascript - Send multiple values to the other page using ajax -

i want delete multiple rows using checkbox. have used ajax unable send multiple values. variable chk sends 1 patient id since 2 check box selected database code:

<center> <h1><u>patient details</u></h1> <table border="1" style="font-family:georgia;color:#800000;font-style:bold;"> <tr style="font-family:georgia;color:green;font-style:bold;">     <th>#</th>     <th>patient id</th>     <th>patient name</th>     <th>dob</th>     <th>gender</th>     <th>address</th>     <th>phone no.</th>     <th>medicare</th>     <th>doctor associated</th>  </tr>  <form method="post" action="delete.php"> <?php while($row=mysqli_fetch_array($result)) { $r=$row['patientid']; ?> <tr> <td><input type='checkbox' name='checkbox[]' id="checkbox[]" value=<?php   echo $r; ?>></td> <td><?php echo $row['patientid']; ?></td> <td><?php echo $row['patientname']; ?></td> <td><?php echo $row['dob']; ?></td> <td><?php echo $row['gender']; ?></td> <td><?php echo $row['address']; ?></td> <td><?php echo $row['phone']; ?></td> <td><?php echo $row['medicare']; ?></td> <td><?php echo $row['doctor']; ?></td> </tr> <?php } ?> </table> <table> <tr> <td colspan="5" align="center" bgcolor="#ffffff"><input name="del" type="button" onclick='myfunction()' id="del" value="delete"></td> </tr> </table>     <span id="msg"></span>         </form>      <script language="javascript"> function myfunction() { var xmlhttp; if(window.xmlhttprequest)     {         xmlhttp=new xmlhttprequest()     }     else         {             xmlhttp=new activexobject("microsoft.xmlhttp");         }     xmlhttp.onreadystatechange=function()     {         if(xmlhttp.readystate==4 && xmlhttp.status==200)             {                                document.getelementbyid("msg").innerhtml=xmlhttp.responsetext;              }     }     xmlhttp.open("post","delete.php",true)     var chk=document.getelementbyid("checkbox[]").value;     //alert("hello"+chk);     xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded");     xmlhttp.send("chk="+chk);  } </script> <?php  } 

without being able see html think might have slight error. name same id different each checkbox - selector method use ( getelementbyid ) return 1 element - given ids must unique html considered valid.

rather use getelementbyid use getelementsbytagname or better queryselectorall

a typical checkbox group might following:-

<!--     name of checkbox within group should not unique id      should be. javascript return comma separated string should      trivial parse @ backend php script give series of      ids delete.        --> <label><input type="checkbox" name="checkbox[]" value="1" id="cbg_0" checked>cb1</label> <label><input type="checkbox" name="checkbox[]" value="2" id="cbg_1">cb2</label> <label><input type="checkbox" name="checkbox[]" value="3" id="cbg_2" checked>cb3</label> <label><input type="checkbox" name="checkbox[]" value="4" id="cbg_3">cb4</label> <label><input type="checkbox" name="checkbox[]" value="5" id="cbg_4" checked>cb5</label>   <script language="javascript">      function myfunction() {          var xmlhttp=( window.xmlhttprequest ) ? new window.xmlhttprequest : new activexobject("microsoft.xmlhttp");          xmlhttp.onreadystatechange=function(){             if( xmlhttp.readystate==4 && xmlhttp.status==200 ) {                 document.getelementbyid("msg").innerhtml=xmlhttp.responsetext;             }         }         xmlhttp.open( "post", "delete.php", true )         xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded");          var col=document.queryselectorall('input[type="checkbox"][name="checkbox[]"]');         /* name here should match name of checkboxes in group */          var tmp=[];         for( var n in col ) if( n && col[n] && col[n].nodetype==1 && col[n].checked==true ) tmp.push( col[n].value );         var chk=tmp.join(',');           xmlhttp.send("chk=["+chk+"]");     } </script>