Submitting forms through Vanilla JavaScript using AJAX

Question

Submitting forms through Vanilla JavaScript using AJAX

Can anyone assist me in implementing an AJAX form submission using Vanilla JavaScript instead of jQuery? I have the following jQuery code that needs to be converted:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.myForm').addEventListener('submit', function(event) {
    var data = this;
    var xhr = new XMLHttpRequest();
    xhr.open(data.getAttribute('method'), data.getAttribute('action'));
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // Handle success
      }
    };
    xhr.send(new URLSearchParams(new FormData(data)));
    event.preventDefault();
  });
});

javascript ajax forms

Answer 1

Answer №1

Utilize the native Fetch API for handling AJAX requests and FormData to process form data efficiently.

In addition, consider replacing your jQuery code with event listeners, query selectors, and attribute getters for a more modern approach.

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.myForm').addEventListener('submit', function (event) {
    var formData = this;
    fetch(formData.getAttribute('action'), {
      method: formData.getAttribute('method'),
      body: new FormData(formData)
    }).then(res=>res.text())
      .then(function (data) {
        
      });
    event.preventDefault();
  });
});

Answer 2

Utilize the native Fetch API for handling AJAX requests and FormData to process form data efficiently.

In addition, consider replacing your jQuery code with event listeners, query selectors, and attribute getters for a more modern approach.

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.myForm').addEventListener('submit', function (event) {
    var formData = this;
    fetch(formData.getAttribute('action'), {
      method: formData.getAttribute('method'),
      body: new FormData(formData)
    }).then(res=>res.text())
      .then(function (data) {
        
      });
    event.preventDefault();
  });
});

Answer 3

Answer №2

// Event listener for when the document is fully loaded
window.addEventListener('DOMContentLoaded', () => {

    // Select all forms with a specific CSS class
    var forms = document.querySelectorAll('.ajax-form');
    if (forms && forms.length) {
        forms.forEach(form => {

            form.addEventListener('submit', function(evt) {

                // Prevent default form submission behavior
                evt.preventDefault();           
                
                // Fetching data from {url}
                var xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
            
                xhr.addEventListener('readystatechange', function() {
                    if (this.readyState === 4) {
    
                        // Processing fetched data
                        var data = JSON.parse(this.responseText);
                        console.log(data);
                    }
                });
    
                // Get form data
                var data = new FormData(form),
                    method = form.getAttribute('method'),
                    url = form.getAttribute('action');
    
                // Debugging
                console.log({
                    data: data,
                    method: method,
                    url: url
                });
            
                // Sending request using different methods
                xhr.open(method, url);
                xhr.send(data);
            })
        });
    }
});

Answer 4

// Event listener for when the document is fully loaded
window.addEventListener('DOMContentLoaded', () => {

    // Select all forms with a specific CSS class
    var forms = document.querySelectorAll('.ajax-form');
    if (forms && forms.length) {
        forms.forEach(form => {

            form.addEventListener('submit', function(evt) {

                // Prevent default form submission behavior
                evt.preventDefault();           
                
                // Fetching data from {url}
                var xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
            
                xhr.addEventListener('readystatechange', function() {
                    if (this.readyState === 4) {
    
                        // Processing fetched data
                        var data = JSON.parse(this.responseText);
                        console.log(data);
                    }
                });
    
                // Get form data
                var data = new FormData(form),
                    method = form.getAttribute('method'),
                    url = form.getAttribute('action');
    
                // Debugging
                console.log({
                    data: data,
                    method: method,
                    url: url
                });
            
                // Sending request using different methods
                xhr.open(method, url);
                xhr.send(data);
            })
        });
    }
});

Submitting forms through Vanilla JavaScript using AJAX

Answer №1

Answer №2

Similar questions

What methods can be used to accomplish this effect using CSS and/or Javascript?

Exploring GatsbyJs: Optimal Strategies for Storing Strings and Text on Static Websites

The colorbox division refuses to be shown

Pass a variable between popup.js and background.js in a Chrome Extension

I must create text that is transparent against a colorful gradient background

Tips for displaying live data in the rows of Element UI's Table

Guide on performing an inner-join query in Firestore using NextJS

Retrieve data from JSON using AJAX

Make sure to only update the state in useEffect after retrieving the data from the localStorage

HeatMap Visualizations Data

Why isn't my callback working? Can anyone help me figure out what I did wrong?

Difficulty in clearing form values/content despite successfully submitting

The script fails to load under the specified circumstances

Required form fields are a must when utilizing Material-UI Form and React Testing Library

Exploring the Possibilities of Greensock within Meteor Templates

Errors always occur when making POST requests in SAPUI5, leading to a 500 Server Error specifically related to OData

Adjust the alignment of an expansion panel header to the right using Vuetify

The b-link component in bootstrap-vue is not displaying the text content or inner HTML as expected

Transfer information from an HTML document to a Vue application that has been registered

Getting duplicate tokens for multiple users while utilizing Firebase messaging