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>

Answer 1

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);
                }
            });
        }
    }
});