CODEWITHSUNDEEP
javascriptajaxforms
Tim Levinsson
Tim Levinsson

Reputation: 597

Vanilla JavaScript AJAX form submit

I need help to make a form submit using AJAX in Vanilla JavaScript (No jQuery). I have this jQuery Code that i need converted to JavaScript.

  $(document).ready(function() {
    $('.myForm').submit(function (event) {
      var data = $(this);
      $.ajax({
        type: data.attr('method'),
        url: data.attr('action'),
        data: data.serialize(),
        success: function (data) {

        }
      });
      event.preventDefault();
    });
  });

Upvotes: 3

Views: 9951

Answers (2)

Santo Boldizar
Santo Boldizar

Reputation: 1395

// Document loaded event listener
window.addEventListener('DOMContentLoaded', () => {

    // Get al 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 form submission
                evt.preventDefault();           
                
                // Fetch data from {url}
                var xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
            
                xhr.addEventListener('readystatechange', function() {
                    if (this.readyState === 4) {
    
                        // Fetch and process 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');
    
                // Debug
                console.log({
                    data: data,
                    method: method,
                    url: url
                });
            
                // Send a GET/POST/PUT/DELTE request
                xhr.open(method, url);
                xhr.send(data);
            })
        });
    }
});

Upvotes: 0

skara9
skara9

Reputation: 4194

You can use the built-in Fetch API for AJAX calls and FormData to parse your form.

Other than that, just replace your jquery with event listeners, query selectors, and attribute getters.

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

Upvotes: 13

Related Questions