Article Contents Related Articles Tags
  • No tags found.
Was This Helpful? Last Updated
  • 2012/07/05

Creating an Ajax "No Reload" Login Form

An ajax login form allows you to process a login without having to reload the page.

Creation Guide

Create a file with the following content and save it to your web server. Note that the only required components are:

  • Form ID must be id="mgAjaxForm"
  • Form submit action must be onsubmit="return MGLogin();"
  • There needs to be an elements named "login_error" with style "display:none" by default.
  • You must include the path to jquery.js and mg_ajax_login.js somewhere on your page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>My Member Guardian Ajax Login Form</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="/members/functions/jquery.js"></script>
	<script src="/members/functions/mg_ajax_login.js"></script>
</head>
<body>

<div id="mg_full_form">

    <form action="/members/login.php" method="post" id="mgAjaxForm" onsubmit="return MGLogin();">

    <div id="login_error" style="display:none;border:1px solid red;padding:4px;color:red;"></div>

    <label>Username</label>
    <input type="text" name="username" id="mg_username" value="" />

    <label>Password</label>
    <input type="password" name="password" id="mg_password" />

    <input type="submit" value="Login" />

    </form>

</div>

</body>
</html>

Successful Login

Upon successfully logging in, the entire "mg_full_form" element will be replaced with a message that looks like this:

Welcome username! (Logout)

Important Considerations

  • If you installed the program into a folder other than the standard "/members/" folder, you will need to manually update the "js_path_put" variable on the "/functions/mg_ajax_login.js" file.
  • Login announcements, password abuse checks, and other features that are part of the standard login model are not available with the Ajax model.