0

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


 ?>
Improve this question
8
  • you will have to write a lot more code it you want to spurn jquerry. Commented Jul 27, 2012 at 4:52
  • i don't want to use jqeury here... Commented Jul 27, 2012 at 5:00
  • and i'm sure you have a good reason ... Commented Jul 27, 2012 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... Commented Jul 27, 2012 at 5:12
  • its become practically the standard and there are more ajax tutorials using it than not, so it should actully save time. Commented Jul 27, 2012 at 5:43

2 Answers 2

Reset to default
3 
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'];
Improve this answer
12
  • 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.. Commented Jul 27, 2012 at 6:52
  • It should work the same way , no need to change your php script Commented Jul 27, 2012 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... Commented Jul 27, 2012 at 7:17
  • No just $groups = $_POST['groups'] which will be an array Commented Jul 27, 2012 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.. Commented Jul 27, 2012 at 12:40
0

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

Improve this answer
1
  • comma separated, i did think but its too complex then in php to get the values and make an insert query for every value.. Commented Jul 27, 2012 at 5:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.