Jump to content

Toggle Switch

Qazi

By Qazi
in General

 Share

Recommended Posts

Qazi Newbie

Qazi

Posted
Posted

Hello everyone
I am doing an IOT project in which is am successfull to send my microcontroller data to MySQL. I am receiving data in 0 and 1.
Now what i want to do?
I just to create a toggle switch that will ON when data in database is 1 and when data is 0 it remains OFF.
secondly when i click the switch it should OFF in case it is already ON and a data 0 should be sended to database. same in case of OFF to ON.
Please help me
You can also use Javascript.

button.PNG

Link to comment
Share on other sites
Qazi Newbie

Qazi

Posted
  • Author
Posted
<?php
$conn = mysqli_connect("localhost","root","","toggle");
// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  exit();
}
 
$sql="SELECT state FROM esp  ORDER BY no DESC LIMIT 1";
$result = mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
 
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
 
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
 
.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: #2196F3;
}
 
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
 
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
 
.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>
 
<h1 style="text-align:center;">LED STATUS</h1>
<form action="" method="POST" id="myform">
  <?php
  $row2 = mysqli_fetch_assoc($result);
  if ($row2['state']==0){
  ?>
 <label class="switch">
  <input type="checkbox" name="off" onclick="myform()">
  <span class="slider round"></span>
</label>
  <?php
  } 
  elseif ($row2['state']==1) {
    ?>
    <label class="switch">
  <input type="checkbox" name="on"  onclick="myform()" checked>
  <span class="slider round"></span>
</label>
   <?php
  }
  ?>
</form>
<script>
  function myform(){
    document.getElementById("myform").submit();
    alert("okay take it easy");
  }
  </script>
  <?php
  echo $_POST['on'];
  echo $_POST['off'];
  ?>
</body>
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Use only one, identify if 'on' add or remove 'checked' and include value if you want for the opposite value 

 <?php
$checked = "";
$OppisteCheckedVal = "ON";
if ($row2['state']==1){
$checked = "checked";
$OppisteCheckedVal = "OFF"; 
  } 
  ?>
 <label class="switch">
  <input type="checkbox" name="offOn" onclick="myform()" <?php echo $checked ?> value="<?php echo $OppisteCheckedVal; ?>">
  <span class="slider round"></span>
</label>

Haven't test but should give same result

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...