user3784251
user3784251

Reputation: 520

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

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

    }

Upvotes: 0

Views: 2376

Answers (1)

Tintu C Raju
Tintu C Raju

Reputation: 2700

<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']);
?>

Upvotes: 1

Related Questions