i have 4 buttons. onclick on 3rd button i want 1st,2nd,3rd button get coloured.Similarly onclick on 4th button,i want all the buttons get coloured.And even i want to save a value when button is clicked.like when first button is clicked, a value '1' is stored in session variable.i have to pass this variable to php file.and similarly onclick on second button,a value '2' is to be stored and same for 3rd n 4th button.how can i do this?? any kind of help will be useful
<html>
<head>
<script type='text/javascript'>
function change(that){
that.style.backgroundColor = 'yellow';
document.querySelector('.button').click()
}
</script>
<style>
.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;
}
</style>
<body>
<input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1">
<input type="button" class="button" onclick="change(this)" value="2">
<input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3">
<input type="button" class="button" onclick="this.style.backgroundColor = 'blue';" value="4">
</body>
</html></div>
I do it with JQuery you need to modify the url to the php post to pass your variable value.
regards,
<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("yourUrlToPost", { 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;
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;
}
</style>
<body>
<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">
</body>
</html>
</html></div>
If you want all the buttons to have the same color, you could introduce a new class in the document, for example, .colored-button. You'll also have to give IDs to all the four buttons. Then, create an onclick event listener for the 3rd button which adds the class to the first three buttons, and an onclick event listener for the 4th button which adds the class to all the four buttons. This can be done using jQuery's addClass method.
For storing the number of times a button is clicked, you have two approaches:
Create an input field for each button, which stores the number of clicks. This can be wrapped in a form element which will make it easier to submit the data. You can set type="hidden" on the input elements. You will have to add an onclick event listeners on the buttons to set the values in the input fields.
Add a data-number-of-clicks attribute to the buttons which store the number of times each button is clicked, and retrieve this data before submitting the data to PHP. This is a better option if you are submitting the data using AJAX. The number of clicks can be incremented by adding onclick event listeners to all the buttons.