How to disable submit button for multiple inputs (jQuery Homework)

Question

I'm trying to setup a jQuery function to keep a submit button disabled until all the fields are filled. I got to a point when I can get it to work with 1 field filled. I've tried to change my call statement various ways I can think of, but I've locked myself to only one field... so I'm obviously missing something... I'm still very new to javascript so I'd appreciate some simple basic help. Thanks

My jQuery:

    $(document).ready(function () {
  $("#valueInput").on("input", function () { // << only for one field
    if ($(this).val() != "") {
       $("#addCarToGarage").prop("disabled", false);
    } else {
      $("#addCarToGarage").prop("disabled", true);
    }
  });
});

My HTML:

  <input type="number" placeholder="Year" id="yearInput" required/>
  <input type="text" placeholder="Make" id="makeInput" required/>
  <input type="text" placeholder="Model" id="modelInput" required/>
  <input type="number" placeholder="Est Value" id="valueInput" required/>
  <input type="submit" id="addCarToGarage" value="Add to Garage" disabled="disabled">

score 0 · Answer 1 · answered Apr 15 '21 at 16:16

Try something like that

$(document).ready(function () {
  let areAllValid = false;
  const fields$ = jQuery('input[type="text"], input[type="number"]');

  function checkValues() {
    areAllValid = true;
    for(const field of fields$) {
      if(!$(field).val()) {
        areAllValid = false
      }
    }
  }
 
  $("input").on("input", function () {
    checkValues()
   $("#addCarToGarage").prop("disabled", !areAllValid);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" placeholder="Year" id="yearInput" required/>
  <input type="text" placeholder="Make" id="makeInput" required/>
  <input type="text" placeholder="Model" id="modelInput" required/>
  <input type="number" placeholder="Est Value" id="valueInput" required/>
  <input type="submit" id="addCarToGarage" value="Add to Garage" disabled="disabled">

Dr Manish Lataa-Manohar Joshi · Accepted Answer · 2021-04-15T16:47:28.310

0

You can try following code.

Instead of using id of last input, following approach can be better

$(document).ready(function () {
    $('form > input').keyup(function() {
        var empty_inputs = false;
           $('form > input').each(function() {
                if ($(this).val() == '') {
                   empty_inputs = true;
                }
            });

        if (empty_inputs) {
            $('#addCarToGarage').attr('disabled', 'disabled'); 
         } else {
            $('#addCarToGarage').removeAttr('disabled'); 
        }
      });
   });

edited Apr 15 '21 at 16:47

answered Apr 15 '21 at 16:17

Dr Manish Lataa-Manohar Joshi

2,380
5
17
38

Excellent. I tried something similar, but I couldn't get the if statement to function correctly. Just had to change my html to set as a form, but now works perfectly. Thanks – A.J. Apr 15 '21 at 16:23
This is suspiciously identical to the answer here: https://stackoverflow.com/a/5614593/2181514 - at the very least provide attribution – freedomn-m Apr 15 '21 at 16:31
freedom-m. It does... not sure why I couldn't find this before. This would have saved me some time asking and breaking code for the last few days. – A.J. Apr 15 '21 at 17:11

How to disable submit button for multiple inputs (jQuery Homework)

2 Answers2