jQuery Ajax Form Submit with FormData Example

Submit a form with Ajax

The following function submits the data of formEle to the back-end using an Ajax request:

const submit = function (formEle)  
return new Promise(function (resolve, reject)  
// Serialize form data 
// See https://htmldom.dev/serialize-form-data-into-a-query-string 
const params = serialize(formEle);
 
// Create new Ajax request 
const req = new XMLHttpRequest(); 
req.open('POST', formEle.action, true); 
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
 
// Handle the events 
req.onload = function ()  
if (req.status >= 200 && req.status  400)  
resolve(req.responseText); 
> 
>; 
req.onerror = function ()  
reject(); 
>;
 
// Send it 
req.send(params); 
>);
>;

Where the serialize function serializes all the form data into a query string. You can see how it’s implemented in this post.

Usage

const formEle = document.getElementById(. );

submit(formEle).then(function(response)  
// `response` is what we got from the back-end 
// We can parse it if the server returns a JSON 
const data = JSON.parse(response); 
. 
>);

See also

Источник

jQuery Ajax Form Submit with FormData Example

jquery ajax multipart form submit with form data example; In this tutorial, you will learn how to submit the form using the jquery ajax with multi-part data or FromData.

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.

How to AJAX Submit a Form in jQuery

Create HTML Form

In this step, we will create an HTML form for multiple file uploads or FormData and an extra field.

   
jQuery Ajax Form Submit with FormData Example
 
 

 
    

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 jquery ajax form submit with form data example, we will post it manually. event.preventDefault(); // Get form var form = $('#myform')[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

• How to add extra fields or data with Form data in jQuery ajax?
• ajax FormData: Illegal invocation
• How to send multipart/FormData or files with jQuery.ajax?

See the following faqs for 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: false

3. 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'); >>);

Note

Conclusion

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.

Recommended jQuery Tutorial

If you have any questions or thoughts to share, use the comment form below to reach us.

Author Admin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Источник

How to Submit Form using Ajax in PHP?

In this post, we will learn How to Make a Form Submit in ajax PHP. i explained simply step by step How To Use Form Submit using Ajax in PHP & MySQL. Here you will learn how to Form submit to database Using ajax. This tutorial will give you simple example of ajax form submit php mysql Code Example.

I will give you simple Example of How to make a ajax form submit in PHP.

So let’s see bellow example: