Difference in behaviour of function - JavaScript/jQuery

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.

bobince · Accepted Answer · 2011-02-26 10:43:23Z

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.

Bergius · Accepted Answer · 2011-02-26 10:51:02Z

The first thing I can think of is evt.keyCode -- try using evt.which (a jQuery property which unifies the different browser behaviors).

Edit: Now I noticed the second alert. Your code is a tad messy, let's clean it up and see if the problem persists:

$('#newsletter_button').click(newsletterSignup);
$('#newsletter_email').keyup(newsReturn);

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

function newsReturn(e) {
    if (e.which === 13) {
        newsletterSignup.apply(this, arguments);
    }
}

Also, I don't know what your markup looks like, but if you were to use a form:

<form action="newsletterSignup.php" method="post" id="newsletter-form">
    <input type="text" id="newsletter-email" name="newsletter_email"/>
    <button type="submit">Go-go-gadget!</button>
</form>

Then you can skip the keyup stuff:

$('#newsletter-form').submit(newsletterSignup);

function newsletterSignup(e) {
    e.preventDefault();
    var email = $.trim($('#newsletter-email').val());
    if (!validateEmail(email)) {
        alert('Please enter a valid email');
        return false;
    } else {
        // add email to database
        $.post(this.action, 
             { email: email }, 
             function (data) { alert(data); }
        );
        $('#newsletter-email').val('');
    }
    return false;
}

Plus, people will be able to sign up even if you have a JavaScript problem on the page.

Collectives™ on Stack Overflow

Difference in behaviour of function - JavaScript/jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related