I created a form and as long as the inputs that have the required attribute are empty, the button will keep disabled.
When only the inputs with the required attribute are filled in, the button will be enabled.
How to do this with javascript?
// select all input with Attribute Required
let elReq =
document.querySelectorAll('input[required="required"]');
// if elReq input is empty = .button disabled
if (elReq.value == "") {
document.querySelector('.button').disabled = true;
// if elReq input is filled in = .button enabled
} else {
document.querySelector('.button').disabled = false;
} .button {
color: #fff;
background-color: #007bff;
border: none;
display: inline-block;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
.button:disabled {
color: #a2a5a9;
border-color: #c9ced3;
background-color: #f2f2f2;
cursor: text;
}<form class="form" id="form">
<input type="number" id="a" class="a" placeholder="000" required>
<input type="number" id="b" class="b" placeholder="0">
<input type="number" id="c" class="c" placeholder="000" required>
<input type="number" id="d" class="d" placeholder="000" required>
<input type="number" id="e" class="e" placeholder="0">
</form>
<button type="submit" value="Ok" id="send" class="button" onclick="sum()">Ok</button>Basically, it's a common form. If the user doesn't fill in the mandatory fields, he won't be able to have access to the next step. For example, a login form: if the user doesn't fill the "e-mail" and the "password" inputs, the button "next" cannot be clicked. It's the same principle.
This code should work.
Several weird things I think you should change.
eventListener, so once the document load, it will check if the input has value or not (which always be "")input has required attribute, so you have to use querySelectorAll instead of querySelector and a loop to loop itdocument.querySelectorAll('[required]').forEach(item=>{
item.addEventListener('change',check)
window.addEventListener('load',check)
})
function check(){
for(let i of document.querySelectorAll('[required]')){
if (!i.value) {
document.querySelector('.button').disabled = true;
break;
} else {
document.querySelector('.button').disabled = false;
}
}
}.button {
color: #fff;
background-color: #007bff;
border: none;
display: inline-block;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
.button:disabled {
color: #a2a5a9;
border-color: #c9ced3;
background-color: #f2f2f2;
cursor: text;
}<form class="form" id="form">
<input type="number" id="a" class="a" placeholder="000" required>
<input type="number" id="b" class="b" placeholder="0">
<input type="number" id="c" class="c" placeholder="000" required>
<input type="number" id="d" class="d" placeholder="000" required>
<input type="number" id="e" class="e" placeholder="0">
</form>
<button type="submit" value="Ok" id="send" class="button">Ok</button>