TypeError: e.preventDefault is not a function

Question

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.

Answer 1

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.

Answer 2

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