AJAX multipart form never calls success function

Question

I submit a multipart form using ajax and it never calls the success function (although the form submit does succeed), it always redirects to the php page for the form.

This is my code:

 $('#pre-register-contact-form').on('submit', function (e) {
    if (!e.isDefaultPrevented()) {
        var url = "preregisterform.php";
        $.ajax({
            type: "POST",
            url: url,
            contentType: false,
            data: new FormData($(this)),
            processData: false,
            success: function (data)
            {
                    // Never reaches here!
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;
                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                if (messageAlert && messageText) {
                    $('#pre-register-contact-form').find('.messages').html(alertBox);
                    $('#pre-register-contact-form')[0].reset();
                    grecaptcha.reset();
                }
            },
            error: function(error) {
                alert(error);
            }
        });
        return false;
    }
});

However, if I don't submit the form in a multipart way, using the code below, it calls the success function:

$('#pre-register-contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "preregisterform.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#pre-register-contact-form').find('.messages').html(alertBox);
                        $('#pre-register-contact-form')[0].reset();
                        grecaptcha.reset();
                    }
                }
            });
            return false;
        }
    });

How can I fix this?

Possible duplicate of [Sending multipart/formdata with jQuery.ajax](https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax) — Muhammad Omer Aslam, Dec 10 '17 at 16:25
@MuhammadOmerAslam Nope, that doesn't talk about the success function not being called... — Tometoyou, Dec 10 '17 at 16:33

score 0 · Accepted Answer · answered Dec 10 '17 at 16:52

0

I needed to change $(this) to this and then it worked

answered Dec 10 '17 at 16:52

Tometoyou

7,792
12
62
108

and that is what is exactly mentioned in the post i mentioned if you look down in the selected answer you will see `new FormData($(this)[0])` , try adding this statement `console.log(this, $(this), $(this)[0]);` inside the `onSubmit` event and notice that `this` and `$(this)[0]` are the same but not `$(this)` :) if you change your `this` to `$(this)[0]` it would still work, glad you fixed it cheers – Muhammad Omer Aslam Dec 10 '17 at 17:00
@MuhammadOmerAslam Should've posted that answer then instead of flagging my post – Tometoyou Dec 10 '17 at 17:31
We should not copy/paste instead a similar or duplicate question that already has an answer is always preferred so other people having the same issue get redirected to the actual answer which has been undergone so many experts here and the comments on the answers also help you out, don't take it negatively neither I meant to discourage you but it was actually a solution suggested to you. Hope there are no harsh feelings, after all, me you and all the other members are here to help each other. – Muhammad Omer Aslam Dec 10 '17 at 17:42
@MuhammadOmerAslam Thank you, if you post your first comment as an answer I'll accept it for you :) – Tometoyou Dec 10 '17 at 20:14

AJAX multipart form never calls success function

1 Answers1