jQuery POST refreshing the page

Question

I have some jQuery that takes the value of a text input and puts it into a MySQL database. However, when the jQuery runs, the page refreshes and the variables in the form appear in the URL almost as GET variables. However, none of the variables are GET. Ideally, I would like the page not to refresh.

jQuery:

$('.commentBox').keypress(function(e) {

    if(e.which == 13) {
        if ($.trim($(this).val()) == ""){
            $('#nocomment').modal('show');
        }
        else {
            var form = $(this).siblings('.commentForm'); 
            var commentbox = $(this).val();

            $.ajax({
                type: "POST",
                url: "../comment",
                data: form.serialize(),
                success: function(){
                    commentbox.val('');
                    form.siblings('.commentContainer').append(response);
                } 
            });
        }
    }

});

HTML (echoed from PHP):

<form class='commentForm'>
    <input type='hidden' name='record_id' value='$answerid[$f]' />
    <input type='hidden' name='question_id' value='$q' />";
    <input type='text' class='commentBox' placeholder='...comment' name='comment' autocomplete='off' />";
</form>

Joseph Silber · Accepted Answer · 2012-01-10T14:50:00.243

2

You have to either return false or prevent default, which will stop the form from submitting:

$('.commentBox').keypress(function(e)
{
    if(e.which == 13)
    {
        e.preventDefault(); // <-- This will stop the form from submitting.

        if ($.trim($(this).val()) == "")
        {
            $('#nocomment').modal('show');
        }
        else
        {
            var form = $(this).closest('.commentForm');
            var commentbox = $(this).val();
            $.ajax({
                type: "POST",
                url: "../comment",
                data: form.serialize(),
                success: function(){
                    commentbox.val('');
                    form.siblings('.commentContainer').append(response);
                }
            });
        }
    }
});

edited Jan 10 '12 at 14:50

answered Jan 10 '12 at 03:32

Joseph Silber

214,931
59
362
292

1

Please do not use return false to accomplish this. It breaks event bubbling and capturing, which can make it difficult for other javascript to ever interact with your elements. – Nate Jan 10 '12 at 03:36
@joseph where should i place this? i tried right after the keypress function and it wouldnt let me type anything in the textbox. then i moved it afte the `else{` and i could type, but when i pressed enter, nothing happened – kirby Jan 10 '12 at 03:37
1

@Nate - [You're right](http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/). I edited my answer. Thanks. – Joseph Silber Jan 10 '12 at 03:40
Awesome! Other than that, we're obviously on the same page. – Nate Jan 10 '12 at 03:41
@JosephSilber thanks, but when i run your code the comment does not go into the database. the page does not refresh which is the good news, but the comment went into the database before – kirby Jan 10 '12 at 03:42
1

@user802370 - Shouldn't you be getting the form with `var form = $(this).closest('.commentForm');`? – Joseph Silber Jan 10 '12 at 03:46
@JosephSilber i realized that my `form.serialize()` is the problem. does my syntax look correct? – kirby Jan 10 '12 at 03:47
The comment went into your database because of the get request your form was submitting unintentionally. You should check out your AJAX call now to figure out why it's not working. You've fixed one problem that covered up a second separate one. – Nate Jan 10 '12 at 03:47

Nate · Answer 2 · 2012-01-10T03:44:22.930

You need to prevent the default action from taking place when hitting the enter key, which is form submission via GET.

e.preventDefault();

$( '.commentBox' ).keypress(function( e ) {

    if( e.which === 13 ) {

        // Prevent the default only when it's the enter key
        e.preventDefault();

        if ( $.trim($(this).val()) === '' ){
            $('#nocomment').modal( 'show' );
        }
        else {
            var form = $( this ).siblings( '.commentForm' ); 
            var commentbox = $( this ).val();

            $.ajax({
                type: "POST",
                url: "../comment",
                data: form.serialize(),
                success: function(){
                    commentbox.val( '' ;
                    form.siblings( '.commentContainer' ).append( response );
                } 
            });
        }
    }

});

please see my last comment on josephs answer – kirby Jan 10 '12 at 03:43 — kirby, Jan 10 '12 at 03:43

jQuery POST refreshing the page

2 Answers2