Home/ Questions/Q 461593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T22:59:24+00:00

I want to use AJAX to process a simple login form. I thought it’d

  • 0

I want to use AJAX to process a simple login form. I thought it’d be pretty easy, but I just can’t get it all to work.

index.php

<html>
<head>
<title>AJAX Login</title>
<script type="text/javscript">
var XMLHttpRequestObject = false;

if(window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
        }

    function logIn() {
        if(XMLHttpRequestObject) {
            var obj = document.getElementById("show");
            XMLHttpRequestObject.open("GET", "login.php");

            XMLHttpRequestObject.onreadystatechange = function() {
                if(XMLHttpRequestObject.readyState == 4
                   && XMLHttpRequestObject.status == 200) {
                        obj.innerHtml = XMLHttpRequestObject.responseText;
                    }
                }

                XMLHttpRequestObject.send(null);
            }
        }

</script>
</head>
<body>
<form action="" method="post">
<table>
    <tr>
        <td>Username:</td>
        <td><input type="username" name="username" /></td>
    </tr>
    <tr>
        <td>Password:</td>
        <td><input type="password" name="password" \ /></td>
    </tr>
    <tr>
        <td colspan="2"><input type="submit" name="submit" value="login" onclick="logIn();" /></td>
    </tr>
</table>
</form>
<div id="show">should go here</div>
</body>
</html>

login.php

<?php
$username = "andrew";
$password = "andrew";

if($_POST['username'] != "") {
    if($_POST['password'] != "") {
        if(($_POST['username'] == $username) && ($_POST['password'] == $password)) {
            echo "Login Success!";
            }
            else {
                echo "Login Failure!";
                }
            }
            else {
                echo "You didn't enter a password";
                }
            }
            else {
                echo "You didn't enter a username";
                }
?>

When I click the “Login” button, nothing happens. 🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you click login on that form it submits back to the source URL. To prevent this you should really change your event handler to either this:

    function logIn() {
  ...
  return false;
}

    Alternatively you can do it from the submit handler on the form instead of the click handler on the submit button.

    Secondly, to do AJAX cross-browser you need about 6 fallback conditions, not just XmlHttpRequest. See Getting Started with AJAX and the XMLHttpRequest Object.

    In all honesty, for AJAX there’s no way I’d consider doing it without a helper library. My preferred choice is jQuery, in which case the code ends up looking like this:

    <form id="loginform" method="post">
<table>
  <tr>
    <td>Username:</td>
    <td><input type="username" id="username" name="username" /></td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" id="password" name="password" \ /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" id="login" value="Login"/></td>
  </tr>
</table>
</form>

    with:

    <script type="text/javascript">
$(function() {
  $("#login").click(function() {
    $("#show").load("login.php", {
      username: $("#username").val(),
      password: $("#password").val()
    }, function() {
      $("#loginform").hide(); // for example
    });
  });
});
</script>
    • 0