up vote 0 down vote favorite
1

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"; 
      } 
  }


 ?>
share|improve this question
you will have to write a lot more code it you want to spurn jquerry. – Dagon Jul 27 '12 at 4:52
i don't want to use jqeury here... – coder101 Jul 27 '12 at 5:00
and i'm sure you have a good reason ... – Dagon Jul 27 '12 at 5:03
i have never used it and always have tried to write my own javascript with some help from the community.. its gonna take a while to understand that too for which i am a little short on time... – coder101 Jul 27 '12 at 5:12
its become practically the standard and there are more ajax tutorials using it than not, so it should actully save time. – Dagon Jul 27 '12 at 5:43
show 4 more comments

2 Answers

up vote 1 down vote accepted 
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'];
share|improve this answer
hey thanks a lot for the code.. i have a problem still as i am checking the values by alerting the variable data, according to ur code it is showing groups[]=1,groups[]=2 and so on... and when i changed the code to just output variable data, its shows 1,2,3 ... i just want to know how will i process the variable in php as suggested by u. i know if i coud get all the values in a php variable like $groups = $_POST[groups], i will run a foreach loop to make an insert for every value but how to go abt this using ur js code as it seems to me it will send multiple groups[] to php script.. – coder101 Jul 27 '12 at 6:52
It should work the same way , no need to change your php script – Musa Jul 27 '12 at 6:58
then in php script should i write $groups = $_POST['groups[]'] as what we are sending through javascript is groups[]=1&groups[]=2 and so on... – coder101 Jul 27 '12 at 7:17
No just $groups = $_POST['groups'] which will be an array – Musa Jul 27 '12 at 7:18
its not working either ways.. just to check, when i implode the php array its showing 2,3 as one array value and same with var_dump. somehow php taking all check box values as one array value. Please help.. – coder101 Jul 27 '12 at 12:40
show 9 more comments
up vote 0 down vote

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 .... :)

share|improve this answer
comma separated, i did think but its too complex then in php to get the values and make an insert query for every value.. – coder101 Jul 27 '12 at 5:04

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.