JQuery Ajax Form Submit with FormData Example
Overview
In this jQuery Ajax submits a multipart form or FormData example – I will Explain how to submit the form using the jquery ajax with multi-part data or FromData.JQuery Ajax Form Submit with FormData
In this tutorial, learn jquery ajax form submits with the form data step by step. A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax().
If you will be using jQuery’s Ajax Form Submit, you can send the form data to the server without reloading the entire page. This will update portions of a web page – without reloading the entire page.
AJAX:- AJAX (asynchronous JavaScript and XML) is the art of exchanging data with a server and updating parts of a web page – without reloading the entire page.
Step 1.Create HTML Form
In this step, we will create an HTML form for multiple file uploads or FormData and an extra field.
<!DOCTYPEhtml><html><title>jQuery Ajax Form Submit with FormData Example</title><body><h1>jQuery Ajax Form Submit with FormData Example</h1><formmethod="POST"enctype="multipart/form-data"id="myform"><inputtype="text"name="title"/><br/><br/><inputtype="file"name="files"/><br/><br/><inputtype="submit"value="Submit"id="btnSubmit"/></form><h1>jQuery Ajax Post Form Result</h1><spanid="output"></span><scriptsrc="https://code.jquery.com/jquery-3.4.1.min.js"></script></body></html>
jQuery Ajax Code
In this step, we will write jquery ajax code for sending a form data to the server.
$(document).ready(function () {
$("#btnSubmit").click(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
// Get form
var form = $('#fileUploadForm')[0];
// Create an FormData object
var data = new FormData(form);
// If you want to add an extra field for the FormData
data.append("CustomField", "This is some extra data, testing");
// disabled the submit button
$("#btnSubmit").prop("disabled", true);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/upload.php",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 800000,
success: function (data) {
$("#output").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#output").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});
});
});FAQs – jQuery Ajax Form Submit
1. How to add extra fields with Form data in jQuery ajax?
The append() method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.
// Create an FormData object
var data = new FormData(form);
// If you want to add an extra field for the FormData
data.append("CustomField", "This is some extra data, testing");2. ajax FormData: Illegal invocation
jQuery tries to transform your FormData object to a string, add this to your $.ajax call:
processData: false,
contentType: false3. How to send multipart/FormData or files with jQuery.ajax?
In this step you will learn how to send multiple files using jQuery ajax. Let’s see the below code Snippet:
var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
$.ajax({
url: 'upload.php',
data: data,
cache: false,
contentType: false,
processData: false,
method: 'POST',
success: function(data){
console.log('success');
}
});Check This Also
Difference between AngularJS and Angular 2 Make a Mobile app in just 10 minutes With Ionic Framework Angular 9: What to Expect in New Version of Angular Alert (Toaster) Notifications in Angular 8About Post Author
