CODEWITHSUNDEEP
javascriptjquery
Juliver Galleto
Juliver Galleto

Reputation: 9037

ajax form submit redirect like a not ajax form

I have this code that I use to submit a form with a attachment file

$("#career_form").submit(function(e){
    var this_current = $(this);
    var formData = new FormData(this_current[0]);
    var url = this_current.attr("action");
    $.ajax({
        url : url,
        data: formData,
        type: 'post',
        cache: false,
        async: true,
        beforeSend: function(){  },                   
        success: function(response){
            if(response === true){
                alert("successfully sent");
            }
        }
    });
    e.preventDefault();
});

but the form keeps redirecting me to its destination file "url in the action" like it wasn't an ajax submission but if I replace the 'data' argument with

data: $(this).serialize();

it works (ajax submit), any ideas, help, suggestions, recommendations?

Upvotes: 1

Views: 372

Answers (4)

SSS
SSS

Reputation: 92

Try this:

$("#career_form").submit(function(e){
    e.preventDefault();
    var fd = new FormData(document.querySelector("form"));
    fd.append("CustomField", "This is some extra data");
    $.ajax({
        url: "change-status.php",
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        success: function(response){
            if(response){
                alert("successfully sent");
            }
        }
    });
});

Upvotes: 0

Rahul Singh
Rahul Singh

Reputation: 892

You can edit the var formData = new FormData(this_current[0]); in your code and use the below line:

var formData = new FormData(document.querySelector("#career_form"));

Also, if you are using multipart form to send files in your form, you need to set following parameters in your ajax call.

  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType

Hope this helps. See more about using formData here.

Upvotes: 0

twain
twain

Reputation: 1325

jQuery trys to transform your data by default into a query string, but with new formData it throws an error.

To use formData for a jquery ajax request use the option processData and set it to false like:

 $.ajax({
        url : url,
        data: formData,
        type: 'post',
        cache: false,
        async: true,
    processData: false,
        beforeSend: function(){  },                   
        success: function(response){
            if(response === true){
                alert("successfully sent");
            }
        }
    });

Thats the reason why it works with serialize, but not with formData in your example.

The e.preventDefault works correctly, but if there is an error before it will not work. By placing the e.preventDefault at the top of your function it will allways prevent the action, no matter if there is an error in later code or not.

Upvotes: 0

Anoop LL
Anoop LL

Reputation: 1575

give that e.preventDefault(); at the beginning of the function.

Upvotes: 2

Related Questions