Using .change() and a datepicker in jquery to submit a form

Question

Currently I'm using JQuery UI's datepicker range, and I've added some more javascript that should submit the form on the page when different form elements change.

This works on the drop down I've added, as well as the date picker input boxes if I enter dates manually and then click away.

However, if I click an input field for the datepicker, and the date chooser pops up, the form will not submit after choosing a date..

Its as if the input field didn't know a change occured..?

http://api.jquery.com/change/

here is the code I'm using:

$(document).ready(function() {

                $('#from').change(function() {
                  document.myform.submit();
                });

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

                $('#to').change(function() {
                  document.myform.submit();
                });

            });

Using the datepicker UI events, I've added the following code for testing but it isn't working.. any ideas?

$(document).ready(function() {

                $('#from').datepicker({
                   onClose: function() { alert('Yo yo!') }
                });

            });

score 1 · Answer 1 · answered May 31 '11 at 20:21

1

The jQuery UI DatePicker has custom events, particularly the onSelect event, click the event's tab and it's at the bottom of the docs:

http://jqueryui.com/demos/datepicker/

answered May 31 '11 at 20:21

JaredMcAteer

21,688
5
49
65

score 1 · Answer 2 · answered May 31 '11 at 20:51

1

Double check there are no JavaScript errors above the code you quoted.

If there are errors then the JavaScript code below these errors will not execute properly.

That is probably why the code you added to test did not work either.

answered May 31 '11 at 20:51

8bitme

897
2
16
24

Try using the onSelect event instead of the onClose event as @OriginalSyn suggested – 8bitme May 31 '11 at 21:43
I think the problem is that .change events are ["deferred until the element loses focus."](http://api.jquery.com/change/) This is why it only works when you specifically input the values. To get it to work when you select a date try use onSelect – 8bitme Jun 01 '11 at 08:14

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

The correct answer is here: jQuery datepicker, onSelect won't work

edited May 23 '17 at 11:59

Community

1
1

answered Jun 01 '11 at 12:47

Elliot

13,580
29
82
118

score 0 · Answer 4 · answered May 31 '11 at 20:22

0

I hope it should be on focus . on click of date picker the focus will be in the text box where you have to show the date. so the event should be .focus()

http://api.jquery.com/focus/

http://api.jquery.com/focusout/

answered May 31 '11 at 20:22

zod

12,092
24
70
106

Using .change() and a datepicker in jquery to submit a form

4 Answers4