Javascript disable button until all fields are filled

Question

would appreciate some help solving this. Need to make the event listener work for all the element. So basically when you fill out name, last-name i.e all the fields then only the button should get enabled, Even if one of the fields is empty the button should get disabled.

 (function () {
 "use strict";

 var knapp = document.getElementById('skicka');

 knapp.disabled = true;

 var f=document.getElementById('fornamn');
 var e=document.getElementById('efternamn');
 var p=document.getElementById('passnr');
 var n=document.getElementById('nat');

 e.addEventListener('change',function(){

  if(e.value==='' ){

 knapp.disabled=true;
   }

 else{
  knapp.disabled=false;
 }
  });

  })();

Thielicious · Accepted Answer · 2020-04-13 11:21:14Z

7

let d = document, [inputs, knapp] = [
    d.querySelectorAll('[type="text"]'),
    d.querySelector('#skicka')]
knapp.disabled = true

for (i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('input',() => {
    let values = []
    inputs.forEach(v => values.push(v.value))
    knapp.disabled = values.includes('')
  })
}

<form>
  <input id=fornamn type=text><br>
  <input id=efternamn type=text><br>
  <input id=passnr type=text><br>
  <input id=nat type=text><br>
  <input type=button id=skicka value=Complete>
</form>

This will do it. I prefer the eventhandler on input not change, so that you can see the button being enabled as you type. Every time you enter anything in any of the fields it will get all values at once and add them to an array. The .includes(), new as of ES6, is a method that checks for a specific value of an array and returns a boolean.

edited Apr 13, 2020 at 11:21

answered Oct 24, 2017 at 21:53

Thielicious

4,4822 gold badges31 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sagar Jajoriya · Accepted Answer · 2017-10-24 19:27:36Z

0

var elements = document.querySelectorAll("#fornamn, #efternamn, #passnr, #nat");
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("change", function() {
    if(document.getElementById("fornamn").value == "" && document.getElementById("passnr").value == "" && document.getElementById("nat").value = "" && document.getElementById("efternamn").value == "") {
        knapp.disabled=true;
    } else {
        knapp.disabled=false;
    }
  });
}

edited Oct 24, 2017 at 19:27

answered Oct 24, 2017 at 18:21

Sagar Jajoriya

2,3751 gold badge12 silver badges18 bronze badges

3 Comments

Moe-Doe Over a year ago

It works but not as specified. I mean the task is to enable the button if all fields are field not only one of them. With this code, the button gets enabled as soon as I write something in one of the fields.

Sagar Jajoriya Over a year ago

Answer updated. And also can use class selector to the elements for the onChange event so that there is no need to loop through the elements for adding the event listener

Thielicious Over a year ago

a = is missing, should be ...ntById("nat").value == ""... and yeah, not working for me either.

Collectives™ on Stack Overflow

Javascript disable button until all fields are filled

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related