Call Javascript onchange event by programmatically changing textbox value

Question

the problem I'm facing is this:

• I have a textbox for a date range along side a calendar control.
• When the user selects a date from the calendar, it fills that date into the textbox
• When this happens I want to fire a javascript function, however, the 'onchange' event doesn't seem to happen.

I'd ideally like to be able to add the event as an attribute to the textbox, something like:

txtCreateDate.Attributes.Add("onchange", string.Format("JSfunction({0},'{1}');", arg1, arg2));

more info: The date is entered into the textbox in c#. The calendar control has an eventhandler on the page. When a date is selected, the eventhandler puts the date into the textbox. I have tried setting the focus to the textbox at this point, then putting an onBlur attribute on the textbox, but the textbox never seems to get focus.

I suppose I could directly call the javascript function at this point doing ClientScript.RegisterClientScriptBlock or something like that, but that seems sloppy and never works like I want it to.

Answer 1

You're misinterpreting what the onchange event does when applied to a textarea. It won't fire until it loses focus or you hit enter. Why not fire the function from an onchange on the select that fills in the text area?

Check out here for more on the onchange event: w3schools

Answer 2

This is an old question, and I'm not sure if it will help, but I've been able to programatically fire an event using:

if (document.createEvent && ctrl.dispatchEvent) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", true, true);
    ctrl.dispatchEvent(evt); // for DOM-compliant browsers
} else if (ctrl.fireEvent) {
    ctrl.fireEvent("onchange"); // for IE
}

Answer 3

You can fire the event simply with

document.getElementById("elementID").onchange();

I dont know if this doesnt work on some browsers, but it should work on FF 3 and IE 7+

Answer 4

Onchange is only fired when user enters something by keyboard. A possible workarround could be to first focus the textfield and then change it.

But why not fetch the event when the user clicks on a date? There already must be some javascript.

Answer 5

You're population is from the server-side. Using the registerclientscript will put the script at the beginning of the form.. you'll want to use RegisterStartupScript(Block) to have the script placed at the end of the page in question.

The former tries to run the script before the text area exists in the dom, the latter will run the script after that element in the page is created.

Answer 6

You can try the Anthem library.

Answer 7

You can put it in a different class and then call a function. This works when ajax refresh

$(document).on("change", ".inputQty", function(e) {

//Call a function(input,input);
});

Answer 8

The "onchange" is only fired when the attribute is programmatically changed or when the user makes a change and then focuses away from the field.

Have you looked at using YUI's calendar object? I've coded up a solution that puts the yui calendar inside a yui panel and hides the panel until an associated image is clicked. I'm able to see changes from either.

http://developer.yahoo.com/yui/examples/calendar/formtxt.html