Ajax Call On Form Submit Javascript

MUAZHAN

6 min read

·

Jun 22, 2024

35

Share

AJAX Call on Form Submit in JavaScript

AJAX (Asynchronous JavaScript and XML) is a powerful technique for making web applications more interactive and responsive. It allows you to send and receive data from a server without reloading the entire page. This is especially useful for form submissions, as it provides a smoother user experience and allows you to handle data validation and feedback more effectively.

How to Implement AJAX on Form Submit

Here's a step-by-step guide on how to implement an AJAX call on form submission using JavaScript:

1. Set up the HTML form:

   
       Name:
       
       
   
       Email:
       
       
   
       Submit
   
   

2. Add an event listener to the form's submit event:

   const form = document.getElementById('myForm');
   form.addEventListener('submit', (event) => {
       // Prevent the default form submission behavior
       event.preventDefault();
   
       // Your AJAX code here...
   });
   

3. Create an AJAX request using XMLHttpRequest or fetch:

   Using XMLHttpRequest

   const xhr = new XMLHttpRequest();
   xhr.open('POST', 'your-server-endpoint', true); // 'true' for asynchronous request
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   
   xhr.onload = () => {
       if (xhr.status >= 200 && xhr.status < 300) {
           // Success! Process the server's response here.
           console.log(xhr.responseText);
       } else {
           // Handle error
           console.error('Error:', xhr.status, xhr.statusText);
       }
   };
   
   xhr.onerror = () => {
       // Handle error
       console.error('An error occurred during the request.');
   };
   
   // Send the form data to the server
   const formData = new FormData(form);
   xhr.send(formData); 
   

   Using fetch

   fetch('your-server-endpoint', {
       method: 'POST',
       body: new FormData(form)
   })
   .then(response => {
       if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
       }
       return response.text(); // or response.json() for JSON data
   })
   .then(data => {
       // Process the response data here
       console.log(data); 
   })
   .catch(error => {
       // Handle errors
       console.error('Fetch error:', error);
   });
   

4. Handle the server's response:

   • The onload event (for XMLHttpRequest) or .then block (for fetch) is triggered when the server response is received.
   • You can access the response data using xhr.responseText or data respectively.
   • Important: The server response format should be understood by your JavaScript code. You may need to parse JSON or other data formats accordingly.

5. Provide feedback to the user:

   • You can display messages, update UI elements, or perform other actions based on the server response.

Example: Submitting a Form with AJAX and Displaying Feedback

    


    

        Name:
        
        

        Email:
        
        

        Submit
    

    


    

This code submits the form data using fetch, displays the server's response in the responseDiv element, and handles errors gracefully.

Remember to replace your-server-endpoint with the actual URL of your server-side endpoint that handles the form submission.

By using AJAX, you can create more dynamic and interactive web forms that provide a smoother and more engaging user experience.