У меня есть код HTML, JavaScript и PHP на одной странице, работающие вместе. Я хочу отправить 0 или 1 в файл JSON при смене тумблера. Я думаю, что я почти на месте, но когда я перезагружаю страницу после переключения переключателя, он возвращается к 0.
Вот мой код
$message = '';
$error = '';
$isChecked = $_POST["status"];
if(file_exists('orders.json'))
{
$current_data = file_get_contents('orders.json');
$array_data = json_decode($current_data, true);
if($isChecked) {
$status = 1;
}else{
$status = 0;
}
$extra = array('ordersOpen' => $status);
$final_data = json_encode($extra);
if(file_put_contents('orders.json', $final_data)){
$message = "<label class='text-success'>File Appended Success fully</p>";
}
}else{
$error = 'JSON File not exits';
}
?>
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON('/orders.json', function(data) {
console.log(data);
checkbox1.checked = data.ordersOpen
});
$('.status').on('change', function() {
var isChecked = $(this).is(':checked');
var selectedData;
var $switchLabel = $('.switch-label');
console.log('isChecked: ' + isChecked);
if(isChecked) {
$.ajax({
type:"POST",
url:"/sendnotification.php",
data:{status:true},
success:function(result){
console.log("Submitted");
}
});
} else {
$.ajax({
type:"POST",
url:"/sendnotification.php",
data:{status:false},
success:function(result){
console.log("Submitted");
}
});
}
});
});
</script>
<style>
.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}
</style>
</head>
<body>
<form action="postnotification.php" method="post">
<table>
<tr>
<td>Title: </td>
<td><input type="text" name="title"></td>
</tr>
<tr>
<td>Massage: </td>
<td><input type="text" name="massage"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<p> Do you want to close orders from apps?
<div id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1" class="status">
<div class="slider round">
<span class="on">Open</span>
<span class="off">Closed</span>
</div>
</label>
</div>
</p>
</body>
</html>
Я в основном хочу изменить "ordersOpen msgstr "свойство в JSON, когда меняется тумблер, и даже если я перезагружаю страницу, переключатель должен отображаться на основании последнего изменения, сделанного в JSON. Это мой JSON. Я хочу, чтобы значение ordersOpen менялось при каждом переключении переключателя.
{"ordersOpen":0}