How to Send FormData Objects with Ajax-requests in jQuery ?
Last Updated :
23 Jul, 2025
In this article, we will see how can we send formData objects with Ajax requests by using jQuery. To send formData, we use two methods, namely, the FormData() method and the second method is serialize() method. The implementation of Ajax to send form data enables the submission of data to the server without the need for a page refresh, which is a potent strategy applied in contemporary web-based applications to enhance the user's interaction. The collection and transmission of form data with Ajax requests use FormData objects.
Syntax:
$.ajax({
url: "your-url",
type: "POST",
data: formDataObject,
processData: false,
contentType: false,
success: function(response){
// Handle success response
},
error: function(xhr, textStatus, error){
// Handle error response
}
});Approach 1: The FormData() simplifies handling form data in JavaScript and jQuery by providing an easy way to construct and manage data from HTML forms, handle files and other complex form data, and automatically set the `Content-Type` header based on the content.
Example: In this example, this code shows how to use jQuery and Ajax to send form data to a server. The HTML form has four input fields (username, last name, address, and email), a submit button, and a unique ID "myForm". The JavaScript code selects a form element by ID and sends its data as an Ajax request to "https://jsonplaceholder.cypress.io/posts" using jQuery's $.ajax() function post method. Form data is sent using the "data" parameter of the Ajax request with disabled "processData" and "contentType" parameters. If the form is submitted, then it will show a success alert otherwise it will show an error message.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<style>
body {
margin: 3rem;
}
#myForm {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: green;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: rgb(22, 138, 22);
}
</style>
</head>
<body>
<form id="myForm">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Send FormData objects with Ajax-requests
</h3>
<label for="username">
User Name:
</label>
<input type="text"
name="username">
<label for="name">
Name:
</label>
<input type="text"
name="name">
<label for="address">
Address:
</label>
<input type="text"
name="address">
<label for="email">
Email:
</label>
<input type="email"
name="email">
<button type="submit">
Submit
</button>
</form>
<script>
$(document).ready(function () {
$('#myForm').submit(function (event) {
event.preventDefault();
var form = document.getElementById('myForm');
var formData = new FormData(form);
$.ajax({
url: 'https://...io/posts',
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (response) {
alert('Your form has been sent successfully.');
},
error: function (xhr, status, error) {
alert('Your form was not sent successfully.');
console.error(error);
}
});
});
});
</script>
</body>
</html>
Output:
Approach 2: The jQuery method serialize() converts form elements into a string for HTTP requests. The serialize() method creates a URL-encoded query string from selected form elements in either a form element or a jQuery object.
Example: This example is very much similar but the difference is that in the previous example, we use FormData() to send a response but in this example, we use serialize() method to send the response.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<style>
body {
margin: 3rem;
}
#myForm {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
background-color: green;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: rgb(22, 138, 22);
}
</style>
</head>
<body>
<form id="myForm">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Send FormData objects with Ajax-requests
</h3>
<label for="username">User Name:</label>
<input type="text"
name="username">
<label for="lastname">Last Name:</label>
<input type="text"
name="lastname">
<label for="address">Address:</label>
<input type="text"
name="address">
<label for="email">Email:</label>
<input type="email"
name="email">
<button type="submit">Submit</button>
</form>
<script>
$(document).ready(function () {
$('#myForm').submit(function (e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: 'https://...io/posts',
type: 'POST',
data: formData,
success: function (response) {
alert('Your form has been sent successfully.');
},
error: function (jqXHR, textStatus, errorThrown) {
alert('Your form was not sent successfully.');
}
});
});
});
</script>
</body>
</html>
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing