CODEWITHSUNDEEP
javascriptphpjqueryarraysajax
Tharindu Thisarasinghe
Tharindu Thisarasinghe

Reputation: 3998

Get values of a set of checked checkboxes in to a JavaScript array and pass them in a ajax request

I have a set of checkboxes (around 50) and when the user checked one or more I need to get checked checkboxes' IDs into a javascript array.

And then I need to pass them through a URL (an ajax get request), and then get those values to PHP array...

Here's what I have done so far..

$(document).ready(function(){
     $(".rrrr").click(function(){
          var id = $(this).attr('id');
          $("#page").load("ajax_file.php?t_id="+id)
     });
 });

This way, I can get and pass only one checkbox ID. How to get many values to an array ? And pass that array in the Ajax get request ?

Upvotes: 1

Views: 1427

Answers (4)

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

You can do as below. Check demo - Fiddle.

You will get a string of format cb1=false&cb2=true&cb3=true... which you can then split and process in your php.

$(document).ready(function(){
     $(".rrrr").click(function(){
          var ids = [], idsString;
          $(".rrrr").each( function() {
              ids.push( this.id + '='+ this.checked );
          });

          idsString = ids.join('&');
          $("#page").get("ajax_file.php?" + idsString);
     });
 });

To parse the query in PHP you can do:

$query = $_SERVER['QUERY_STRING'];
parse_str($query, $arr);

foreach($arr as $key => $value){
    // $key will be the checkbox id, $value will be true or false
    ...
}

Upvotes: 1

Jack jdeoel
Jack jdeoel

Reputation: 4584

use :checkbox:checked to get checked box data and to get each id with using each

$(".rrrr").click(function(){
      var selectedvalue = [];
      if ($(':checkbox:checked').length > 0) {
        $(':checkbox:checked').each(function (i) {
            selectedvalue[i] = $(this).attr('id');

        });
        $("#page").load("ajax_file.php?t_id="+selectedvalue);//this will pass as string and method will be GET
        //or
        $("#page").load("ajax_file.php",{"t_id":selectdvalue});//this will pass as array and method will be POST
       }

ajax_file.php

 $checked_id = explode(",",$_GET['t_id']); //convert php array for comes as string query
 //or
 $checked_id = $_POST['t_id'];//get array for comes as array query

Upvotes: 1

Amulya Kashyap
Amulya Kashyap

Reputation: 2373

$(document).ready(function () {
$.fn.loadFunction = function(){

$(".rrrr").click(function(){ /*Reference from answer listed above*/
  var chkbx = [];
  $(".rrrr").each( function() {
  chkbx.push( this.id + '='+ this.checked );
});

$.ajax({
  type: "POST",
  url: url,
  data: chkbx,
  success: success,
  dataType: dataType
});
}
});

<html>
<body onload="loadFunction ()"></body>
</html>

This one of simplest example via HTML & Jquery. loadFunction can be called in PHP too. Like This : 

<?php
 //all you php related codes
 $data = $_POST['data'];
 json_decode($data);
 ?>
 <script>
    $(function(){
        loadFunction();
    });
 </script>

Thanks & Cheers

Upvotes: 0

Shayan
Shayan

Reputation: 966

try this code

<ul id="checkbox-list">
    <li><input type="checkbox" id="num1"> some text</li>
    <li><input type="checkbox" id="num2"> some text</li>
    <li><input type="checkbox" id="num3"> some text</li>
    <li><input type="checkbox" id="num4"> some text</li>
    <li><input type="checkbox" id="num5"> some text</li>
</ul>


<div id="page"></div>

<script>
var timer;
$("#checkbox-list input").change(function(){
    window.clearTimeout(timer);
    var timer = window.setTimeout(function(){
        var arrayChecked = $('#checkbox-list input:checked').map(function() {
            return $(this).attr("id");
        }).toArray();
        $("#page").load("localhost?t_id="+arrayChecked.join(","))
    },1000);
});
</script>

Upvotes: 1

Related Questions