sending POST data with JavaScript (xhttp) (ajax)

Question

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();

    var a = document.getElementById("name").value;
    var b = document.getElementById("message").value;
    var postdata = "name=a&message=b"; //Probably need the escape method for values here, like you did

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "/chat/backend-input.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send(postdata);
}
</script>

<form onsubmit="loadDoc()">
Name: <input type="text" name="name" id="name"><br>
Message: <input type="text" name="message"><br>
<input type="submit"></input>
</form>

Why does this code not work? Have I done something wrong, when I press the submit button it does not POST the data from the form

Can someone explain where I have gone wrong?

Edit: Instead of outputting what is in the form it's outputting a and b.

Possible duplicate of [Send POST data using XMLHttpRequest](https://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest) — Danny Fardy Jhonston Bermúdez, Aug 23 '17 at 17:02
Did you take a look at the console? What does it say? ----- Also, add an `id` to `` — acdcjunior, Aug 23 '17 at 17:08

score 1 · Answer 1 · answered Aug 23 '17 at 20:17

Firtly, don't forget to add the id="message" to the line: Message: <input type="text" name="message" id="message"><br>.

Posting data

You do

var postdata = "name=a&message=b";
// ...
xhttp.send(postdata);

So the values you are posting are effectively "a" and "b".

Instead of that, you need to add the values of the a and b variables to postdata. Simple string concatenation would do, but before you need to escape them (using encodeURIComponent()) in case they have special chars.

So, try the following to fix it. Change:

var postdata = "name=a&message=b";

To:

var postdata = "name=" + encodeURIComponent(a) + "&message=" + encodeURIComponent(b);

And it should work.

sending POST data with JavaScript (xhttp) (ajax)

1 Answers1

Posting data