CODEWITHSUNDEEP
phpmysqlhtmlajax
coder101
coder101

Reputation: 1605

Sending Checkbox Values to PHP page using javascript Ajax and not jQuery

I have a situation in which i need to do insert queries for every check box selected through an ajax request sent to a php script which would do the insert in mysql.

i know how to do it without an ajax call via the simple form submission with a variable like groups[] as an array and running the foreach loop in php for every value in the array.

How do i send the array a via post ajax request?

a sample code:

<input type='checkbox' name='groups[]' value='1'>Group A
<input type='checkbox' name='groups[]' value='2'>Group B
<input type='checkbox' name='groups[]' value='3'>Group C

Please help, i know this might be easy but i am just not getting it. and guys, please don't give any example of jquery or the likes as i want pure html, javascript and php solution.

Thanks community...

Here's the Javascript function:

<script type='text/javascript'>
function addResp(tid){

a = encodeURIComponent(document.getElementById('course_add_resp').value);
b = encodeURIComponent(document.getElementById('term_add_resp').value);
c = encodeURIComponent(document.getElementById('paper_add_resp').value);

var elements = document.getElementsByName('groups[]');  
var data = [];
for (var i = 0; i < elements.length; i++){
if (elements[i].checked){
    data.push('groups[]='+elements[i].value);
   }
}
params = "tid="+tid+"&course="+a+"&sem="+b+"&paper="+c+"&grp="+data;
if (window.XMLHttpRequest)
 {
xmlhttp=new XMLHttpRequest();
 }
else
   {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.body.removeChild(document.getElementById('respBackground'));
document.body.removeChild(document.getElementById('respBox'));      
contents = xmlhttp.responseText;    
if(contents == "done"){
window.location = "teachers.php";
} else{
document.getElementById("studentBox").innerHTML = "There was a problem serving the     request.";
 }

    }
  }
 xmlhttp.open("POST","assignresp.php",true);
 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlhttp.send(params);

 }

</script>

and the php script:

  <?php

  $tid = mysql_real_escape_string($_POST['tid']);
  $cid = mysql_real_escape_string($_POST['course']);
  $sem = mysql_real_escape_string($_POST['sem']);
  $paper = mysql_real_escape_string($_POST['paper']);
  $session = 12;
  $type = 1;

  $groups = $_POST['grp'];

  foreach ($groups as $value ) {
      $q1 = "insert into iars(sessionid,teacherid,courseid,semester,paperid,groupid,type)    values('$session','$tid','$cid','$sem','$paper','$value','$type')";
      $r1 = mysql_query($q1) or die(mysql_error());
      if(mysql_affected_rows() > 0){
          echo "done";
      }
      else{
          echo "fail"; 
      } 
  }


 ?>

Upvotes: 0

Views: 4183

Answers (2)

Musa
Musa

Reputation: 97672

var elements = document.getElementsByName('groups[]');  
var data = [];
for (var i = 0; i < elements.length; i++){
    if (elements[i].checked){
        data.push('groups[]='+elements[i].value);
    }
}
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data.join('&'));
//for get
//xmlhttp.open("GET",url+"?"+data.join('&'),true);
//xmlhttp.send();

EDIT

Change these two lines.

params = "tid="+tid+"&course="+a+"&sem="+b+"&paper="+c+"&"+data.join('&');

$groups = $_POST['groups'];

Upvotes: 3

Hiren Soni
Hiren Soni

Reputation: 574

you can do this with two way,

  1. you can use the post type ajax call

  2. You can get the all selected checkbox values with JavaScript make comma separated string and just pass it in one variable

that's all you can do .... :)

Upvotes: 0

Related Questions