How to disable button if all the inputs don’t needed to be filled?

  forms, javascript, jquery

I have to disable button in my form, but not all the inputs are required. In my code, I have written which of the inputs need to be filled, but still I have to fill all the inputs in the form. How should I change that?

$('#billing_first_name, #billing_last_name, #billing_address_1, #billing_postcode, #billing_city, #billing_phone, #billing_email').bind('keyup', function dataFilled() {
  $('form > input').keyup(function() {
    var empty = false;
    $('form > input').each(function() {
      if ($(this).val() == '') {
        empty = true;
      }
    });

    if (empty) {
      $('#place_order').attr('disabled', 'disabled');
    } else {
      $('#place_order').removeAttr('disabled');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  Name<br>
  <input type="text" id="billing_first_name" name="billing_first_name"><br> Surname<br>
  <input type="text" id="billing_last_name" name="billing_last_name"><br> Company's Name (optional)<br>
  <input type="text" id="billing_company" name="billing_company"><br> Street<br />
  <input type="text" id="billing_address_1" name="billing_address_1"><br> Postal code<br>
  <input type="text" id="billing_postcode" name="billing_postcode"><br> City<br>
  <input type="text" id="billing_city" name="billing_city"><br> Phone<br>
  <input type="text" id="billing_phone" name="billing_phone"><br> E-mail<br>
  <input type="text" id="billing_email" name="billing_email"><br>
  <button type="submit" name="place_order" id="place_order" value="Buy" disabled="disabled">Buy</button>
</form>

Source: Ask Javascript Questions

LEAVE A COMMENT