Dropdown must use both onChange and onKeyPress events

Bear in mind that when writing JavaScript / jQuery code for handling user changes made to dropdown boxes, you must program your website reaction not only to onChange but also to onKeyPress events. Why? There is a rare situation, where user selects value by clicking dropdown and then using keyboard’s cursor up or cursor down keys. onKeyPress event will be fired in this situation instead of onChange event. And desired effect won’t work, if you put it only to onChange event handler.

In jQuery code change is simple. Instead of using .change event:

$(".active-text-field").change(function()
{
    var dep = $("#RegForm_departament").val();
    var typ = $("#RegForm_type").val();
    var pat = $("#RegForm_patient").val();

    dropCookies(calculatePrice());

    var url = "?departament=" + dep + "&type=" + typ + "&patient=" + pat;

    window.location.href = url;
})

you should use .bind and bind two events:

$(".active-text-field").bind("change keypress", function()
{
    var dep = $("#RegForm_departament").val();
    var typ = $("#RegForm_type").val();
    var pat = $("#RegForm_patient").val();

    dropCookies(calculatePrice());

    var url = "?departament=" + dep + "&type=" + typ + "&patient=" + pat;

    window.location.href = url;
});

In pure JavaScript you probably need to move your code to a function and attach call to it to both onclick="" and onkeypress="" attributes in your dropdown HTML element.

Leave a Reply