.on('change') doesn't fire for dynamic textbox input

Question

I have a datepicker that is setting the value of a textbox. Every time the text in that text box changes, I want to submit the form. Here is a snippet of the code that I thought would achieve this:

$(document).ready(function() {
  watchDateFields();
}

function watchDateFields() {
  $('form .date_field').on('change', function() {
    this.form.submit();
  }
}

The .date_field input gets dynamically set, but for some reason this doesn't fire the change event?

Setting the value of an input with javascript (dynamically) does not fire the `change` event. You'll have to hook into whatever is setting the value, or try and post that code here. — adeneo, Oct 20 '15 at 11:37
@kosmos You should read the question better. They aren't creating the element dynamically, they're setting the value. — JB06, Oct 20 '15 at 11:38
Follow http://stackoverflow.com/questions/16667105/onchange-event-not-working-when-change-automated — murli2308, Oct 20 '15 at 11:38
I see, my fault. Too many questions of that kind. Deleting duplicate comment.. — kosmos, Oct 20 '15 at 11:40
Based on the answers, there must be some confusion here? Is the element added dynamically, or is it the value that is set dynamically, or more correct, programatically. — adeneo, Oct 20 '15 at 11:49

score 4 · Accepted Answer · answered Oct 20 '15 at 11:37

4

You need to attach it to a static element:

$(document).on('change', 'form .date_field', function() {
  this.form.submit();
}

Or, better replace document with something that is static. Eg:

$('form').on('change', '.date_field', function() {
  this.form.submit();
}

Or you might need to attach the event with the plugin's event handlers, say:

$('form .date_field').on('datechange', function() {
  this.form.submit();
}

answered Oct 20 '15 at 11:37

Praveen Kumar Purushothaman

164,888
24
203
252

And yes, I am really curious to know who's the downvoter! `:P` – Praveen Kumar Purushothaman Oct 20 '15 at 11:53
This doesn't work if value is changed vis JS – Yatix Aug 14 '21 at 20:13
@Yatix Yes, but that's not the current problem here. Plus it's almost 6 year old question. – Praveen Kumar Purushothaman Aug 14 '21 at 20:29
Yes, it is, so I mentioned so I can get a working example as this one doesn't work. Do you mind sharing? – Yatix Aug 16 '21 at 05:51
@Yatix More than happy to help. Can you create a new question and maybe add the link here in the comments? I'll be happy to look at it and provide a solution. – Praveen Kumar Purushothaman Aug 16 '21 at 10:00
All good now. It was matter of sequence rather then jQuery. Thanks anyways! – Yatix Aug 17 '21 at 12:39
@Yatix Glad it got resolved. – Praveen Kumar Purushothaman Aug 17 '21 at 20:30

score 1 · Answer 2 · answered Oct 20 '15 at 11:39

The change event will only trigger once, ie, when a user enters a new value into the input and then focuses away.

If you want this to update as a user types, use the keydown event.

However, submitting a form every time a key is pressed is not a good idea. What is the result you are trying to achieve? Consider at the very least validating the input or checking certain conditions are met before you submit the data (eg, make sure the input is at least 10 characters long).

anmarti · Answer 3 · 2015-10-20T12:06:18.610

0

Place your textfiels inside a div element and attach the change event to this div:

$('#mydiv').on('change', '.date_field',  function(){
       this.form.submit();
});

Now the mydiv element will be watching for the change envents for all his child elements, no matter if they are dynamically generated.

edited Oct 20 '15 at 12:06

answered Oct 20 '15 at 11:41

anmarti

5,045
10
55
96

Answer is not relavent – murli2308 Oct 20 '15 at 11:42
@murli2308 Why not? I offer a solution that works. – anmarti Oct 20 '15 at 11:42
The change event will only trigger once, ie, when a user enters a new value into the input and then focuses away... This question is already there on stackoverflow – murli2308 Oct 20 '15 at 11:44
This is a wrong way of using `.on()`. Please correct it. – Praveen Kumar Purushothaman Oct 20 '15 at 12:04
1

@PraveenKumar thank you. – anmarti Oct 20 '15 at 12:06
Please, explain the down votes. – anmarti Oct 20 '15 at 12:11
That looks perfect... `:)` – Praveen Kumar Purushothaman Oct 20 '15 at 12:13

score 0 · Answer 4 · answered Oct 20 '15 at 12:15

0

$( "input" ).keyup(function() {
  //It's changed
});

Easy way to track any change in anywhere... Many framework with 2 ways data binding, use keyup in Javascript to $watch the changes...

Also jQuery UI date-picker has onSelect...So easy way to do ur job... look at https://jqueryui.com/datepicker for more information...

answered Oct 20 '15 at 12:15

Alireza

100,211
27
269
172

tracking keyup is a good solution in this case! – Alireza Apr 09 '17 at 13:25

.on('change') doesn't fire for dynamic textbox input

4 Answers4