to pass a (dynamic) list of checkbox values using Ajax in php

Question

here is my code:

<input type="text" name="text" id="text">
<input type="button" name="but" id="but" value="click" onClick="click1()">
<div id="show_result"></div>
<?php
    echo "<br><input type='checkbox' name='type' id='all' class='type' value='all' onChange='check_change()'> All<br>";
    $gp=0;
    while($gp<5)// this 5 is for example 
    //it will vary in my original code based on DB values,
    //also $gp is not a number its actually a variable in my code.
    {
        echo "<input type='checkbox' name='type' id=".$gp." class='type' value=".$gp." onChange='check_change()'>  ".$gp."<br>";
        $gp++;
    }
?>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function check_change()
{
    var a=[];
    if(document.getElementsByClassName('type')[0].checked)
    {
        $(".type").attr("checked", true);
        a[0]=document.getElementsByClassName('type')[0].value;
    }
    else
    {
        var x = document.getElementsByClassName('type');
        var i,j=0;
        for (i = 0; i < x.length; i++) {
            if(document.getElementsByClassName('type')[i].checked)
            {
                a[j]=document.getElementsByClassName('type')[i].value;
                j++;
            }
        }
    }
    display(document.getElementById('text').value,document.getElementsByClassName('type').value);
}
$(function()
{
    $(".type").attr("checked", true);
});
function click1()
{
    display(document.getElementById('text').value,document.getElementsByClassName('type').value);
}
function display(c,d) {
    $.post("s.php?c="+c+"&d="+d,{data : "some data"}, function(response){
        $("#show_result").html(response);
    });
}
</script>

i am having a textbox and a button and a dynamic list of checkboxes. I need to pass the value of the textbox and all the checked checkboxes using ajax call on two events one is button click and other is onChange of checkbox values and print those values inside a div.

s.php is the file i called using Ajax

S.php:

<?php
$c=$_GET['c'];
$d=[];
$d=$_GET['d'];
echo $d;
echo $c;
?>

Is it possible to pass these checked checkbox values using array? if so how to do it? or give me any other suggestion.

EDIT:

$(function()
    {
        $(".type").attr("checked", true);
    });
    var checkedArray = array();
function check_change()
    { 
$('.type:checked').each(function() {
    checkedArray.push($(this).attr("id"));
    display(document.getElementById('text').value);
});
    }
    function click1()
    {
        display(document.getElementById('text').value);
    }
    function display(c) {
        $.post("s.php?c="+c+"&d="+checkedArray,{data : "some data"}, function(response){
   $("#show_result").html(response);
   });

    }

When sending data to a $.post don't use a GET URL and $_GET. Also, document.getElementsByClassName() doesn't work until IE 9. You could use document.getElementsByName(). Of course, if you're using jQuery, why even use raw JavaScript? — StackSlave
– StackSlave, Commented Feb 9, 2015 at 4:56

Tintu C Raju · Accepted Answer · 2015-02-09 08:29:18Z

1

<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>

    <input type='text' id='txt'>
    <input type='button' id='btn1' value='click'>
    <?php
        echo "<br><input type='checkbox' name='type' id='all' class='type' value='all' onChange='$(this).check_change()'> All<br>";
        $gp=0;
        while($gp<5) 
        {
            echo "<input type='checkbox' name='type' id=".$gp." class='type' value=".$gp." onChange='$(this).check_change()'>  ".$gp."<br>";
            $gp++;
        }
    ?>

    <script>
    $(document).ready(function(){

        $.fn.check_change = function(){
            $("#btn1").trigger("click");
        }

        $("#all").click(function(){
            if($(this).prop('checked')) {
                $('.type').each(function() {
                        $(this).attr("checked","checked");
                    });
            }
            else {
                $('.type').each(function() {
                    $(this).prop("checked",false);
                });
            }
             $("#btn1").trigger("click");
        });

        $("#btn1").click(function(){
            txt = $("#txt").val();
            chechedArray = Array();
            $('.type:checked').each(function() {
            chechedArray.push($(this).attr("id"));
            });
            $.post('s.php',{txt:txt,check:chechedArray},function(data,status){
                alert('Response from server\n' + data );
            });
        });
    });
    </script>

s.php

<?php 
    if(isset($_POST['txt']))
    echo $_POST['txt'];
    if(isset($_POST['check']))
    print_r($_POST['check']);
?>

edited Feb 9, 2015 at 8:29

answered Feb 9, 2015 at 4:51

Tintu C Raju

2,7002 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3784251 Over a year ago

what u mentioned here as "id" checkedArray.push($(this).attr("id"));. Actually it shows me undefined if i print it.

Tintu C Raju Over a year ago

@user3784251 hi please check my updated solution. Please try the entire code and then try to make change on your code. I have checked this and its worked.

Collectives™ on Stack Overflow

to pass a (dynamic) list of checkbox values using Ajax in php

1 Answer 1

s.php

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

s.php

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related