Hopefully the following can be adapted to your frameset layout somehow – it uses a new function but is otherwise the same code as previous answer ( more or less anyway )
<?php
session_start();
$svar="buttonClicked";
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['bttn'] ) && !empty( $_POST['type'] ) ){
$type=$_POST['type'];
$bttn=$_POST['bttn'];
$_SESSION[ $svar ][ $type ]=$bttn;
header( 'HTTP/1.1 200 OK', true, 200 );
header( 'Content-Type: application/json' );
exit( json_encode( $_SESSION[ $svar ] ) );
}
}
if( !empty( $_GET['reset'] ) && $_GET['reset']=='true' && isset( $_SESSION[ $svar ] ) ){
unset( $_SESSION[ $svar ] );
header('Location: '.$_SERVER['SCRIPT_NAME'] );
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Set Colours of Buttons</title>
<style>
body, body *{
font-family:calibri,verdana,arial;
font-size:1rem;
color:black;
}
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;
}
.blue{
background-color: blue!important;
}
.yellow{
background-color: yellow!important;
}
.red{
background-color: red!important;
}
.pink{
background-color: pink!important;
}
.orange{
background-color: orange!important;
}
.purple{
background-color: purple!important;
}
.brown{
background-color: brown!important;
}
legend,fieldset{
border:none;
}
legend{
border-bottom:1px solid gray;
border-left:3px solid black;
padding:0.5rem;
margin:0 0 0 0.25rem;
}
fieldset.boxes > div{
width: 4.5rem;
height: 2rem;
margin: 0 0.25rem;
padding: 0;
float: left;
background-color:white;
border: 1px solid black;
}
</style>
<script>
(function(){
var obj={};
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 col=this.parentNode.querySelectorAll( 'input[type="button"]' );
obj[ this.parentNode.dataset.type ]=this.value;
/* 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;
}
}
/* set the colour of div boxes */
setboxes.call( this, e, obj );
/* send the ajax request to store values into session variables &/or whatever actions are required */
ajax( this.value, this.parentNode.dataset.type );
}
/* new function to set colour of boxes if all buttons clicked have same value */
function setboxes( event, _obj ){
/* get references from global obj */
var keys=Object.keys( _obj );
var values=Object.values( _obj );
if( keys.length==3 ){
/* Are all items of the same value? */
var value=values.reduce( function(a,b){ return a==b ? a : false } );
/* get nodelist of boxes */
var col=document.querySelectorAll('fieldset.boxes div');
/* If the values are all the same - set colour */
if( value ){
/* clear previous colour - if any */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* assign new colour */
for( var i=value; i > 0; i-- ){
try{
col.forEach(function(item,index,array){
if( item.dataset.value <= value )item.classList.add( colours[ value ] );
});
}catch( err ){
console.info( err )
continue;
}
}
} else {
/* mismatch in values - remove colours */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* ???? */
values.forEach( function(value){
col.forEach( function(box){
if( box.dataset.value <= value ) box.classList.add( colours[ box.dataset.value ] )
});
});
}
}
}
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 reset(e){
location.search="reset=true";
}
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 );
}
}
}
var bttn = document.querySelectorAll('form > input[ type="reset" ]')[0];
bttn.onclick=reset;
}
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 />
<fieldset class="boxes" data-type="box-speed">
<legend>Speed</legend>
<div data-value=1></div>
<div data-value=2></div>
<div data-value=3></div>
<div data-value=4></div>
<div data-value=5></div>
<div data-value=6></div>
<div data-value=7></div>
<div data-value=8></div>
</fieldset>
<fieldset class="boxes" data-type="box-temperature">
<legend>Temperature</legend>
<div data-value=1></div>
<div data-value=2></div>
<div data-value=3></div>
<div data-value=4></div>
<div data-value=5></div>
<div data-value=6></div>
<div data-value=7></div>
<div data-value=8></div>
</fieldset>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
<pre id='results'></pre>
</body>
</html>
7
solved on giving inputs to my temperature,Humidity,Number of people fields, i want my speed n Temperature fields to be get coloured