0

I have a button and a canvas. On button press, a new box can be created. Each box created this way includes a form with two input fields: a select dropdown and an integer input field.

I would like to detect any time the value in any of the select dropdowns changes. Imagine that the user has pressed the "New Box" button, hence having created three boxes with the above-mentioned form. Whenever they make any change in any of the select options, an alert should pop up.

Since all boxes created have the same indi-box class name, and the select tag has a name attribute of chosen_string, as well as following this SO comment, I came up with the following jQuery snippet:

// check for value change in any of the forms
$(document).ready(function(){
  $(".indi-box select[name='chosen_string']").on("input", function(){
    alert($(this).val()); 
  });
});

However, no alert message pops up. I tried changing my selectors by (1) also including #canvas, and (2) only including select[name='chosen_string'] nothing else but none of these helped.

I placed the full functioning code here.

lazarea
  • 1,129
  • 14
  • 43

1 Answers1

0

The event handler you want is change not input

$(document).ready(function(){
  $(".indi-box select[name='chosen_string']").on("change", function(){
    alert($(this).val()); 
  });
});
Kinglish
  • 23,358
  • 3
  • 22
  • 43