How To Send A Post Request On Checkbox Check/uncheck Event

Question

i have 4 check box

Solution 1:

no jquery:

functiontask(e)
{
  
  if(e.target.checked)
  {
    ///do post request with 1 in parameterconsole.log("do post request with 1 in parameter");
  }
  else
  {
    ///do post request with 0 parameterconsole.log("do post request with 0 parameter");
  }
}

<inputtype="checkbox"onclick="task(event);"/>

regars

Solution 2:

Give a look at axiosjs Library. Its a lightweight Promise based HTTP client for the browser.

Features

Make XMLHttpRequests from the browser
Supports the Promise API
Intercept request and response
Transform request and response data
Automatic transforms for JSON data
Client side support for protecting against XSRF

Post Request

A post request could be made like this ...

<input type="checkbox" name="describeyouraction" id="checkbox_1">

// Post requst to /toggle route

axios.post('/toggle', {
  id: (document.getElementById("checkbox_1")).id,
  describeyouraction: (document.getElementById("checkbox_1")).name,
})
.then((response) => {
  // do something if request is successfull ...
})
.catch((error) => {
  console.log(error.response.data);
});

Solution 3:

Save this as ajax.php in the root of your project. Run it and open the browser console to see the results:

Baca Juga

<?phpif(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        var_dump($_POST['id']);
        var_dump($_POST['value']);
    } else {
?><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="checkbox"name="1"id="1"data-toggle="toggle"data-onstyle="default"data-width="500%" ><inputtype="checkbox"name="2"id="2"data-toggle="toggle"data-onstyle="default"data-width="500%" ><inputtype="checkbox"name="3"id="3"data-toggle="toggle"data-onstyle="default"data-width="500%" ><inputtype="checkbox"name="4"id="4"data-toggle="toggle"data-onstyle="default"data-width="500%" ><script>
    $('input[type="checkbox"]').on('click', function(){

        var data = {};
        data.id = $(this).attr('id');
        data.value = $(this).is(':checked') ? 1 : 0;

        console.log(data);

        $.ajax({
            type: "POST",
            url: "/ajax.php",
            data: data,
        }).done(function(data) {
                console.log(data);
        });
    });

</script><?php } ?>

Result looks like so:

Solution 4:

You can use onchange event in checkbox. Example :

<input type="checkbox" name="1" id="1"data-toggle="toggle"data-onstyle="default"data-width="500%"  onchange="some_function();">

And in function make an ajax call

Solution 5:

Add a class in your checkboxes for example, class='something', then you may try something like following (Using jQuery as tagged in your question):

$(document).ready(function() {

    $('.something').on('change', function(e) {

        var id = $(this).attr('id');

        var value = $(this).is(':checked');

        $.post('url-here', {id:id, value:value}, function(response) {

            // ...

        });


    });

});

You can retrieve the post data in php using $_POST['id'] and $_POST['value'].

javascript dox