Modelesq Modelesq - 6 months ago 21
jQuery Question

Enable button on any form change

I have a button thats currently disabled. Once any changes have been made to the inputs in the form. I'd like to enable it....

$('input[class="input-text"]').on('change', (event) => {
event.preventDefault();
$('#checkout').removeAttr('disabled');
});

...
<button type="submit" className="btn" id="checkout" disabled>Checkout</button>


This doesn't seem to work. What am I doing wrong? (using .jsx syntax)

Prs Prs
Answer

Attach input and change both event on a <form>.

Check the following example.

$(document).ready(function() {
  $('#form').on('input change', function() {
    $('#checkout').attr('disabled', false);
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  Text:
  <input type="text" class="input-text" />
  <br>Radio:
  <input type="radio">
  <br>Checkbox:
  <input type="checkbox">
  <br>Select:
  <select name="" id="">
    <br>
    <option value="">1</option>
    <option value="">2</option>
    <option value="">3</option>
  </select>
  <button type="submit" className="btn" id="checkout" disabled>Checkout</button>
</form>