JavaScript AJAX preventDefault

Question

I'm making a simple login page (backed by PHP and MySQL) to learn more about JavaScript and AJAX. I had it working with a form without a submit button, just a button with an onclick method call. However, I want it to be a submit button so hitting enter will call the function, and that seems the proper way to do things anyway. After endless research and trying to translate jQuery solutions, I still can't stop the form from submitting by default.

If I fill out the form with test data and submit, it submits the form with "?username=test&password=test&submit=Log+In" in the url and reloads the page, without displaying the message from the server. Why isn't the event preventDefault working? I've also tried this with adding the eventlistener to the form element with a submit event.

<?php
session_start();
if (isset($_SESSION['user']))
  header("Location: home.php");
?>
<html>
<head>
<script>
document.getElementById('login_btn').addEventListener('click', login(event));
var request = new XMLHttpRequest();
function login(evt) {
  evt.preventDefault();
  var username = encodeURIComponent(document.getElementById('username').value);
  var password = encodeURIComponent(document.getElementById('password').value);
  request.open('POST', 'login.php', true);
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.onreadystatechange = process_login;
  request.send('username=' + username + '&password=' + password);
}
function process_login() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var response = request.responseXML;
      var message = response.getElementsByTagName('message').item(0).firstChild.nodeValue;
      if (message == '')
        window.location = 'home.php';
      else
        document.getElementById('message').innerHTML = '<b>' + message + '</b>';
    }
  }
}
</script>
<title>Log In</title>
</head>
<body>
<h2>Please Log In</h2>
<form>
<table>
<tr><td>Username:</td><td><input type="text" name="username" id="username"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password" id="password"></td></tr>
<tr><td><input id="login_btn" type="submit" name="submit" value="Log In"></td></tr></form>
<tr><td colspan="2"><div id="message" /></td></tr>
</table>

score 1 · Accepted Answer · edited May 23 '17 at 10:28

document.getElementById('login_btn').addEventListener('click', login(event));

You are calling login immediately and trying to use its return value (undefined since it has no return statement) as the event handler.

Remove (event) from there.

… at least that is what would happen if you weren't trying to call null.addEventListener. See this question and learn how to use the developer tools for your browser so you can see error messages from JavaScript.

JavaScript AJAX preventDefault

1 Answers1