submit form without load page
Poor Man
- Published
- Reading time
- 2 min read
- Length
- 295 words
On this page
How to submit a form without loading a page#
If you want to submit a form without reloading the page, you will need to use JavaScript. There are several ways to do this:
1. Using AJAX#
AJAX is a technique that allows you to send and retrieve data from a server without reloading the page. To use AJAX to submit a form, you will need to:
- Create an XMLHttpRequest object
- Open a connection to the server
- Send the form data using the POST method
- Handle the response from the server
Here is an example code:
Text
// Get the form element
var form = document.getElementById("myForm");
// Create an XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Open a connection to the server
xhr.open("POST", "submit.php");
// Set the Content-Type header
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// Send the form data
xhr.send(new FormData(form));
// Handle the response from the server
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};2. Using jQuery#
If you are using jQuery, you can use the $.ajax() method to submit a form without reloading the page. Here is an example code:
Text
// Get the form element
var form = $("#myForm");
// Submit the form using AJAX
$.ajax({
type: "POST",
url: "submit.php",
data: form.serialize(),
success: function(response) {
console.log(response);
}
});3. Using Fetch API#
You can also use the Fetch API to submit a form without reloading the page. Here is an example code:
Text
// Get the form element
var form = document.getElementById("myForm");
// Send the form data using Fetch API
fetch("submit.php", {
method: "POST",
body: new FormData(form)
}).then(function(response) {
return response.text();
}).then(function(data) {
console.log(data);
});These are some of the ways to submit a form without reloading the page. Choose the one that works best for you.