CODEWITHSUNDEEP
javascriptxmlhttprequest
Puddin
Puddin

Reputation: 23

Trying to submit html form data via xmlhttprequest

I am trying to put together a simple login prompt for a bit of in house testing and I have found myself stuck. I have the login prompt made via HTML and am trying to send it off via xmlhttprequest. Here is my JS code:

var xhr = new XMLHttpRequest();

function loginResults() {
  var loginUser = document.getElementById("username").value;
  var loginPass = document.getElementById("password").value;
  //console.log(loginUser + loginPass);
  xhr.open("post", "https://test.com/api/login/");
  var loginData = "username=" + loginUser + "&password=" + loginPass
  xhr.send(loginData);
  //console.log(loginData);
  xhr.addEventListener("readystatechange", processRequest, false);
}

function processRequest(e) {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
}

The issue is that the xhr.send completely fails using this method. However if I replace the variables sent with the plain text then everything works fine. Like this:

var loginData = "username=" + "[email protected]" + "&password=" + "test1234"

What is the difference between pulling the info via the form data and having the login hard coded like that? The request payload is exactly the same in both instances.

EDIT Here is the gist of my HTML form:

    <form name="isLogin" id="isLogin" onSubmit="loginResults()" method="post">

<div class="container">

<label for="username"><b>Email</b></label>

<input type="text" id="username" placeholder="Enter Email" name="username" required>

<label for="password"><b>Password</b></label>

<input type="password" id="password" placeholder="Enter Password" name="password" required>

<button id="submitLogin"  type="submit">Login</button>

Upvotes: 1

Views: 2522

Answers (2)

user5734311
user5734311

Reputation:

The reason the request gets cancelled is you aren't intercepting the standard form submission. When you click the Login button, Chrome fires off the AJAX request, then also submits the form. Since this leads to a page load, Chrome cancels the AJAX request.

What you need to do is prevent the default event handling. A clean way to do this is to add the submission handling in your script:

document.getElementById("isLogin").onsubmit = function(e) {
  e.preventDefault();
  // AJAX here
  console.log("form submission intercepted");
};
<form name="isLogin" id="isLogin" method="post">
  <div class="container">
    <label for="username"><b>Email</b></label>
    <input type="text" id="username" value="[email protected]" name="username" required>
    <label for="password"><b>Password</b></label>
    <input type="password" id="password" value="test1234" name="password" required>
    <button id="submitLogin" type="submit">Login</button>
  </div>
</form>

Upvotes: 1

user5395947
user5395947

Reputation:

You need to escape values before concatenating them to the URL querystring:

    var loginUser = encodeURIComponent(document.getElementById("username").value);
    var loginPass = encodeURIComponent(document.getElementById("password").value);

Secondly, i wouldn't recommend passing password directly through querystring. The secure way to pass it is preferably salted-and-hashed.

Upvotes: 0

Related Questions