Send data using only Javascript

Question

Send data using only Javascript

Hey there, I'm a beginner in javascript and I'm having some trouble submitting a form using pure javascript.

Here is my code:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("ready");
        var data = JSON.parse(this.response);
        console.log('success');
      } else {
        console.log("not ready yet");
      };
    };
    request.onerror = function() {
      console.log("connection error");
    };
    request.send();
  });

});

Can anyone help me figure out what I'm missing?

Thanks in advance!

javascript django

Answer 1

Answer №1

You need to make sure you are sending the request body to the server using the send() method. Here's an example:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("ready");
        var data = JSON.parse(this.response);
        console.log(data); // returns the dictionnary { selected_elements:[] } 
        console.log('success');
      } else {
        console.log("not ready yet");
      };
    };
    request.onerror = function() {
      console.log("connection error");
    };
    request.send(myform); // Make sure to pass the form as the request body.
  });

});

Refer to Mozilla Docs on send() method for more information.

Answer 2

You need to make sure you are sending the request body to the server using the send() method. Here's an example:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("ready");
        var data = JSON.parse(this.response);
        console.log(data); // returns the dictionnary { selected_elements:[] } 
        console.log('success');
      } else {
        console.log("not ready yet");
      };
    };
    request.onerror = function() {
      console.log("connection error");
    };
    request.send(myform); // Make sure to pass the form as the request body.
  });

});

Refer to Mozilla Docs on send() method for more information.

Answer 3

Answer №2

After struggling for a while, I found the solution by using FormData. Huge thanks to Nalin for guiding me in the right direction!

Here is the JavaScript code snippet that helped me:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    var formData = new FormData(myform);
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("Request successful");
        var data = JSON.parse(this.response);
        console.log(data); // Displaying { selected_elements:[] } 
        console.log('Success');
      } else {
        console.log("Request not successful");
      };
    };
    request.onerror = function() {
      console.log("Connection error");
    };
    request.send(formData);
  });

});

Answer 4

After struggling for a while, I found the solution by using FormData. Huge thanks to Nalin for guiding me in the right direction!

Here is the JavaScript code snippet that helped me:

var myform = document.getElementById('js-post-form');
myform.addEventListener('submit', function(e){
    var formData = new FormData(myform);
    e.preventDefault();
    var request = new XMLHttpRequest();
    request.open(myform.method, myform.action, true);
    request.setRequestHeader('X-CSRFToken', cookies['csrftoken']);
    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    request.onload = function () {
      if (this.status >= 200 && this.status < 400) {
        console.log("Request successful");
        var data = JSON.parse(this.response);
        console.log(data); // Displaying { selected_elements:[] } 
        console.log('Success');
      } else {
        console.log("Request not successful");
      };
    };
    request.onerror = function() {
      console.log("Connection error");
    };
    request.send(formData);
  });

});

Send data using only Javascript

Answer №1

Answer №2

Similar questions

Developing a TypeScript NodeJS module

The issue of passing state in React Router v4 Redirect unresolved

Retrieve the modal ID when the anchor tag is clicked in order to open the modal using PHP

Control the contents of the DOM using JavaScript in a single-page application

Verifying user identity in Django Rest Framework by integrating with Google Authentication

Reducing the amount of code within an if statement by utilizing JavaScript

Utilizing outdated database with master data in Django

Generate the Xpath for the mentioned href element to use with Selenium Webdriver

Update and republish an outdated npm package

The styles from the npm package are not being properly applied to the class

Refresh gif without having to reload it in Internet Explorer 11

Baconjs exclusively retrieves the final debounce value

Tips for correctly storing an async/await axios response in a variable

Tips for Passing Parameters to Vuex mapActions correctly:Executing mapActions in Vuex requires a specific

An in-depth guide on implementing debounce functionality for `keyup` events in Vue.js

Unable to toggle Bootstrap 5 tabs in a Nunjucks template - the issue persists

What is the best way to transform an Object into an Array?

What is the most efficient way to organize an array by date?

Am I on the right track with my service definition in Angular?

Utilizing HTML documents instead of images in Owl Carousel 2