捕获输入字段中的文本更改

Question

I am using joomla calendar to pick a date. Below shows the html code of it. here when you click the image, calendar will pop up and there you can select a date and popup will close and date value show in input text field. What I want is I want to write a function to do a ajax post if the date is change.(input text change). I tried simple alert() but didn't work. I think it is due to lost focus on the text field because only the image that we click and no contact with input field with mouse or any key press. plz help me to solve this.

$("#select_date").change(function(){
   alert('Working');
});

HTML Code

<input id="select_date" type="text" value="2012-02-16" name="select_date" title="Thursday, 16 February 2012">
<img id="select_date_img" class="calendar" alt="Calendar" src="/eap_movies/media/system/images/calendar.png">

PHP Code

JHTML::_('behavior.calendar');
JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d');

Answer 1

Change event will be triggered only when input loose focus (blur).

You could watch to keypress, keyup or keydown events if possible or trigger yourself an event when a date is picked.

Answer 2

Mihai Bazon's DHTML Calendar v1.0 (under /media/system/js/calendar.js) has a callback for onSelected and onClose events. So it should be possible to catch when the calendar closes or when the user selects a date.

Solution 1 - Editing Joomla

Step 1 - You need to override this file: libraries/joomla/html/html.php

// added $onSelected parameter
public static function calendar($value, $name, $id, $format = '%Y-%m-%d', $attribs = null, $onSelected)
{
  ...
$document->addScriptDeclaration('window.addEvent(\'domready\', function() {Calendar.setup({
            inputField: "'.$id.'",          // id of the input field
            ifFormat: "'.$format.'",        // format of the input field
            button: "'.$id.'_img",          // trigger for the calendar (button ID)
            align: "Tl",                            // alignment (defaults to "Bl")
            singleClick: true,
            onSelected: '.$onSelected.'
});});');
...
}

Step 2 - Defining a callback for onSelected

JHTML::_('behavior.calendar');
JHTML::calendar(date('Y-m-d'),'select_date', 'select_date', '%Y-%m-%d', null, 'userSelectedDate');

Step 3 - Implementing the callback

function userSelectedDate(calendar, date){ ... }

Note: I don't have an active install of Joomla so the code above might have syntax errors.

Solution 2 - Sara's easier solution

Add onchange definition to the $attribs parameter of JHTML::calendar :

JHTML::calendar(date('Ym-d'),'select_date', 'select_date', '%Y-%m-%d','onchange="myfunction();"');

Visit DHTML Calendar Website as well.

Answer 3

Which version of jquery do you use ? I had the same problem and I went with

$('elementName').on("input propertychange",function() {
 alert("detected");
});

Because working with keyup events will not work in your case because there is no user interaction with the field actually.