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

JavaScript Promise Handling: using fetch method to retrieve and extract the PromiseValue

React Native - Implementing a dynamic form that adapts based on the answer given by its parent

Input field in a tableview

Utilize CSS to showcase the full-size version of a clicked thumbnail

retrieve Excel document via POST request

Pull JSON data from an Ajax application and cycle through the JSON values in a separate function

Executing a complex xpath using Java Script Executor in Selenium WebDriver

Is there a way to configure eslint to recognize and allow the nullish-coalescing assignment syntax?

Unique calculation for rotational movement

I'm currently attempting to set up the React JS package, but unfortunately encountering some errors in the process

Unraveling in jQuery

The mysterious anomaly in Vue.js

Show only specific items in an AngularJS application

What is the best way to verify the presence of a file using jQuery?

Linking Google Form Data to a MongoDB Database

Display Default Image in Vue.js/Nuxt.js when Image Not Found

Error Alert: Request missing connection details while trying to connect to Sql server via express.js

The login page continues to show an error message for incorrect credentials unless the submit button is clicked

How to Remove onFocus Warning in React TypeScript with Clear Input Type="number" and Start without a Default Value

Retrieve the public URL from the index.html file following the build process