Page is reloading when form submit usng jquery ajax - php

Question

I am trying to submit a form using jquery ajax. My problem is when I submitting the form its submitting but my page is reloading. I tried using preventDefault(). But I still couldn't figure this out.
This is the HTML for my form:
<form action="" method="post" id="addCategoryForm">
<div class="form-group">
<input type="text" class="form-control" id="new_category" name="new_category" autofocus>
</div>
<div class="form-group">
<select class="form-control" name="parentCategoryList">
<option value="">-- Parent Category --</option>
<option value="">Lorem ipsum</option>
<option value="">Lorem ipsdffum</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-default" id="addCategory">Add New Category</button>
</div>
</form>
This is how I tried it using jQuery:
$(document).on('click', 'button#addCategory', function (e) {
//e.preventDefault();
var data = $("form#addCategoryForm").serialize();
$.ajax({
type: "POST",
url: "./includes/process.php",
data: data,
cache: false,
beforeSend: function() {
window.tr.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function (response) {
$('#success').html(response);
$("#success-alert").fadeTo(2000, 500).slideUp(1000, function(){
$("#success-alert").alert('close');
});
}
});
//return false;
});
When I uncomment e.preventDefault(); form is not sumbitting. If I comment it form is submitting but page is reloading.
Can anybody tell me whats the problem of this?
Hope somebody may help me out. Thanks in advance.

Answer 1

You should listen to the submit event, your elements were enclosed by a form
Try this event
$('#addCategoryForm').on('submit', function(e) {
e.preventDefault();
//Do ajax here
}

Answer 2

try this
<div class="form-group">
<button type="button" class="btn btn-default" id="addCategory">Add New Category</button>
</div>
Please note that i have added type="button" . This is because, when no type is mentioned, by default it takes it as a submit button. And that is the reason why page reloads