i am trying to send the value of a toggle switch to my URL and retrieve it with Php. The code is working. The problem is every time i change the page or using the back-button i need to get the page reloaded so the toggle switch works, but when staying at the same page is doesnt work. what am doing wrong ?
This my code:
<?php
$status_water = $_GET['water_swicth'];
$status_light = $_GET['light_swicth'];
$status_air = $_GET['air_swicth'];
if ($status_water == "on")
{ $water_on = "selected";
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"water": "on", "light":off, "air":off}');
fclose($file);
}
if ($status_water == "off") {
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"water": "off", "light":"off", "air":off}');
fclose($file);
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/MyTheme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li style="font-size: 14px;">Water
<div id="water_switch">
<select name="water" id="water" data-role="flipswitch" data-mini="true">
<option value="off" myTag="off">Off</option>
<option value="on" myTag="on" <?php echo $water_on; ?>>On</option>
</select>
</div>
</li>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#water_switch').on('click', function () {
var checkStatus = $('option:selected', this).attr('mytag');
window.location.href = "stats.php?id=<?php echo $id; ?>&water_swicth=" + checkStatus;
});
});
</script>
</body>
</html>
