Jump to content

Recommended Posts

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 post
Share on other sites
<?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 {
  positionrelative;
  displayinline-block;
  width60px;
  height34px;
}
 
.switch input { 
  opacity0;
  width0;
  height0;
}
 
.slider {
  positionabsolute;
  cursorpointer;
  top0;
  left0;
  right0;
  bottom0;
  background-color#ccc;
  -webkit-transition.4s;
  transition.4s;
}
 
.slider:before {
  positionabsolute;
  content"";
  height26px;
  width26px;
  left4px;
  bottom4px;
  background-colorwhite;
  -webkit-transition.4s;
  transition.4s;
}
 
input:checked + .slider {
  background-color#2196F3;
}
 
input:focus + .slider {
  box-shadow0 0 1px #2196F3;
}
 
input:checked + .slider:before {
  -webkit-transformtranslateX(26px);
  -ms-transformtranslateX(26px);
  transformtranslateX(26px);
}
 
/* Rounded sliders */
.slider.round {
  border-radius34px;
}
 
.slider.round:before {
  border-radius50%;
}
</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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...