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>
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>
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>
Related
const btn = document.getElementById("btn");
const inputfield = document.getElementById("username");
inputfield.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
btn.disabled = true;
btn.style.backgroundColor = "grey";
} else {
btn.disabled = false;
btn.style.backgroundColor = "orange";
}
})
<div class="container">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
Now the issue is that it only works for one input and the associated button field
it does not work for another pair of input field and button , so what changes should i make in the above javascript code in which it runs for as many as input field and button i want?
Please can anyone help me in this. Thank you
If you have full jquery code it's also accepted.
My approach was to put the input and button in a div with a custom class.
And just loop over every div, get the child inputs and buttons and just use your existing code for every div.
const btns = document.getElementsByClassName('inputButton');
for (let i = 0; i < btns.length; i++) {
let input = btns[i].querySelector('input');
let button = btns[i].querySelector('button');
input.addEventListener("keyup", function(e) {
const val = e.target.value;
if (val === "") {
button.disabled = true;
button.style.backgroundColor = "grey";
} else {
button.disabled = false;
button.style.backgroundColor = "orange";
}
});
}
<div class="container">
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="inputButton">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>
Just wrap it into a additional div element and iterate trough. For each "input-group" you can add an event listener to the input child and edit the style of the button child.
document.querySelectorAll('.input-group').forEach((group) => {
let input = group.querySelector('input');
let button = group.querySelector('button');
input.addEventListener('keyup', () => {
if(input.value !== "") {
button.disabled = false;
} else {
button.disabled = true;
}
});
});
#btn[disabled] {
background: red;
}
#btn {
background: green;
}
<div class="container">
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
<div class="input-group">
<input id="username" placeholder="Username" class="input" />
<button disabled id="btn" type="button" class="button">Submit</button>
</div>
</div>
You can make a loop with a class to add an event listener to every input you want.
You can use data-whateverYouWant to link the button to the input
Also, should make your style in css.
let inputs = document.getElementsByClassName("an-input");
for (let i = 0; i < inputs.length; i++) {
inputs[i].addEventListener("keyup", function(e) {
let btn = document.querySelectorAll("[data-placeholder="+this.placeholder+"]")[0];
if (this.value === "") {
btn.disabled = true;
} else {
btn.disabled = false;
}
})
}
button{
background-color:orange;
}
button:disabled,
button[disabled]{
background-color:grey;
}
<input class="an-input" placeholder="Username" class="input" />
<button disabled data-placeholder="Username" type="button" class="button">Submit</button>
<input class="an-input" placeholder="email" class="input" />
<button disabled data-placeholder="email" type="button" class="button">Submit</button>
I have a button where it will remove the readonly attribute of input and also will show the hidden buttons.
The problem is, I need to click my button 2x so that I can do my 2nd function. My target is, how can I achieve the 1 click button only and it'll do my both functions? Remove readonly and show the hidden button.
Thank you
Fiddle: http://jsfiddle.net/rain0221/qfjar0x1/14/
//removing readonly attribute of input
$(document).ready(function() {
$('#btnEditAbout').click(function() {
var Aboutfields = document.getElementsByClassName('abt');
for (var x = 0; x < Aboutfields.length; x++) {
Aboutfields[x].removeAttribute('readonly', 'readonly');
}
});
//showing hidden buttons when edit information is clicked
var btnEditAbout = document.getElementById('btnEditAbout'),
Removeemp = document.getElementById('Removeemp');
Addemp = document.getElementById('Addemp');
function toggle() {
if (btnEditAbout.style.display === "block") {
btnEditAbout.style.display = "none";
Addemp.style.display = "block";
Removeemp.style.display = "block";
} else { // switch back
btnEditAbout.style.display = "block";
Addemp.style.display = "none";
Removeemp.style.display = "none";
}
}
btnEditAbout.onclick = toggle;
});
#btnEditAbout {
display: block;
}
#Addemp {
display: none;
}
#Removeemp {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>
You cannot click a hidden button
You CAN use jQuery more than you do
$(function() {
$('.toggle').on("click", function() {
const edit = this.id === "btnEditAbout"; // what did we click
$("#Addemp").toggleClass('hide',!edit)
$("#Removeemp").toggleClass('hide',!edit)
$("#btnCancel").toggleClass('hide',!edit)
if (edit) $(".abt").removeAttr('readonly');
else $(".abt").attr('readonly',true);
});
});
.hide { display: none }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right toggle" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button" class="hide">Add Record </button>
<button id="Removeemp" type="button" class="hide">Remove Record </button>
<button id="btnCancel" type="button" class="hide toggle">Cancel</button>
You can simply call the toggle(); inside the click event of your edit button
//removing readonly attribute of input
$(document).ready(function() {
$('#btnEditAbout').click(function() {
var Aboutfields = document.getElementsByClassName('abt');
for (var x = 0; x < Aboutfields.length; x++) {
Aboutfields[x].removeAttribute('readonly', 'readonly');
}
toggle(); // call the function here
});
//showing hidden buttons when edit information is clicked
var btnEditAbout = document.getElementById('btnEditAbout'),
Removeemp = document.getElementById('Removeemp');
Addemp = document.getElementById('Addemp');
function toggle() {
if (btnEditAbout.style.display === "block") {
btnEditAbout.style.display = "none";
Addemp.style.display = "block";
Removeemp.style.display = "block";
} else { // switch back
btnEditAbout.style.display = "block";
Addemp.style.display = "none";
Removeemp.style.display = "none";
}
}
btnEditAbout.onclick = toggle;
});
#btnEditAbout {
display: block;
}
#Addemp {
display: none;
}
#Removeemp {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>
You are using onclick event twice. You can combine then into one single event like below.
Also rather than checking btnEditAbout.style.display you could check for the window.getComputedStyle of same node. This will check the inline style aswell as the css styles.
Working Example
$(document).ready(function () {
var btnEditAbout = document.getElementById('btnEditAbout');
var Removeemp = document.getElementById('Removeemp');
var Addemp = document.getElementById('Addemp');
function toggle() {
var Aboutfields = document.getElementsByClassName('abt');
for (var x = 0; x < Aboutfields.length; x++) {
Aboutfields[x].removeAttribute('readonly', 'readonly');
}
const computedStyle = window.getComputedStyle(btnEditAbout);
if (computedStyle.display === "block") {
btnEditAbout.style.display = "none";
Addemp.style.display = "block";
Removeemp.style.display = "block";
} else { // switch back
btnEditAbout.style.display = "block";
Addemp.style.display = "none";
Removeemp.style.display = "none";
}
}
btnEditAbout.onclick = toggle;
});
#btnEditAbout {
display: block;
}
#Addemp {
display: none;
}
#Removeemp {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control form-control-sm abt" readonly name="Highschool_school" value="" type="text" placeholder="">
<!-- when this button is clicked, it will remove the readonly of the input type. Additionally, it will show the hidden 2 buttons -->
<button class="btn btn-secondary float-right" style="float:right;" id="btnEditAbout" type="button"><i
class="fas fa-edit"></i> Edit Information </button>
<!-- hidden 2 buttons -->
<button id="Addemp" type="button">Add Record </button>
<button id="Removeemp" type="button">Remove Record </button>
I am trying to disable/enable an input line by clicking a button
I can manually enter the word "closed" in an input line and it works fine, but I can not get the "closed" to get entered with a button
var obj = document.getElementById("state");
obj.onchange = function(status){
if(this.value=="closed"){
document.getElementById("test").disabled = 'disabled';
}else{
document.getElementById("test").disabled = '';
}
}
<button id="state" name="state" type="submit" value="open">open</button>
<button id="state" name="state" type="submit" value="closed">closed</button>
<input id="test"/>
The input id=state line works fine, but nothing happens when I click the buttons
There is a few things to consider :
You can’t use multiple times the same ID (state)
A button won’t react to a onChange, but a onClick
You can directly use the onClick HTML attribute
function disableInput(disabled){
document.getElementById("test").disabled = disabled
}
<button onClick="disableInput(false)">open</button>
<button onClick="disableInput(true)">closed</button>
<input id="test" />
Perhaps you want a toggle?
window.addEventListener("load", function() {
document.getElementById("state").addEventListener("click", function(e) {
e.preventDefault(); // not really needed on type="button"
var closed = this.value == "closed";
this.value = this.innerText = closed ? "open" : "closed";
document.getElementById("test").disabled = closed;
})
})
<button id="state" name="state" type="button" value="open">open</button>
<input id="test" />
Try something like this,
var buttonClick = function(status) {
if (status == "closed") {
document.getElementById("test").disabled = true;
} else {
document.getElementById("test").disabled = false;
}
}
<button id="openState" name="OpenState" type="submit" value="open" onclick="buttonClick(value)">open</button>
<button id="closedState" name="ClosedState" type="submit" value="closed" onclick="buttonClick(value)">closed</button>
<input id="test" />
I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
Everything you are doing is good,You just need to add btn.disabled =true; inside click event.
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
btn.disabled =true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
Better version
$("#text").on("input propertychange paste",function(){
debugger;
if($(this).val()===''){
$('#btn').attr('disabled',true);
}else{
$('#btn').removeAttr('disabled');
}
});
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').attr('disabled',true);
}
});
$('#btn').attr('disabled',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.
Note that I converted the example below to use jQuery entirely to save confusion.
var $btn = $('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$btn.prop('disabled', true);
}
});
$('#text').on('input', function() {
var $text = $(this);
$btn.prop('disabled', function() {
return $text.val().trim().length === 0;
});
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
First set your button to disabled like this:
<button class="button button1" id="btn" disabled>Send</button>
Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:
$('#text').keyup(function(){
if ($('#text').val() != '') {
$('#btn').prop('disabled', false);
}
});
$('#btn').click(function(){
$('#text').val('');
$('#btn').prop('disabled', true);
});
This should work for you.
Your code is correct, you just need to add$(this).attr("disabled",true); line at last of your button's onclick event.
Here's the JSFiddle Link
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
$(this).attr("disabled",true);
});
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
$('#btn').prop('disabled', true);
}
else
{
$('#btn').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
function ctrlButton() {
btn.disabled = this.value.trim().length === 0;
}
text.addEventListener('input', ctrlButton, false);
ctrlButton.call(text);
$('#btn').on('click', function(e) {
e.preventDefault();
var val = $('#text').val();
if (val.length >= 1) {
$('#text').val("");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sendCtrls">
<input type="text" autocomplete="off" placeholder="Your message is here" id='text'>
<button class="button button1" id="btn">Send</button>
</div>
I have two buttons in my HTML:
<form>
<input type="button" id="button1" value="Clickable" onClick="switchButton()">
<input type="button" id="button2" value="Not Clickable" onClick="switchButton2()" disabled="true">
</form>
I want to write a function() in JavaScript for when I click on button1 it should be disabled and change it's value to "not clickable" and button2 should be enabled and change it's value to "clickable" and the other way around.
I have written two functions but they aren't correct and I am very new to JavaScript. This is my functions():
function switcher() {
var btn = document.getElementById("knapp1");
btn.disabled = true;
}
function switcher2(){
var btn2 = document.getElementById("knapp2");
btn2.enabled = true;
}
You have a problem with the name of your function : switchButton() in your html and switcher in your js, the id are different too and enabled is not an html property. You can achieve what you want with only one function :
function switchButton(btn1, btn2) {
var btn1 = document.getElementById("button"+btn1);
var btn2 = document.getElementById("button"+btn2);
btn1.disabled = true;
btn1.value = "not clickable";
btn2.disabled = false;
btn2.value = "clickable";
}
<form>
<input type="button" id="button1" value="Clickable" onClick="switchButton(1,2)">
<input type="button" id="button2" value="Not Clickable" onClick="switchButton(2,1)" disabled="true">
</form>
You should try to avoid have this duplicate logic that make the same, is very hard to maintain, I recommend to you instead use this:
function clickButton(e) {
const currentBtn = document.getElementById(e);
const otherBtn = document.getElementById(e === "knapp2"? "knapp1": "knapp2");
currentBtn.disabled = true;
otherBtn.disabled = false;
currentBtn.value="Not Clickable"
otherBtn.value="Clickable"
}
<form>
<input type="button" id="knapp1" value="Clickable" onClick="clickButton('knapp1')">
<input type="button" id="knapp2" value="Not Clickable" onClick="clickButton('knapp2')" disabled>
</form>