I am new in javascript and jquery. I am using two jquery plugins in this code. One is Jquery form validator and the other is Jquery form ajaxSubmit. With normal ajax submission the code works fine, but now i had to post a file too. So I am using ajaxSubmit. When I run this I get an error "TypeError: e.preventDefault is not a function" on browser console.
Please don't mark this as a duplicate question because answers for other questions on the same topic are not working for me.
<script type="text/javascript">
$(document).ready(function() {
$("#addpost").validate({
rules: {
subject: "required",
comment: "required"
},
messages: {
subject: "Please enter a subject",
comment: "Please enter some details",
},
submitHandler: function(e){
e.preventDefault();
$.ajaxSubmit({
url: '/addpost',
type: 'post',
dataType: 'html',
data : $( "#addpost" ).serialize(),
success : function(data) {
location.reload();
}
});
}
});
});
</script>
Solution for my problem was changing the submithandler as follows:-
submitHandler: function(form){
$(form).ajaxSubmit({
url: '/addpost',
type: 'post',
dataType: 'html',
data : $( "#addpost" ).serialize(),
success : function(data) {
location.reload();
}
});
return false
}
Hoping this will help someone.
I'm not sure you would use e.preventDefault() in a submit handler.
Remove that line and add return false; after your ajax submit instead.
That would prevent the form from being submitted.
your e not event, but the form element. change your code like this :
submitHandler: function(form,e){ // place your element on second parameter
e.preventDefault();
$.ajaxSubmit({
url: '/addpost',
type: 'post',
dataType: 'html',
data : $( "#addpost" ).serialize(),
success : function(data) {
location.reload();
}
});
}
The e you are using inside the submitHandler does not provide an event object. It provides the form object which you are validating! Thus the error you are getting. Please read the documentation 1 so that you get an idea on what objects and callback you are dealing with.