Enable button on any form change

Question

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)

Parvez Rahaman · Accepted Answer · 2016-06-09 05:55:51Z

8

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>

edited Jun 9, 2016 at 5:55

answered Jun 8, 2016 at 20:07

Parvez Rahaman

4,3973 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BenM · Accepted Answer · 2016-06-08 17:53:49Z

2

Since you're using jQuery, just use the attr() function (and class selector for more efficient lookup):

$('input.input-text').on('change', (event) => {
    event.preventDefault();
    $('#checkout').attr('disabled', false);
});

jsFiddle Demo

Please note: the change event is only triggered when the .input-text is blurred. You may wish to consider using onkeyup (or similar).

edited Jun 8, 2016 at 17:53

answered Jun 8, 2016 at 17:43

BenM

53.3k26 gold badges116 silver badges172 bronze badges

4 Comments

Modelesq Over a year ago

Hmm while I think keyup makes sense. It would still be enabled if the user decided to remove anything that they added.

BenM Over a year ago

Yep, that's true. Well, the code above will achieve what you need.

Modelesq Over a year ago

also function(e) will not work in jsx without an expression name

BenM Over a year ago

Then it's probably worthwhile to mention in the question that you're using a preprocessor. Either way, the above code achieves what you're looking for, even if the demonstrated syntax is slightly different (or needs modifying to exactly suit your reqs).

Collectives™ on Stack Overflow

Enable button on any form change

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related