I have a form with tabs which include buttons. Before the user clicks next, I want to check if at least one or all the buttons have been clicked, if clicked, the next tab shows up. If not, an alert pops up!
<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>
<script type="text/javascript" >
document.getElementById("day").onclick =
function(event) {
var btn=
document.getElementsByClassName("btns") ;
for(x=0; x<btn.length; x++){
if(btn[x].click == true){
prompt("open Next page?");
}
else {
alert("please click at least one button");
}
}
</script>
If you like just try it.
<button class="btns rem" id="mon">morning</button>
<button class="btns rem" id="oo" >afternoon</button>
<button class="btns rem" id="pp" >night</button>
<button class="btns" id="day" >Next</button>
<script type="text/javascript" >
var clickedData = "";
function setClicked(data){
clickedData = data;
}
var btn = document.getElementsByClassName("btns");
for(x = 0 ; x < btn.length; x++){
if(btn[x].id !=="day"){
const val = btn[x].innerHTML;
btn[x].onclick = function(){ setClicked(val); }
}
}
document.getElementById("day").onclick =
function(event) {
if (clickedData !== ""){
prompt("open Next page?");
}else{
alert("please click at least one button");
}
}
</script>
Better way of doing it is to use checkboxes
since you want to check if at least one or all the buttons have been clicked
. Then attach the onchange
event.
var btns = document.getElementsByClassName("radio-btn") ; var len = btns.length; var isSelected = false; while(len--) { btns[len].onchange = function() { isSelected = this.checked ? true : false; }; } document.getElementById("day").onclick = function() { if(isSelected) { alert("open Next page?"); } else { alert("please click at least one button"); } }
<form onsubmit="return false;"> <input type="checkbox" name="time" class="radio-btn rem"> Morning<br> <input type="checkbox" name="time" class="radio-btn rem"> Afternoon<br> <input type="checkbox" name="time" class="radio-btn rem"> Evening<br> <button class="btns" id="day" >Next</button> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.