Pomoc przy przyciskach

pytanie zadane 9 czerwca 2020 w HTML i CSS przez michuuc199520 Nowicjusz (200 p.)

#dziala{
width:30px;
height:30px;}


<form>
  <input type="submit" value="on">
  <input type="hidden" name=' "webdata".Q7' value="1">
</form>
<form>
  <input type="submit" value="off">
  <input type="hidden" name=' "webdata".Q7' value="0">
</form>
<div id="dziala">
</div>

witam

oto kawałek mojego kodu

mam dwa przyciski pierwszy wysyła do sterownika wartość 1 a drugi 0

chciałbym zrobić tak żeby gdy wysyła 1 to div robi się zielony a 0 to czerwony nie potrafię sobie sam z tym poradzić albo słabo szukam

5 odpowiedzi

odpowiedź 9 czerwca 2020 przez pablop76 VIP (123,180 p.)

odpowiedź 9 czerwca 2020 przez michuuc199520 Nowicjusz (200 p.)
edycja 9 czerwca 2020 przez michuuc199520

odpowiedź 9 czerwca 2020 przez spamator12 Nałogowiec (28,230 p.)

odpowiedź 9 czerwca 2020 przez VBService Ekspert (253,420 p.)
edycja 9 czerwca 2020 przez VBService

Może coś takiego, do wykorzystania, do inspiracji. Jak coś można zrobić lepiej z tym kodem proszę o uwagi (człowiek całe życie się uczy ). Demo on-line.
Wysyłanie (submit), już chyba sam sobie potrafisz zrobić. (ajax, żeby nie "przeładowywać" strony)

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
fieldset {
  display: inline-block; 
  margin: 0px;
  padding: 10px 5px 10px 15px;
  background-color: lightgray;
  width: 200px;
  height: 40px;
  border-radius: 10px;
  float: left;
  border-color: darkgray;
  user-select: none;
}
fieldset span {
  margin-left: 10px;
}
legend {
  background-color: gray;
  border: 1px solid darkgray;
  color: white;
  padding: 1px 10px;
  border-radius: 10px;
  font-weight: bold;
}
.dioda {
  height: 20px;
  width: 20px;
  background-color: gray;
  border-radius: 50%;
  display: inline-block;  
  background: radial-gradient(circle, white, gray);
  margin-left: 5px;
}
.dioda_off {
  background: radial-gradient(circle, white, red);
  box-shadow: 0px 0px 6px 2px orangered;
  border: 1px solid firebrick;
}
.dioda_on {
  background: radial-gradient(circle, white, green);
  box-shadow: 0px 0px 6px 2px limegreen;
  border: 1px solid darkgreen;
}
.switch_ {
  height: 20px;
  width: 30px;
  background-color: gray;
  border-radius: 10%;
  display: inline-block;
  border: 1px solid gray;
  cursor: pointer;
}
.switch_off {
  background: linear-gradient(to right, white, ghostwhite, lightgray, gray, darkgray);
  box-shadow: 2px 2px 4px black;
}
.switch_on {
  background: linear-gradient(to left, white, ghostwhite, lightgray, gray, darkgray);
  box-shadow: -2px 2px 4px black;
}
span input {
  display:inline-block;
}
input[type=submit] {
  background-color: gray;
  border: 1px solid darkgray;
  border-radius: 10px;
  color: white;
  font-family: Verdana,sans-serif;
  font-weight: bold;
  font-size: 12px;
  font-variant: small-caps;
  cursor: pointer;
  text-align: center;
  padding: 1px 7px;
  margin-left: 50px;
  outline: none;
}
</style>
<script>
  $(document).ready(function() {
     $("#switch_").click(function() {
        $("#dioda").toggleClass('dioda_on', 'dioda_off');
        $("#switch_").toggleClass('switch_on', 'switch_off');
     
        if ($("#webdata_Q7").val() == "0") {
           $("#webdata_Q7").val("1");
        } else {
           $("#webdata_Q7").val("0");
        }
     });
  });
</script>
<body>

<form action="twoj_skrypt_na_serwerze">
 <fieldset>
  <legend>"webdata".Q7</legend>
  <span id="dioda" class="dioda dioda_off"></span>
  <span id="switch_" class="switch_ switch_off"></span>
  <input type="hidden" id="webdata_Q7" name=' "webdata".Q7' value="0">
  <span><input type="submit" value="Ustaw"></span>
 </fieldset>
</form>

</body>
</html>