enabling submit btn after filling form (all inputs) with javascript no jquery

Question

I am trying to create a form that the submit btn is disabled untill all (except for one) of the fields are filled.

this is the html:

<section id="contacSection">
        <form id="contactForm">
            
            <fieldset id="contactSection">
                <legend>Your contact information</legend>
                
                <label for="FirstName">First Name</label>
                    <input type="text" id="FirstName" name="FirstName" placeholder="First Name" required>
                
                <label for="LastName">Last Name</label>
                    <input type="text" id="LastName" name="LastName" placeholder="Last Name">  
                
                <label for="email">E-mail</label>
                    <input type="email" id="email" name="email" placeholder="example@gmail.com" required> 
                
                <label for="comments">Comment</label>
                <textarea type="text" id="comments" name="comments" placeholder="Don't be shy, drop a comment here!" required></textarea>
            </fieldset>
            
            <fieldset>
                <legend>Would you like to meet for?</legend>
                
                <div class="radiobtn">
                <input type="radio" id="meetingtype1" name=meetingtype value="coffee" checked> A coffee</input>
                <input type="radio" id="meetingtype2" name=meetingtype value="zoom"> A zoom meeting</input>
                <input type="radio" id="meetingtype3" name=meetingtype value="drive"> A drive to Eilat</input>
                <input type="radio" id="meetingtype4" name=meetingtype value="chef"> A chef meal</input>    
                </div>

                
            </fieldset>

            <button id="submitform" type="submit" >Submit</button>
        </form>
      </section>

this is the js:

const firstName = document.querySelector('#FirstName');
  const lastName = document.querySelector('#LastName');
  const email = document.querySelector('#email');
  const comments = document.querySelector('#comments');
  const submitform = document.querySelector('#submitform');
  const contactForm = document.querySelector('#contactForm');

 submitform.disabled = true;
  
  contactForm.addEventListener('keyup', function (){
    var ins = document.getElementsByTagName("INPUT");
    var txs = document.getElementsByTagName("TEXTAREA");
    var filled = true;
  
  
    for(var i = 0; i < txs.length; i++){
      if(txs[i].value === "")
      filled = false;
    }
    
    for(var j = 0; j < ins.length; j++){
      if(ins[j].value === "")
      filled = false;
    }
  
    submitform.disabled = filled;
    
  });

first, it takes a few seconds until the btn becomes disabled. secondly, after I fill any field the btn becomes enabled.

thank you!

score 1 · Answer 1 · answered Jan 14 '21 at 01:08

Disregarding the comments and the radio buttons and focusing on the main issue, try changing the second half of the code to:

submitform.disabled = true;
contactForm.addEventListener('keyup', function() {
  var ins = document.getElementsByTagName("INPUT");    
  filled = []    
  for (var j = 0; j < ins.length; j++) {
    if (ins[j].value === "")
      filled.push(false);
    else {
      filled.push(true)
    }
  }    
  if (filled.includes(false) === false) {
    submitform.disabled = false
  };    
});

and see if it works.

score 0 · Answer 2 · answered Jan 13 '21 at 22:42

The reason it becomes enabled when you input something is because you are setting

submitform.disabled = filled

At the start, filled is set to true which is why the button is disabled. However, once you type something in any input, you set filled to false which enables the button (submitform.disabled = false).

There's a lot of ways to go about this but here's one. It increments a counter when ever something is filled in. Then you check if that counter is the same as the amount of inputs and textareas.

Secondly, we set the button to be disabled at the very start so even if you remove text from an input, the button will be disabled again if it wasn't

const firstName = document.querySelector('#FirstName');
  const lastName = document.querySelector('#LastName');
  const email = document.querySelector('#email');
  const comments = document.querySelector('#comments');
  const submitform = document.querySelector('#submitform');
  const contactForm = document.querySelector('#contactForm');

 submitform.disabled = true;
  
  contactForm.addEventListener('keyup', function (){
    var ins = document.getElementsByTagName("INPUT");
    var txs = document.getElementsByTagName("TEXTAREA");
    var amountFilled = 0
    submitform.disabled = true
  
    for(var i = 0; i < txs.length; i++){
      if(txs[i].value !== "") {
        amountFilled += 1
      }
    }
    
    for(var j = 0; j < ins.length; j++){
      if(ins[j].value !== "") {
        amountFilled += 1
      }
    }
    
    if (amountFilled === ins.length + txs.length) {
      submitform.disabled = false
    }
    
  });

<section id="contacSection">
        <form id="contactForm">
            
            <fieldset id="contactSection">
                <legend>Your contact information</legend>
                
                <label for="FirstName">First Name</label>
                    <input type="text" id="FirstName" name="FirstName" placeholder="First Name" required>
                
                <label for="LastName">Last Name</label>
                    <input type="text" id="LastName" name="LastName" placeholder="Last Name">  
                
                <label for="email">E-mail</label>
                    <input type="email" id="email" name="email" placeholder="example@gmail.com" required> 
                
                <label for="comments">Comment</label>
                <textarea type="text" id="comments" name="comments" placeholder="Don't be shy, drop a comment here!" required></textarea>
            </fieldset>
            
            <fieldset>
                <legend>Would you like to meet for?</legend>
                
                <div class="radiobtn">
                <input type="radio" id="meetingtype1" name=meetingtype value="coffee" checked> A coffee</input>
                <input type="radio" id="meetingtype2" name=meetingtype value="zoom"> A zoom meeting</input>
                <input type="radio" id="meetingtype3" name=meetingtype value="drive"> A drive to Eilat</input>
                <input type="radio" id="meetingtype4" name=meetingtype value="chef"> A chef meal</input>    
                </div>

                
            </fieldset>

            <button id="submitform" type="submit" >Submit</button>
        </form>
      </section>

enabling submit btn after filling form (all inputs) with javascript no jquery

2 Answers2