<div class="form__w">
<form name="yourForm">
<input type="text" onKeyup="checkform()" required />
<input type="text" onKeyup="checkform()" requited />
<!-- <input class="submit-button" id="submitbutton" type="submit" disabled="disabled" value="Submit" /> -->
<button class="submit-button" id="submitbutton" type="submit" disabled="disabled" value="Submit">Submit</button>
</form>
</div>
.form__w {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
input {
display: block;
margin-bottom: 8px;
padding: 4px;
}
.submit-button {
/* display: block; */
border: none;
border-radius: 4px;
padding: 8px 16px;
background: #24a0ed;
color: white;
}
.submit-button:disabled {
background: #ccc;
color: white;
}
function checkform() {
const formElements = document.forms["yourForm"].elements;
let submitBtnActive = true;
for (let inputEl = 0; inputEl < formElements.length; inputEl++) {
if (formElements[inputEl].value.length == 0) submitBtnActive = false;
}
if (submitBtnActive) {
document.getElementById("submitbutton").disabled = false;
} else {
document.getElementById("submitbutton").disabled = "disabled";
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.