Question

I’ve written some JavaScript/jQuery code that adds a users email to my newsletter database. There is a “subscribe” button to start the process, but I also wanted the user to be able to hit return for usability.

Weirdly, the code works for both the button and when the return key is hit in that the email is added to the database, but the callback function which just displays an alert is only triggered when the button is hit, not when the return key has been pressed.

$('#newsletter_button').click(function(event) {
    newsletterSignup();
});
$('#newsletter_email').bind('keyup', function(event) { newsReturn(event); });

function newsletterSignup() {
    var email = $.trim($('#newsletter_email').val());
    if(!validateEmail(email)) {
    alert('Please enter a valid email');
    return false;
    } else {
        // add email to database
        $.post('newsletterSignup.php', 
               { email: email }, 
               function(data) {alert(data);}
        );
        $('#newsletter_email').val("");
    }
}

function newsReturn(evt) {
    if (evt.keyCode == 13) {
    newsletterSignup();
    }
}

The function has to work the same no matter how it’s been called surely! Like I say the post function is obviously being called both times because the email is being added to the database.

The only thing I can think of is that it’s something to do with events. Not sure what though.

Answer 1

Browser behaviour for what happens when Enter is pressed is quirky. Whether the submit button is considered to be ‘clicked’ on Enter press varies between browsers and also depends on (a) the number of buttons in the form, and (b) the number of text inputs in the form. Typically when there is one text field and one button, the button won’t be considered ‘successful’, you won’t get a click event, and the button’s name/value pair wouldn’t be included in the submitted form values.

Additionally, trapping Enter keypresses in input fields is unreliable and shouldn’t be done. This will fire in various circumstances when the Enter press shouldn’t submit the form (eg when IMEs are in use), won’t fire in places that should submit the form (eg some other element in the form has focus), and again there are browser differences.

So avoid all this pain: always bind to the submit event on the <form> containing the elements, instead of trying to second-guess what UI events should trigger that submission.