i have 4 check box
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="4" id="4" data-toggle="toggle" data-onstyle="default" data-width="500%" >
i want if some one "check" a check box ajax send the id of that check box and {0,1} depend on if checked then 1 , if unchecked 0 to a php script via post asap its checked or unchecked
<?php
if($_POST['id'] && $_POST['state'])
{
$id = $_POST['id'];
$state= $_POST['state'];
print $id;
print $state;
}
?>
some thing like this.
if checbox1 == checked:
post(checkbox1[id],1)
if(checkbox1== unchecked)
post(checkbox1[id],0)
how can i do this,
i have 4 check box
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="4" id="4" data-toggle="toggle" data-onstyle="default" data-width="500%" >
i want if some one "check" a check box ajax send the id of that check box and {0,1} depend on if checked then 1 , if unchecked 0 to a php script via post asap its checked or unchecked
<?php
if($_POST['id'] && $_POST['state'])
{
$id = $_POST['id'];
$state= $_POST['state'];
print $id;
print $state;
}
?>
some thing like this.
if checbox1 == checked:
post(checkbox1[id],1)
if(checkbox1== unchecked)
post(checkbox1[id],0)
how can i do this,
Share Improve this question asked Apr 28, 2017 at 13:21 Danny RockDanny Rock 251 gold badge2 silver badges4 bronze badges5 Answers
Reset to default 3Give 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);
});
no jquery:
function task(e)
{
if(e.target.checked)
{
///do post request with 1 in parameter
console.log("do post request with 1 in parameter");
}
else
{
///do post request with 0 parameter
console.log("do post request with 0 parameter");
}
}
<input type="checkbox" onclick="task(event);"/>
regars
Save this as ajax.php
in the root of your project. Run it and open the browser console to see the results:
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
var_dump($_POST['id']);
var_dump($_POST['value']);
} else {
?>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="1" id="1" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="2" id="2" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="checkbox" name="3" id="3" data-toggle="toggle" data-onstyle="default" data-width="500%" >
<input type="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:
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
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']
.