0

Does anyone have any idea to dynamically keep track of user inputs in a form? I learned how to disable a button and if users want to enable it, they would just have to fill in the input fields. While this works, if a user decides to backspace and go back to a clear field, the button is still enabled. I wanted to get some insight or ideas to keep track of user inputs dynamically. I'm a bit new to JS so I just wanted some ideas. Is it possible to use for loops/forEach methods to iterate through the input fields? Or what approach do you recommend on taking?

HTML: 

<form class="container">
  <input type="text" class="input" />
  <input type="email" class="input" id="input" />
  <button type="submit" id="submitButton" href="index.html" disabled>
    Submit
  </button>
</form>

JavaScript: 

document.getElementById("input").addEventListener("keyup", function() {
  var inputs = document.querySelectorAll("input");

  if (inputs != "") {
    document.getElementById("submitButton").removeAttribute("disabled");
  } else if ((inputs = "")) {
    document.getElementById("submitButton").setAttribute("disabled", null);
  }
});
KTess95
  • 1
  • 1
  • `keyup` is dynamic. Keep track of? Use variables and Object properties, on the Client-side. Use a session or a database on the Server. You should use `if(inputs.length)` to test to see if there are any. I would just use a loop, then you won't need an if condition since there will be a length of `0` anyways if there aren't any `for(var i=0,single_input,l=inputs.length; i – StackSlave Nov 06 '19 at 01:56
  • `inputs` is a NodeList....not a string – charlietfl Nov 06 '19 at 01:57
  • Possible duplicate of [Detecting input change in jQuery?](https://stackoverflow.com/questions/6458840/detecting-input-change-in-jquery) – Max Peng Nov 06 '19 at 02:01
  • Another issue is a button doesn't have an `href`. You use `action` on `
    ` for the url
     – charlietfl Nov 06 '19 at 02:07

2 Answers2

0

Here is the solution of your problem.

document.addEventListener("keyup", function() {
  var inputs = document.querySelectorAll("input");
  var emptyFillExists = false;
  for (let index = 0; index < inputs.length; index++) {
    if (inputs[index].value.length === 0) {
      emptyFillExists = true;
      break;
    }

  }
  if (!emptyFillExists) {
    document.getElementById("submitButton").removeAttribute("disabled");
  } else {
    document.getElementById("submitButton").setAttribute("disabled", null);
  }
});
<form class="container">
  <input type="text" class="input" />
  <input type="email" class="input" />
  <button type="submit" id="submitButton" href="index.html" disabled>
        Submit
    </button>
</form>
tuhin47
  • 5,172
  • 4
  • 19
  • 29
-1

There are a few things wrong with your codes:

  1. You assume inputs as strings. It isn't. It's an array.
  2. You track keyup event for only 1 input. You should track keyup event for all inputs instead.

Here's what I'd suggest you do:

  1. Add event listener keyup for the form.
  2. Interate through each input and check.
function areInputsValid() {
  // Iterate through every input and check its value
  var inputs = document.querySelectorAll('input');
  for (var i = 0; i < inputs.length; i++)
    if (inputs[i].value == '') 
      return false;

  return true;
}

// Get the form element
var form = document.getElementsByTagName('form')[0];

// Add event listener
form.addEventListener('keyup', function() {
  // Are the inputs valid?
  if (areInputsValid())
    document.getElementById("submitButton").removeAttribute("disabled");
  else
    document.getElementById("submitButton").setAttribute("disabled", null);
})

EDIT: as charlietfl pointed out, there are bugs in my previous answer.

Dat Nguyen
  • 1
  • 3