Disable button click until all input fields have text in them (javascript & jquery)

Question

I am just starting out. I know HTML, CSS, JavaScript, and just now learning jQuery. I have 3 input boxes & a button. I do not want the button to be clickable if any of the input boxes are empty. Here is how my code stands now...

let garage = [];
const maxCars = 100;

class Car{
  constructor(year, make, model){
    this.year = year;
    this.make = make;
    this.model = model;
  }
}

$(document).ready(function() {

  $('#addCarButton').on('click', function() {
    let newCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val() );

    if (garage.length < maxCars){
      garage.push(newCar);
    } else {
      console.log('Sorry garage is full');
      return false;
    }

    updateGarage();

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');
  });
});

function newCar(year, make, model){
  console.log('in newCar:', year, make, model);
  garage.push(new Car(year, make, model));
  return true;
}

function updateGarage() {
  let outputElement = $('#garageList');
  outputElement.empty();
  for (let car of garage) {
      outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Garage</title>
  </head>
  <body>
    <h1>Garage</h1>
    
    <div id="garageDiv"></div>
    
    <div id="inputDiv">
      <input type="number" placeholder="year" id="yearInput" >
      <input type="text" placeholder="make" id="makeInput" >
      <input type="text" placeholder="model" id="modelInput" > 
      <button type="button" id="addCarButton">Add Car</button>
    </div>  
      <ul id="garageList">
      </ul>

    <script src="scripts/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="scripts/scrap.js" charset="utf-8"></script>
  </body>
</html>

I am thinking that the solution will be something like this...

$(document).ready(function() {
$('#addCarButton').prop('disabled', true);
  if ($('#modelInput').val().length != 0) {
  $('#addCarButton').prop('disabled', false);}
$('#addCarButton').on('click', function() {

I believe that the disable/enable works, but I just don't know what conditional to use. The one I have is just testing 1 input, but I want it so that the button is only enabled when there is content in each input.

When I just run what I have here I, the button is disabled no matter what. I played around and can get it to be enabled if some random condition is true.

I also feel like I need to have a way to run the conditional multiple times to check, but I'm not sure how.

Duplicate: (https://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values) — Saeed Heidarizarei, Aug 21 '18 at 19:19
Possible duplicate of [Disabling submit button until all fields have values](https://stackoverflow.com/questions/5614399/disabling-submit-button-until-all-fields-have-values) — Saeed Heidarizarei, Aug 21 '18 at 19:21

Taplar · Answer 1 · 2018-08-22T15:18:17.750

Added comments to the javascript to show how the input event handles the disabling/enabling of the button. I also put a required class on the inputs related to the button.

let garage = [];
const maxCars = 100;

class Car {
  constructor(year, make, model) {
    this.year = year;
    this.make = make;
    this.model = model;
  }
}

$(document).ready(function() {
  var $addCarButton = $('#addCarButton');
  var $requiredFields = $('.required');

  //capture any time the value of a required field changes
  $requiredFields.on('input', function(e) {
    //disable the button if any of the fields are blank
    $addCarButton.prop('disabled', $requiredFields.filter(function() {
      return !this.value.trim();
    }).length);
  }).trigger('input'); //trigger an input event for page load

  $('#addCarButton').on('click', function() {
    let newCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val());

    if (garage.length < maxCars) {
      garage.push(newCar);
    } else {
      console.log('Sorry garage is full');
      return false;
    }

    updateGarage();

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');
    $addCarButton.prop('disabled', true);
  });
});

function newCar(year, make, model) {
  console.log('in newCar:', year, make, model);
  garage.push(new Car(year, make, model));
  return true;
}

function updateGarage() {
  let outputElement = $('#garageList');
  outputElement.empty();
  for (let car of garage) {
    outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Garage</h1>

<div id="garageDiv"></div>

<div id="inputDiv">
  <input type="number" placeholder="year" id="yearInput" class="required">
  <input type="text" placeholder="make" id="makeInput" class="required">
  <input type="text" placeholder="model" id="modelInput" class="required">
  <button type="button" id="addCarButton">Add Car</button>
</div>
<ul id="garageList">
</ul>

<script src="scripts/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="scripts/scrap.js" charset="utf-8"></script>

Sorry, I should have been explicit that the functionality should work for each time. What you have only works for the first time. Thanks though! It helps me get to the next step. — Hailee, Aug 22 '18 at 14:56
@Hailee fixed that issue. The button just needed to be disabled when the fields were cleared out in the click handler. — Taplar, Aug 22 '18 at 15:18

score 1 · Answer 2 · answered Aug 21 '18 at 19:26

You can loop throug all inputs on keyup and turn a "flag" to true if at least one empty input is found.

Then use this flag to enable/disable the button.

$(document).ready(function(){
  $('#addCarButton').prop('disabled', true);
  
  var inputs = $("#inputDiv input");
  
  inputs.on("keyup",function(){
    
    // Check all inputs
    var oneEmpty = false;
    inputs.each(function(){
      if( $(this).val() == "" ){
        oneEmpty = true;
      }
    });
    
    
    // If at least one field is empty, "oneEmpty" will be true... Disabling the button.
    $('#addCarButton').prop('disabled', oneEmpty);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="inputDiv">
  <input type="number" placeholder="year" id="yearInput" >
  <input type="text" placeholder="make" id="makeInput" >
  <input type="text" placeholder="model" id="modelInput" > 
  <button type="button" id="addCarButton">Add Car</button>
</div>

score 0 · Answer 3 · answered Aug 21 '18 at 19:11

0

You are on the right track; your conditional can simply check all 3 inputs:

if (
    $('#yearInput').val().length != 0 &&
    $('#makeInput').val().length != 0 &&
    $('#modelInput').val().length != 0
) {
    $('#addCarButton').prop('disabled', false);
}

answered Aug 21 '18 at 19:11

Chris Cousins

1,862
8
15

When I try that way, the button is disabled no mater what. – Hailee Aug 22 '18 at 15:02

score 0 · Accepted Answer · answered Aug 21 '18 at 19:26

$(function() {

let garage    = [];
const maxCars = 100;

class Car {

    constructor(year, make, model) {

        this.year = year;
        this.make = make;
        this.model = model;
    }
}


$('#yearInput, #makeInput, #modelInput').on('input', function(event) {

    let year  = $('#yearInput').val();
    let make  = $('#makeInput').val();
    let model = $('#modelInput').val();

    if(year && make && model) {

        $('#addCarButton').prop('disabled', false);
    }
});

$('#addCarButton').on('click', function() {

    let year = $('#yearInput').val();
    let make = $('#makeInput').val();
    let model = $('#modelInput').val();

    let newCar = new Car(year, make, model);

    if (garage.length < maxCars) {

        garage.push(newCar);

    } else {

        console.log('Sorry garage is full');
        return false;
    }

    updateGarage();

    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');

    $('#addCarButton').prop('disabled', true);
});

function newCar(year, make, model) {

    console.log('in newCar:', year, make, model);
    garage.push(new Car(year, make, model));
    return true;
}

function updateGarage() {
    
    let outputElement = $('#garageList');
    outputElement.empty();

    for (let car of garage) {

        outputElement.append('<li>' + Number(car.year) + ' ' + car.make + ' ' + car.model + '</li>');
    }
}

});

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<h1>Garage</h1>

<div id="garageDiv"></div>

<div id="inputDiv">
    <input type="number" placeholder="year" id="yearInput" >
    <input type="text" placeholder="make" id="makeInput" >
    <input type="text" placeholder="model" id="modelInput" > 
    <button type="button" id="addCarButton" disabled>Add Car</button>
</div>  
<ul id="garageList">
</ul>

</body>
</html>

score 0 · Answer 5 · answered Aug 21 '18 at 19:33

You can declare a onInputChange method in the javascript file that take the event variable as input (as such you know the source of the event due to having an id), and all you need to do after which is to make the onInputChange method change the state of the button depending on the state of the input after any input which can be done as such.

HTML

<input type="number" placeholder="year" id="yearInput" onkeyup="onInputChange(event)" >
<input type="text" placeholder="make" id="makeInput" onkeyup="onInputChange(event)">
<input type="text" placeholder="model" id="modelInput" onkeyup="onInputChange(event)"> 
<button disabled="disabled" onclick="someAction" type="button" id="addCarButton">Add Car</button>

JavaScript

function onInputChange(event) {
    let stateButton = $("#yearInput").val().length() > 0;
    stateButton = stateButton && $("#makeInput").val().length() > 0;
    stateButton = stateButton && $("#modelInput").val().length() > 0;

    const btn = $('#addCarButton');

    stateButton = !stateButton ? btn.attr("disabled", "disabled") :  btn.removeAttr("disabled");        
}

Disable button click until all input fields have text in them (javascript & jquery)

5 Answers5