0

The title pretty much say it all. To reiterate, when I have the listener .on('input',... assigned to a form, the event fires for <select> and <input> changes, but it doesn't fire for checkbox changes.

Here's a fiddle of what I'm talking about:

https://jsfiddle.net/6vzftzum/

<form class='request-form'>
  <input type='text'>
  <select>
      <option>1</option>
      <option>2</option>
      <option>3</option>
  </select>
  <label><input type="checkbox" name="not-completed" checked>Not Completed</label>
</form>

<div class='put-stuff-in-here'>

</div>

var i=0;
$(".request-form").on('input', function() { 

    $(".put-stuff-in-here").append(i + "<br>");
    i++;

});

Is there a way I can make a listener that will fire for all input changes in a form?

Erik Philips
  • 53,428
  • 11
  • 128
  • 150
John
  • 326
  • 4
  • 21

2 Answers2

1

Your input event won't fire the checkboxes, but we can handle it with a change event. Although we'll need to separate the listeners, we can have them call a mutual function so that any changes that need to be made to both only have to happen in one place.

function changeFunction(elem) {
    $(".put-stuff-in-here").append(i + "<br>");
    i++;
}

$('.request-form input[type="checkbox"], .request-form select').change(function() {
    changeFunction($(this));
});

$('.request-form input[type="text"]').on('input', function() {
    changeFunction($(this));
});

JSFiddle

Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
  • With this though, the event only fires once the element loses focus. Is this implementation possible with the same functionality of the `input` event (where the event fires immediately)? Or should I just make two separate events, one for `$(.request-form input').change` and another for `$('.request-form).on('input',...`? – John Oct 28 '16 at 17:02
  • @John I've edited my answer - you can use `input` just as easily! – Tyler Roper Oct 28 '16 at 17:48
  • Same issue as the start. The checkbox doesn't work with that https://jsfiddle.net/7efezaa1/ – John Oct 28 '16 at 17:53
0

The 'input' event only fires when the text content is changed. Clicking a checkbox will not change the text within your form. See this answer here

Community
  • 1
  • 1
Nick G
  • 1,953
  • 12
  • 16