In this jQuery Ajax submits a multipart form or FormData tutorial example – you will learn how to submit the form using the jquery ajax with multi-part data or FromData. Here you will know about the basic faqs of jquery ajax form.
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.
In this step, we will create an HTML form for multiple file uploads or FormData and an extra field.
<!DOCTYPE html>
<html>
<title>jQuery Ajax Form Submit with FormData Example</title>
<body>
<h1>jQuery Ajax Form Submit with FormData Example</h1>
<form method="POST" enctype="multipart/form-data" id="myform">
<input type="text" name="title"/><br/><br/>
<input type="file" name="files"/><br/><br/>
<input type="submit" value="Submit" id="btnSubmit"/>
</form>
<h1>jQuery Ajax Post Form Result</h1>
<span id="output"></span>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>
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);
}
});
});
});
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");
jQuery tries to transform your FormData object to a string, add this to your $.ajax call:
processData: false,
contentType: false
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');
}
});
In this jquery ajax form tutorial – you have learned how to send or submit the form data or multipart form using the jquery ajax on the server. Also, you have known the related queries of jquery ajax form.
#javascript #jquery #ajax