jQuery POST refreshing the page - html

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

Answer 2

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