1. Accueil
  2. Question et réponse
  3. Je veux que les champs d'humidité et de nombre de personnes aient la même fonctionnalité que mon champ de température

Je veux que les champs d'humidité et de nombre de personnes aient la même fonctionnalité que mon champ de température

2017-07-16 1 views
1

J'ai trois champs. Dans mon champ de température, le bouton onclick on devrait être coloré et stocker une valeur dans une variable de session. Je l'ai fait.Je veux que les champs d'humidité et de nombre de personnes aient la même fonctionnalité que mon champ de température

De même je veux que mon champ humdidty et nombre de personnes ait une fonctionnalité comme: sur le premier bouton, il devrait être coloré et stocker '1' comme valeur dans une session possible. En cliquant sur le 2ème bouton, je veux que le premier et le second bouton soient colorés et stockent une valeur dans la variable de session comme '2'. En cliquant sur le 3ème bouton, je veux que le 1er et le 2ème et 3ème bouton soient colorés et stockent la valeur '3'. En cliquant sur le 4ème bouton, je veux que tous les boutons soient colorés et stockent la valeur '4'.

Comme je suis nouveau à jQuery je m'efforce de le faire. Comment puis-je faire ceci???

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script type='text/javascript'> 
 
    $(document).ready(function(){ 
 
    var buttonClicked = ""; 
 

 
    $("input").on('click', function(){ 
 

 
     var thisDiv = $(this).val(); 
 
     buttonClicked = thisDiv; 
 
     var classToAdd = ""; 
 

 
     $.post("chk.php", { buttonClicked: buttonClicked}); 
 

 
     console.log(thisDiv); 
 
     switch(thisDiv){ 
 
     case "1": classToAdd = "red"; 
 
      break; 
 
     case "2": 
 
      classToAdd = "blue"; 
 
      break; 
 
\t \t case "3": 
 
      classToAdd = "green"; 
 
      break; 
 
     case "4": 
 
      classToAdd = "yellow"; 
 
      break; 
 
     default: 
 
      break; 
 
     }; 
 

 
     $("input").each(function(index,value){ 
 
     var actualClass = $(value).attr("class"); 
 
     if(index < thisDiv){ 
 
      $(value).addClass(classToAdd).removeClass(actualClass); 
 
     }else{ 
 

 
      if(actualClass != "button"){ 
 
      $(value).addClass("button").removeClass(actualClass); 
 
      } 
 
      
 
     } 
 

 
     }); 
 
     
 
    }); 
 
    }); 
 
</script> 
 
<?php 
 
    $_SESSION["buttonClicked"] = $_POST["buttonClicked"]; 
 
?> 
 
<style> 
 
.green{ 
 
    background-color: green; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.blue{ 
 
    background-color: blue; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.yellow{ 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.red{ 
 
    background-color: red; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 

 
.button { 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.button1{ 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.button2{ 
 
    background-color: white; 
 
    border: 1px solid black; 
 
    color: white; 
 
    padding: 8px 30px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
</style> 
 
<body> 
 

 
<div align="left">Temperature </div> 
 
<form action='chk.php' method='post'> 
 
    <input type="button" class="button" value="1"> 
 
    <input type="button" class="button" value="2"> 
 
    <input type="button" class="button" value="3"> 
 
    <input type="button" class="button" value="4"> 
 
<br><br> 
 
<div align="left">Humidity</div> 
 
    <input type="button" class="button1" value="1"> 
 
    <input type="button" class="button1" value="2"> 
 
    <input type="button" class="button1" value="3"> 
 
    <input type="button" class="button1" value="4"> 
 
<br><br> 
 
<div align="left">Number of people </div> 
 
    <input type="button" class="button2" value="1"> 
 
    <input type="button" class="button2" value="2"> 
 
    <input type="button" class="button2" value="3"> 
 
    <input type="button" class="button2" value="4"> 
 
<br><br> 
 
<input type='submit' value='submit'> 
 
<input type='reset' value='reset'> 
 
</body> 
 
</html>

Source

2017-07-16 Priyal Patel

+0

Salut Priyal, bienvenue à SO. S'il vous plaît prendre un moment et se pencher sur cela pour améliorer vos questions (en particulier en ce qui concerne la relecture et le formatage): https://stackoverflow.com/help/how-to-ask – petezurich

Répondre

1

Vous pourriez peut-être approcher le problème comme celui-ci - la gestion de session est qu'un exemple difficile, mais je pense que cela fait ce que je compris la question d'être.

<?php 
    session_start(); 

    if($_SERVER['REQUEST_METHOD']=='POST'){ 
     if(!empty($_POST['bttn']) && !empty($_POST['type'])){ 

      $type=$_POST['type']; 
      $bttn=$_POST['bttn']; 


      $_SESSION['buttonClicked'][ $type ]=$bttn; 

      exit(json_encode($_SESSION['buttonClicked'])); 
     } 
    } 
?> 

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8' /> 
     <title>Set Colours of Buttons</title> 
     <style> 
     .green{ 
      background-color: green; 
      border: 1px solid black; 
      color: white; 
      padding: 8px 30px; 
      text-align: center; 
      text-decoration: none; 
      display: inline-block; 
      cursor: pointer; 
      float: left; 
     } 
     .blue{ 
      background-color: blue; 
      border: 1px solid black; 
      color: white; 
      padding: 8px 30px; 
      text-align: center; 
      text-decoration: none; 
      display: inline-block; 
      cursor: pointer; 
      float: left; 
     } 
     .yellow{ 
      background-color: yellow; 
      border: 1px solid black; 
      color: black; 
      padding: 8px 30px; 
      text-align: center; 
      text-decoration: none; 
      display: inline-block; 
      cursor: pointer; 
      float: left; 
     } 
     .red{ 
      background-color: red; 
      border: 1px solid black; 
      color: white; 
      padding: 8px 30px; 
      text-align: center; 
      text-decoration: none; 
      display: inline-block; 
      cursor: pointer; 
      float: left; 
     } 
     input[type='button']{ 
      border: 1px solid black; 
      padding: 8px 30px; 
      margin:0 0.25rem; 
      text-align: center; 
      text-decoration: none; 
      display: inline-block; 
      cursor: pointer; 
      float: left; 
     } 
     </style> 
     <script> 
      (function(){ 
       var colours={ 
        1:'red', 
        2:'blue', 
        3:'green', 
        4:'yellow' 
       }; 
       var flags={ 
        passive:true, 
        capture:false 
       }; 
       function setcolours(e){ 
        var _class=this.dataset.class; 
        var col=this.parentNode.querySelectorAll('input[type="button"][data-class="'+_class+'"]'); 

        /* Clear previous colour classes assigned */ 
        col.forEach(function(e,i,a){ 
         Object.values(colours).forEach(function(c){ 
          e.classList.remove(c); 
         }); 
        }); 

        /* Add colour class to any element with a value equal to or less that selected button value */ 
        for(var i=this.value; i > 0; i--){ 
         try{ 
          if(col[ i - 1 ].nodeType==1)col[ i - 1 ].classList.add(colours[ col[ i - 1 ].value ]) 
         }catch(err){ 
          console.info(err); 
          continue; 
         } 
        } 
        ajax(this.value, this.dataset.type); 
       } 
       function ajax(value, type){ 
        var xhr=new XMLHttpRequest(); 
        xhr.onreadystatechange=function(){ 
         if(xhr.readyState==4 && xhr.status==200){ 
          document.getElementById('results').innerHTML=this.response; 
         } 
        }; 
        var params='bttn='+value+'&type='+type; 
        xhr.open('post', location.href, true); 
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
        xhr.send(params); 
       } 
       function bindEvents(e){ 
        var col = document.querySelectorAll('input[type="button"]'); 
        if(col && col.length > 0){ 
         for(var n in col){ 
          if(col[ n ].nodeType==1){ 
           col[ n ].addEventListener('click', setcolours.bind(col[ n ]), flags); 
          } 
         } 
        } 
       } 
       document.addEventListener('DOMContentLoaded', bindEvents, flags); 
      }()); 
     </script> 
    </head> 
    <body> 

     <form action='chk.php' method='post'> 
      <div align="left">Temperature </div> 

      <input type="button" class="button" data-class='b' data-type='temperature' value="1"> 
      <input type="button" class="button" data-class='b' data-type='temperature' value="2"> 
      <input type="button" class="button" data-class='b' data-type='temperature' value="3"> 
      <input type="button" class="button" data-class='b' data-type='temperature' value="4"> 
      <br /> 
      <br /> 
      <div align="left">Humidity</div> 
      <input type="button" class="button1" data-class='b1' data-type='humidity' value="1"> 
      <input type="button" class="button1" data-class='b1' data-type='humidity' value="2"> 
      <input type="button" class="button1" data-class='b1' data-type='humidity' value="3"> 
      <input type="button" class="button1" data-class='b1' data-type='humidity' value="4"> 
      <br /> 
      <br /> 
      <div align="left">Number of people </div> 
      <input type="button" class="button2" data-class='b2' data-type='people' value="1"> 
      <input type="button" class="button2" data-class='b2' data-type='people' value="2"> 
      <input type="button" class="button2" data-class='b2' data-type='people' value="3"> 
      <input type="button" class="button2" data-class='b2' data-type='people' value="4"> 
      <br /> 
      <br /> 
      <input type='submit' value='submit'> 
      <input type='reset' value='reset'> 
     </form> 

     <pre id='results'></pre> 
    </body> 
</html>

Parce que le temps est terrible, j'ai pu passer un peu de temps à l'ordinateur portable et a fini par modifier le balisage, css & javascript.

<?php 
    session_start(); 

    if($_SERVER['REQUEST_METHOD']=='POST'){ 
     if(!empty($_POST['bttn']) && !empty($_POST['type'])){ 

      $type=$_POST['type']; 
      $bttn=$_POST['bttn']; 


      $_SESSION[ 'buttonClicked' ][ $type ]=$bttn; 

      header('HTTP/1.1 200 OK', true, 200); 
      header('Content-Type: application/json'); 
      exit(json_encode($_SESSION[ 'buttonClicked' ])); 
     } 
    } 
?> 

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8' /> 
     <title>Set Colours of Buttons</title> 
     <style> 
      input[type='button']{ 
       background-color:white; 
       border: 1px solid black; 
       padding: 0.5rem 2rem; 
       margin:0 0.25rem; 
       text-align: center; 
       text-decoration: none; 
       display: inline-block; 
       cursor: pointer; 
       float: left; 
      } 
      .green{ 
       background-color: green!important; 
       color: white; 
      } 
      .blue{ 
       background-color: blue!important; 
       color: white; 
      } 
      .yellow{ 
       background-color: yellow!important; 
       color: black; 
      } 
      .red{ 
       background-color: red!important; 
       color: white; 
      } 
      .pink{ 
       background-color: pink!important; 
       color: black; 
      } 
      .orange{ 
       background-color: orange!important; 
       color: white; 
      } 
      .purple{ 
       background-color: purple!important; 
       color: white; 
      } 
      .brown{ 
       background-color: brown!important; 
       color: white; 
      } 
      legend,fieldset{ 
       border:none; 
      } 
      legend{ 
       border-bottom:1px solid gray; 
       padding:0.5rem; 
      } 
     </style> 
     <script> 
      (function(){ 
       var colours={ 
        1:'red', 
        2:'orange', 
        3:'yellow', 
        4:'pink', 
        5:'brown', 
        6:'purple', 
        7:'blue', 
        8:'green' 
       }; 
       var flags={ 
        passive:true, 
        capture:false 
       }; 
       function setcolours(e){ 
        var _type=this.parentNode.dataset.type; 
        var col=this.parentNode.querySelectorAll('input[type="button"]'); 


        /* Clear previous colour classes assigned */ 
        col.forEach(function(e,i,a){ 
         Object.values(colours).forEach(function(c){ 
          e.classList.remove(c); 
         }); 
        }); 

        /* Add colour class to any element with a value equal to or less that selected button value */ 
        for(var i=this.value; i > 0; i--){ 
         try{ 
          if(col[ i - 1 ].nodeType==1)col[ i - 1 ].classList.add(colours[ col[ i - 1 ].value ]) 
         }catch(err){ 
          console.info(err); 
          continue; 
         } 
        } 

        /* send the ajax request to store values into session variables &/or whatever actions are required */ 
        ajax(this.value, this.parentNode.dataset.type); 
       } 

       function ajax(value, type){ 
        var xhr=new XMLHttpRequest(); 
        xhr.onreadystatechange=function(){ 
         if(xhr.readyState==4 && xhr.status==200){ 
          document.getElementById('results').innerHTML=this.response; 
         } 
        }; 
        var params='bttn='+value+'&type='+type; 
        xhr.open('post', location.href, true); 
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
        xhr.send(params); 
       } 
       function bindEvents(e){ 
        var col = document.querySelectorAll('form > fieldset > input[type="button"]'); 
        if(col && col.length > 0){ 
         for(var n in col){ 
          if(col[ n ].nodeType==1){ 
           col[ n ].addEventListener('click', setcolours.bind(col[ n ]), flags); 
          } 
         } 
        } 
       } 
       document.addEventListener('DOMContentLoaded', bindEvents, flags); 
      }()); 
     </script> 
    </head> 
    <body> 

     <form action='chk.php' method='post'> 

      <fieldset data-type='temperature'> 
       <legend>Temperature</legend> 
       <input type="button" value="1" /> 
       <input type="button" value="2" /> 
       <input type="button" value="3" /> 
       <input type="button" value="4" /> 
       <input type="button" value="5" /> 
       <input type="button" value="6" /> 
       <input type="button" value="7" /> 
       <input type="button" value="8" /> 
      </fieldset> 

      <fieldset data-type='humidity'> 
       <legend>Humidity</legend> 
       <input type="button" value="1" /> 
       <input type="button" value="2" /> 
       <input type="button" value="3" /> 
       <input type="button" value="4" /> 
       <input type="button" value="5" /> 
       <input type="button" value="6" /> 
       <input type="button" value="7" /> 
       <input type="button" value="8" /> 
      </fieldset> 

      <fieldset data-type='people'> 
       <legend>Number of people</legend> 
       <input type="button" value="1" /> 
       <input type="button" value="2" /> 
       <input type="button" value="3" /> 
       <input type="button" value="4" /> 
       <input type="button" value="5" /> 
       <input type="button" value="6" /> 
       <input type="button" value="7" /> 
       <input type="button" value="8" /> 
      </fieldset> 

      <br /> 
      <br /> 

      <input type='submit' value='submit'> 
      <input type='reset' value='reset'> 
     </form> 

     <pre id='results'></pre> 
    </body> 
</html>

Source

2017-07-16 12:31:49 RamRaider

+0

cela m'a beaucoup aidé !!!!!!!!! –

+0

.Ceci est mon lien pour une nouvelle question. https://stackoverflow.com/questions/45137101/on-giving-inputs-to-my-temperature-humidity-number-of-people-fields-i-want-my-s. Comme im nouveau à la programmation.if u aidez-moi ça sera utile pour mon projet. Merci d'avance –

 Questions connexes

  • Aucun problème connexe^_^