Prevent page reload on enter key pressed

Question

i have the following input field:

<input type="text" id="txt_comment" class="form-control" placeholder="Skriv kommentar">

with this i have the following code

    $('#txt_comment').keyup(function(e){
    if(e.keyCode == 13)
    {
        addComment();
        return false;
    }
    e.preventDefault();
});

However when i press enter it still reloads the page. Can anyone tell me what im doing wrong?

Update

    function addComment()
{
    var comment = $('#txt_comment').val();
    {
        $.ajax({
            type: 'POST',
            url: '/Comment/addComment',
            dataType: 'json',
            data: {
                request: 'ajax',
                reciver:user_id,
                comment: comment
            },
            success: function (data)
            {
                $('#comment_list').prepend(
                    '                                        <li class="list-group-item animated fadeInRightBig">'+
                '        <p><b class="text">'+data['sender']+'</b>:'+
                '<br/>'+comment+' </p>'+
                '<input  type="hidden" class="timestamp" value="'+data["timestamp"]+'">'+
                 '   <small class="block text-muted timeSmall"><i class="fa fa-clock-o"></i></small>'+
                '</li>'
                )
                $('.timestamp').each(function()
                {
                    var text = $(this).next()
                    var timer = $(this).val();
                    var new_text = moment(timer, "YYYY-MM-DD- HH:m:ss").fromNow();
                    text.html(new_text);

                });
                $('#txt_comment').val('');

            }
        })
    }
}

And my function now look like this:

    $('#txt_comment').keyup(function(e){
    if(e.keyCode === 13)
    {
        addComment();
        e.preventDefault();
        return false;
    }
});

Still having page reloads

Because you stop the execution if enter is pressed, and e.preventDefault is not called. Put it in the if before the return false — Superdrac, Oct 15 '14 at 11:43
possible duplicate of [ENTER key on a FORM with a single Input Field, will automatically SUBMIT with GET](http://stackoverflow.com/questions/1370021/enter-key-on-a-form-with-a-single-input-field-will-automatically-submit-with-ge) — andy, Oct 15 '14 at 11:48
BTW: Since you use jquery: Don't use `e.keyCode` to get the pressed key, use [`event.which`](http://api.jquery.com/event.which/) instead — hindmost, Oct 15 '14 at 11:52

score 1 · Accepted Answer · answered Oct 15 '14 at 11:58

For quick reference: To solve the issue, add a hidden input field to your form.

This is a relic from the an older version of HTML:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

score 0 · Answer 2 · answered Oct 15 '14 at 11:43

0

The return is firing before the preventDefault call, just re-arrange them:

$('#txt_comment').keyup(function(e){
    e.preventDefault();
    if(e.keyCode === 13) {
        addComment();
        return false;
    }
});

answered Oct 15 '14 at 11:43

dfperry

2,258
1
14
22

what is the addComment function doing exactly? – dfperry Oct 15 '14 at 11:45

score 0 · Answer 3 · answered Oct 15 '14 at 11:55

0

Use the keydown function instead:

 $('#txt_comment').keydown(function(e){
    if(e.keyCode == 13)
    {
        addComment();
        return false;
    }
    e.preventDefault(); });

answered Oct 15 '14 at 11:55

Bonomi

2,541
5
39
51

Prevent page reload on enter key pressed

3 Answers3