I have been trying to get this working using several methods such as $.ajax in Javascript and using a jQuery plugin found here: /
I have scoured stackoverflow and google for a solution but to no avail.
Basically what I am trying to do is make a toggle switch (enable/disable) that when clicked, sends the result via AJAX to a PHP script without navigating or reloading the page.
One of these toggle switches to be precise: /
Below I can get it to run the PHP script when the checkbox is "toggled" but it navigates to the blank PHP file page (I don't have the PHP script doing anything on success).
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="classes/mons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
<link href=".2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src=".2.2/js/bootstrap-toggle.min.js"></script>
<script src=".form.js"></script>
</head>
<body>
<form id="form" method="post" action="audio_alarm.php">
<input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
</form>
<script>
$('#toggle').change(function(){
$('#form').submit();
});
</script>
</body>
</html>
Now below is what I thought should make it work for sure but the jQuery plugin doesn't seem to be working as advertised.. Unless I've made a simple oversight..
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="classes/mons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
<link href=".2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src=".2.2/js/bootstrap-toggle.min.js"></script>
<script src=".form.js"></script>
</head>
<body>
<form id="myForm" name="myForm" action="audio_alarm.php" method="post">
<input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
</form>
<script>
$('#toggle').change(function(){
// submit the form
$(#myForm).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
</script>
</body>
</html>
I have been trying to get this working using several methods such as $.ajax in Javascript and using a jQuery plugin found here: http://jquery.malsup./form/
I have scoured stackoverflow and google for a solution but to no avail.
Basically what I am trying to do is make a toggle switch (enable/disable) that when clicked, sends the result via AJAX to a PHP script without navigating or reloading the page.
One of these toggle switches to be precise: http://www.bootstraptoggle./
Below I can get it to run the PHP script when the checkbox is "toggled" but it navigates to the blank PHP file page (I don't have the PHP script doing anything on success).
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="classes/mons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="http://malsup.github./jquery.form.js"></script>
</head>
<body>
<form id="form" method="post" action="audio_alarm.php">
<input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
</form>
<script>
$('#toggle').change(function(){
$('#form').submit();
});
</script>
</body>
</html>
Now below is what I thought should make it work for sure but the jQuery plugin doesn't seem to be working as advertised.. Unless I've made a simple oversight..
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="classes/mons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="http://malsup.github./jquery.form.js"></script>
</head>
<body>
<form id="myForm" name="myForm" action="audio_alarm.php" method="post">
<input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
</form>
<script>
$('#toggle').change(function(){
// submit the form
$(#myForm).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});
</script>
</body>
</html>
- You're returning false on the change event, not the submit. Look here – Jay Blanchard Commented Dec 13, 2016 at 13:39
- That appears to only work if the user clicks a submit button, I'm not using a submit button.. – Shane Buckley Commented Dec 13, 2016 at 13:48
- Now your code is right, But you can't see any changes because you don't have event handler after jQuery post succeeds. – Miron Commented Dec 13, 2016 at 13:54
- The PHP script inputs an entry into my database, so when I use the first code block it makes the entry but when using the .ajaxSubmit code it does not input the entry.. – Shane Buckley Commented Dec 13, 2016 at 13:56
1 Answer
Reset to default 5Following is the plete solution for you.
HTML
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="classes/mons/jquery/jquery-1.7.1.min.js"><\/script>')</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="http://malsup.github./jquery.form.js"></script>
</head>
<body>
<form id="myForm" name="myForm" action="audio_alarm.php" method="post">
<input type="checkbox" name="toggle" id="toggle" data-toggle="toggle" data-off="Disabled" data-on="Enabled" checked>
</form>
<br><br>
<div class="panel panel-default">
<div class="panel-heading" id="heading"></div>
<div class="panel-body" id="body"></div>
</div>
<div></div>
<script>
$('#toggle').change(function(){
var mode= $(this).prop('checked');
// // submit the form
// $(#myForm).ajaxSubmit();
// // return false to prevent normal browser submit and page navigation
// return false;
$.ajax({
type:'POST',
dataType:'JSON',
url:'audio_alarm.php',
data:'mode='+mode,
success:function(data)
{
var data=eval(data);
message=data.message;
success=data.success;
$("#heading").html(success);
$("#body").html(message);
}
});
});
</script>
</body>
</html>
When you enable or disable button it makes ajax call to audio_alarm.php.And data are retrieved using ajax.Hope it will help you a lot.
code for audio_alarm.php is as follows:
<?php
$mode=$_POST['mode'];
if ($mode=='true') //mode is true when button is enabled
{
//Retrive the values from database you want and send using json_encode
//example
$message='Hey my button is enabled!!';
$success='Enabled';
echo json_encode(array('message'=>$message,'success'=>$success));
}
else if ($mode=='false') //mode is false when button is disabled
{
//Retrive the values from database you want and send using json_encode
//example
$message='Hey my button is disabled!!';
$success='Disabled';
echo json_encode(array('message'=>$message,'success'=>$success));
}
?>