Ajax Form Submit Javascript Example

MUAZHAN

5 min read

·

Jun 22, 2024

35

Share

AJAX Form Submit with JavaScript Example

This article will guide you through creating an AJAX form submission using JavaScript. AJAX (Asynchronous JavaScript and XML) allows you to send and receive data from a server without reloading the entire page, making for a smoother and more interactive user experience.

1. HTML Structure

First, let's set up the HTML structure for our form:

    
    
    



    

        Name:
        


        Email:
        


        Submit
    

    


    

This code sets up a simple form with two input fields and a submit button. We've also added a <div> with the id "response" where we'll display the server's response.

2. JavaScript Implementation

Now, let's create script.js and implement the JavaScript code for AJAX submission:

const form = document.getElementById("myForm");
const responseDiv = document.getElementById("response");

form.addEventListener("submit", (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(form); // Create FormData object

    // AJAX request
    fetch("process.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        responseDiv.innerHTML = data;
    })
    .catch(error => {
        console.error("Error:", error);
        responseDiv.innerHTML = "An error occurred. Please try again later.";
    });
});

This code does the following:

• Gets references: It retrieves references to the form and the response div.
• Prevents default submission: It prevents the form from submitting in the traditional way, which would reload the page.
• Creates FormData: It creates a FormData object from the form, automatically handling file uploads and other form data.
• Makes AJAX request: It uses the fetch API to make an asynchronous POST request to a server-side script named "process.php".
• Handles response:
  • It converts the response to text.
  • It sets the innerHTML of the response div to the received text data.
• Handles error: It logs any errors to the console and displays a generic error message to the user.

3. Server-side Script (process.php)

You'll need a server-side script to process the submitted data. Here's a simple PHP example: