how can i enable form's save button if fields have values in JavaScript?

Question

I have simple html form (2 text fields & 1 selection set & save button) i want to set this button to disable till the text fields and selection set have values, if these fields have values button become active when clicked it show alert message (I need this using JavaScript)

Here's a similar jQuery question: https://stackoverflow.com/questions/28408357/disable-form-button-unless-all-text-input-fields-are-filled-in It should be pretty easy to translate to plain JS if you need to. — Barmar, Feb 24 '18 at 00:07
Possible duplicate of [Enable/Disable submit button if checkbox is checked/unchecked?](https://stackoverflow.com/questions/10021848/enable-disable-submit-button-if-checkbox-is-checked-unchecked) — André Schild, Feb 24 '18 at 11:13

Jeremiah Cabigting · Answer 1 · 2018-02-24T00:46:26.997

This worked for me.

var errors = 0;

$('#idOfYourSubmitButton').prop('disabled', true); //Make your button disabled

$('#idOfYourFirstTextField').keyup(function(){ //triggered when keyup is detected on the text field
    if($(this).val().length < 0) { //Check if Text field is empty
          errors += 1; //add an error
    }
    else { //if text field is not empty
          errors -= 1; //remove error
    }
);

$('#idOfYourSecondTextField').keyup(function(){ //triggered when keyup is detected on the text field
    if($(this).val().length < 0) { //Check if Text field is empty
          errors += 1; //add an error
    }
    else {
          errors -= 1; //remove error
    }
);

if(errors <= 0) { //check if there are any errors
    $('#idOfYourSubmitButton').prop('disabled', false); //remove disabled from the button
}

Any explanation? Don't just answer with code. Say something – theAlexandrian Feb 24 '18 at 00:38 — theAlexandrian, Feb 24 '18 at 00:38

John Halbert · Answer 2 · 2018-02-26T15:46:35.807

Here's an example of how you could achieve this with JavaScript. This may not be the best way to do this, but as an example it's a good place to start.

http://plnkr.co/edit/LLg9DklQFMFFB7XRzX7t?p=info

<!DOCTYPE html>
<html>

  <head>
    <style>
      button#submit:disabled {
        color: #bbb;
        background-color: #ddd;
      }
    </style>
  </head>
  <body>
    <h1>Form Example</h1>
    <form>
      <div>
        <label>Input 1</label>
        <input type="text" required="required" name="input1" id="input1" onkeyup="validate()" />
      </div>

      <br />

      <div>
        <label>Input 2</label>
        <input type="text" required="required" name="input2" id="input2" onkeyup="validate()" />
      </div>

      <br />
      <button id="submit" type="submit" disabled>Submit</button>
    </form>

    <script>
      var button = document.getElementById('submit');
      button.disabled = true;

      function validate() {
        var input1 = document.getElementById('input1');
        var input2 = document.getElementById('input2');

        if (input1.value && input2.value)
         button.disabled = false;
        else
         button.disabled = true;
      }
    </script>
  </body>

</html>

Note: The disabled attribute on the button element and the button.disabled = true are redundant. You should be able to remove either and the example still work as expected.

EDIT

If you want to use the onblur and onfocus events instead of onkeyup, the only change from the above example is to mark these attributes as using the validate function like so:

<input type="text" required="required" name="input1" id="input1" onblur="validate()" onfocus="validate()" />

See this updated plunk for the full example: http://plnkr.co/edit/lc0vO8kBnhMyKD3xgPxo?p=info

Please note the behavior here, however, is such that if you type in the first input, then move to the second, the submit doesn't become enabled until you leave the second. Similarly in reverse, if the user removed what they provided in either box after having been validated in this setup, if they did not trigger the blur event, the submit button would remain enabled. This, I think, could be confusing, and really suggests that you should also have onclick on your submit button if this is really what you need. This is the reason I initially suggested using onkeyup, as it catches the values as they are typed and avoids additional confusion or programming.

thank you john, but can you help me to do this using (onfocus and onblur) events? — Fatima, Feb 26 '18 at 14:04
when i write input 2 first then input 1 button still disable — Fatima, Feb 27 '18 at 00:54

Evan Garrett · Answer 3 · 2018-02-24T01:34:38.380

If you want to go the jQuery route, you could do it this way

You'll notice that if you do it this way, the button will disable again if any of the form info is deleted.

$('.js-get-info').on('mouseover keyup', (event) => {
  if ($('.js-name').val() && $('.js-age').val() && $('[name=sex]:checked').val()) {
    $('.js-submit').prop('disabled',false);
  } else {
    $('.js-submit').prop('disabled',true);
  }
})

<!doctype html>
<html>
  <head>
    
  </head>
  <body>
    <form class='js-get-info'>

      <input class='js-name js-input' placeholder='Name'>
      <br>
      <input class='js-age js-input' placeholder= 'Age'>
      <br>
      <label for='female'>Female</label>
      <input type='radio' class='js-input js-sex-input' id='female' name='sex'>
      <label for='male'>Male</label>
      <input type='radio' class='js-input js-sex-input' id= 'male' name='sex'>
      <br>
      <input type='submit' class='js-submit' disabled>

    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src='index.js'></script>
  </body>
</html>

iLyas · Accepted Answer · 2018-02-24T23:20:48.507

Try this one to enable the button if the two fields have values through JavaScript using the querySelector() method for the DOM manipulation.

var submitBtn = document.querySelector('#submitBtn');
var nameInput = document.querySelector('#nameInput');
var addressInput = document.querySelector('#addressInput');
var myOption = document.querySelector('#mySelect');

function validateInputs() {
  if (nameInput.value && addressInput.value && myOption.value)
    submitBtn.disabled = false;
  else
    submitBtn.disabled = true;
}

function showData(){
alert("Data is :"+nameInput.value);
}

<form>
  <label for="nameInput">Name</label>
  <input id="nameInput" type="text" name="name" onkeyup="validateInputs();" required>

  <label for="addressInput">Address</label>
  <input id="addressInput" type="text" name="address" onkeyup="validateInputs();" required>
  <br><br>
  <select onchange="validateInputs();" id="mySelect">
   <option disabled selected value> -- select an option -- </option>
  <option>New York</option>
  <option>Chicago</option>
</select>
  <br><br>
  <button id="submitBtn" onclick="showData();" disabled>Submit</button>
</form>

really thank you that is work exactly as i want but how can i show alert message include user data when click the button? — Fatima, Feb 24 '18 at 23:04
You are welcome, just add `onclick` to the button HTML element and do the DOM manipulation with JavaScript, look at my code I changed it. — iLyas, Feb 24 '18 at 23:23
ilyas, can you help me to do this using onfocus and onblur events? — Fatima, Feb 26 '18 at 13:55

how can i enable form's save button if fields have values in JavaScript?

4 Answers4