title: Reset values to zero on clicking reset, and on the bases of values generated i want a speedometer showing temp and speed
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!saample.html&gt;
  
  &lt;html&gt;
  &lt;frameset rows="50%,50%"&gt;
  &lt;frame src="frame1.php"&gt;
  &lt;frame src="k3.html"&gt;
  &lt;/frameset&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!frame1.php&gt;
  
  &lt;?php
      session_start();
  
      if( $_SERVER['REQUEST_METHOD']=='POST' ){
          if( !empty( $_POST['bttn'] ) &amp;&amp; !empty( $_POST['type'] ) ){
  
              $type=$_POST['type'];
              $bttn=$_POST['bttn'];
  
  
              $_SESSION['buttonClicked'][ $type ]=$bttn;
  
              exit( json_encode( $_SESSION['buttonClicked'] ) );
          }
      }
  ?&gt;
  
  &lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset='utf-8' /&gt;
          &lt;title&gt;Set Colours of Buttons&lt;/title&gt;
          &lt;style&gt;
          .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;
          }
          &lt;/style&gt;
          &lt;script&gt;
              (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 &gt; 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 &amp;&amp; xhr.status==200 ){
                              document.getElementById('results').innerHTML=this.response;
                          }
                      };
                      var params='bttn='+value+'&amp;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 &amp;&amp; col.length &gt; 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 );
              }());
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;form action='chk.php' method='post'&gt;
              &lt;div align="left"&gt;Temperature &lt;/div&gt;
  
              &lt;input type="button" class="button" data-class='b' data-type='temperature' value="1"&gt;
              &lt;input type="button" class="button" data-class='b' data-type='temperature' value="2"&gt;
              &lt;input type="button" class="button" data-class='b' data-type='temperature' value="3"&gt;
              &lt;input type="button" class="button" data-class='b' data-type='temperature' value="4"&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;div align="left"&gt;Humidity&lt;/div&gt;
              &lt;input type="button" class="button1" data-class='b1' data-type='humidity' value="1"&gt;
              &lt;input type="button" class="button1" data-class='b1' data-type='humidity' value="2"&gt;
              &lt;input type="button" class="button1" data-class='b1' data-type='humidity' value="3"&gt;
              &lt;input type="button" class="button1" data-class='b1' data-type='humidity' value="4"&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;div align="left"&gt;Number of people &lt;/div&gt;
              &lt;input type="button" class="button2" data-class='b2' data-type='people' value="1"&gt;
              &lt;input type="button" class="button2" data-class='b2' data-type='people' value="2"&gt;
              &lt;input type="button" class="button2" data-class='b2' data-type='people' value="3"&gt;
              &lt;input type="button" class="button2" data-class='b2' data-type='people' value="4"&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;input type='submit' value='submit'&gt;
              &lt;input type='reset' value='reset' onclick="window.location='k7.php'"&gt;
          &lt;/form&gt;
    
            &lt;pre id='results'&gt;&lt;/pre&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;! frame2.php&gt;
  
   &lt;html&gt;
  &lt;head&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
    $(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;
          case "3":
            classToAdd = "green";
            break;
          case "4":
            classToAdd = "yellow";
            break;
      case "5":
            classToAdd = "pink";
            break;
          
          default:
            break;
        };
  
        $("input").each(function(index,value){
          var actualClass = $(value).attr("class");
          if(index &lt; thisDiv){
            $(value).addClass(classToAdd).removeClass(actualClass);
          }else{
          if(actualClass != "button"){
              $(value).addClass("button").removeClass(actualClass);
            }
            
          }
  
          
          
        });
        
      });
    });
  &lt;/script&gt;
  &lt;?php
    $_SESSION["buttonClicked"] = $_POST["buttonClicked"];
    echo '$_SESSION["buttonClicked"]';
  ?&gt;
  &lt;style&gt;
  .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;
  }
  .pink{
    background-color: pink;
    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;
  }
  &lt;/style&gt;
          &lt;script&gt;
              (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 &gt; 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 &amp;&amp; xhr.status==200 ){
                              document.getElementById('results').innerHTML=this.response;
                          }
                      };
                      var params='bttn='+value+'&amp;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 &amp;&amp; col.length &gt; 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 );
              }());
          &lt;/script&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div align="left"&gt;Temperature &lt;/div&gt;
    &lt;form action='chk.php' method='post'&gt;
    &lt;input type="button" class="button" value="1"&gt;
    &lt;input type="button" class="button" value="2"&gt;
    &lt;input type="button" class="button" value="3"&gt;
    &lt;input type="button" class="button" value="4"&gt;
    &lt;input type="button" class="button" value="5"&gt;
    
    &lt;br&gt;
    &lt;br&gt;
    
    &lt;div align="left"&gt;Speed &lt;/div&gt;
    &lt;input type="button" class="button" value="1"&gt;
   &lt;input type="button" class="button" value="2"&gt;
    &lt;input type="button" class="button" value="3"&gt;
    &lt;input type="button" class="button" value="4"&gt;
    &lt;input type="button" class="button" value="5"&gt;
    
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Firstly,on clicking the reset button, the last generated values must b erased.
  secondly, this program generates three outputs (i.e), temperature, humidity, and number of people. on the bases of these values i want the second half of my frame to display these changes on a speedometer. like when i give my input as temperature=1, humidity=1, and number of people=1, them then speedometer for two components being speed and temperature must b able to show to show these dynamic changes on clicking submit button. I could not make a speedometer though. what am i supposed do next?? I stuck! Any kind of possible help can work out. Thanks           MY Code: "sample.html" </p>