Question

/I have two input boxes, each in a separate form element set, in the html:

<input id="RecommendationDaysInputTextBox" class="NumberOfDaysInputTextBox" name="RecommendationDaysInputTextBox" type="text" value="90" />
<input id="ReviewDaysInputTextBox" class="NumberOfDaysInputTextBox" name="ReviewDaysInputTextBox" type="text" value="360" />

I want to stop default propogation upon the user hitting the enter key after entering data (which I correct with “change” and “keyup”).

I am using this:

$(".NumberOfDaysInputTextBox").keyup(function(e) {
    if (e.which == 13) {
        e.preventDefault();
        /* e.stopPropagation(); */
        $(this).trigger("change");
    }
});​

It is working on the first box but not the second. Hitting enter on the second causes post and refresh (all browsers). This occurs regardless of the order in which I enter data into a box and hit enter.

Does anyone have an explanation as to what I am doing wrong and how to do it correctly?

Answer 1

The problem, I guess, is that the submit is triggered immediately on keydown. If you instead set the function to execute on keydown…

$(".NumberOfDaysInputTextBox").keydown(function(e)
{
    if (e.which == 13)
    {
        e.preventDefault();
        e.stopPropagation();
        $(this).trigger("change");
    }
});​

… the problem seems to get solved.

Here’s a fiddle http://jsfiddle.net/jthGY/