JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<input type="text" name="input1" id="input1"> *<br>
<input type="text" name="input2" id="input2"><br>
<input type="text" name="input3" id="input3"> *<br>
* = Required field<br><br>
<input type="submit" id="submit">

JavaScript

var nonEmptyInputs = [
	document.getElementById("input1"),
  document.getElementById("input3")
]; // The best way to get these elements will depend on the project. I used getElementById for this demo.

nonEmptyInputs.forEach(function(input) {
  console.log(input);
  input.addEventListener("change", checkInputs);
});

function checkInputs() {
  var allInputsFilled = true;
  nonEmptyInputs.forEach(function(input) {
    if(input.value === '') allInputsFilled = false;
  });
  document.getElementById("submit").disabled = !allInputsFilled;
}

checkInputs();