CODEWITHSUNDEEP
javascriptjqueryajax
Arjun Ajith
Arjun Ajith

Reputation: 1920

TypeError: e.preventDefault is not a function

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.

Upvotes: 19

Views: 125923

Answers (4)

Ani
Ani

Reputation: 561

For example in laravel I was using like that and it works. $( "#register-form" ).validate({

    submitHandler: function(form) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        var formData = new FormData(form);
        $.ajax({
            type:'POST',
            url:'{{route('registerapi')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data) {
                if ($.isEmptyObject(data.error)) {
                    $(':input','#register-form')
                        .not(':button, :submit, :reset, :hidden')
                        .val('')
                        .prop('checked', false)
                        .prop('selected', false);

                    window.location.href = "{{route('/')}}";

                } else {
                    console.log(data.error);
                }
            }
        });
    }
});

Upvotes: 0

wahmal
wahmal

Reputation: 947

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

Upvotes: 4

Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

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.

[1 - link]

Upvotes: 1

mtrolle
mtrolle

Reputation: 2284

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.

Upvotes: 15

Related Questions