Submit form using pure Javascript

Question

Hello hello javascript newbie here.

I am trying to submit a form with pure javascript but failing :

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();
  });

});

What am I missing ?

thank you!

Nalin Dobhal · Accepted Answer · 2020-01-25 18:21:08Z

2

You are not sending anything to the server. Request body should be sent with send() method. Try this:

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); // Passed the form to be send with request body.
  });

});

Mozilla Docs on send() method.

answered Jan 25, 2020 at 18:21

Nalin Dobhal

2,3622 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ben Over a year ago

aaaah how I wish you were right ! So I added myform to request.send() and I still get an empty list... :(

Nalin Dobhal Over a year ago

did you get any solution?

Ben · Accepted Answer · 2020-01-28 07:36:07Z

Using FormData was the answer. Thank you Nalin for putting me on the right track !

the JS :

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("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(formData);
  });

});

Collectives™ on Stack Overflow

Submit form using pure Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related