Call ajax each time when a checkbox is checked in php

Question

I have a page in which there are some checkboxes.Right now when ever i press submit btton, i m calling ajax.but i want the ajax to be called when any of the checkboxes is checked.

My code is as below for calling ajax.

<html>
<head>
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    function get_check_value() {
        var c_value = [];

        $('input[name="brand"]:checked').each(function () {
            c_value.push(this.value);
        });
        return c_value.join(',');

    }
    function get_store_value(){
    var d_value=[];
        $('input[name="store"]:checked').each(function () {
            d_value.push(this.value);
        });
        return d_value.join(',');
        }

    $(document).ready(function(){
   $('#btnSubmit').on('change', function (e)
   {e.preventDefault();
    alert("hi");
        //var os = $('#originState').val();
       //var c = $('#commodity').val();
        //var ds = $('#destState').val();
        var ser = get_check_value();
        var store=get_store_value();
        //var queryString = "os=" + os;
        var data = "?ser=" + ser;
        var queryString = "&ser=" + ser;
        alert(ser);
       $.ajax({
       //alert("ajax");
        type: "POST",
        url: "sortingajax.php",
        data: {ser:ser,store:store},
        dataType :  'html',
        success: function (b) {
           // alert(a+' ok. '+b)
            $('#results').html(b);
            console.log(b);
        }
    });

  });
 });

</script>


brand
    <input type="checkbox" name="brand" value="Sunbaby" id="check" />Sunbaby
    <br/>
    <input type="checkbox" name="brand" value="Advance Baby" id="check"/>Advance Baby
    <br/>
    store
    <br/>
    <input type="checkbox" name="store" value="JC Penny" id="check"/>JC Penny
    <br/>
    <input type="checkbox" name="store" value="Supermart" />Suoermart
    <br/>
    <input type="checkbox" name="store" value="Target" />Target
    <br/>


<button id="btnSubmit">sort</button>
<div id="results">
</div>
</body>
</html>

Currently i m calling ajax on pressing button,but i want to call ajax each time and fetch the results when ever any of the checkbox is checked.. Please tell me what can i change or add here in above code.

IDs MUST be unique too. And you need to CLICK a button – mplungjan Apr 18 '14 at 20:07 — mplungjan, Apr 18 '14 at 20:07

score 0 · Answer 1 · answered Apr 18 '14 at 19:56

0

Just change your event, and handle click on your checkbox :

$( "[type=checkbox]" ).change(function () { ...

answered Apr 18 '14 at 19:56

Vincent Decaux

9,857
6
56
84

Click the checkbox or a blur is needed – mplungjan Apr 18 '14 at 20:09

score 0 · Answer 2 · answered Apr 18 '14 at 20:04

0

Use the change event for a changed checkbox and use the prop for checking if he is checked.

$("[type=checkbox]").change(function () {
    if(this).prop('checked')
    {
        // textbox is checked
    }
});

answered Apr 18 '14 at 20:04

R Pelzer

1,188
14
34

Click the checkbox or a blur is needed – mplungjan Apr 18 '14 at 20:10
This is a comparable question: http://stackoverflow.com/questions/8423217/jquery-checkbox-checked-state-changed-event – R Pelzer Apr 18 '14 at 20:13
I have never had any issues with click but have had issues with change. In this case he wants an action every time the checkbox is accessed, making it even more pertinent since his next click can be another box – mplungjan Apr 19 '14 at 04:14

Call ajax each time when a checkbox is checked in php

2 Answers2

Linked