<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";
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.