registration form

[chriscloyd]

okay i have looked on some websites as the person is filling out the registration form it checks it automaticaly as they r finished. like they fill out the username textbox and as soon as they move on it checks the password and shows if its avaible or not right next to the text box can anyone tell me how to do that?

[tomfmason]

That would be javascript. I have not dealt with it for this use. I will do some research and post anything that I find.

[chriscloyd]

thanks if u find out i will do anything for u lol my new company depeneds on this lol

[tomfmason]

I found a basic javascript form  [url=http://www.elated.com/tutorials/programming/javascript/form_validation/]validation tutorial.[/url]

[chriscloyd]

<script language="javascript"  type="text/javascript">

var url = "register.php?param="; // The server-side script

function updateName() {
  // display a quick message while the script is being processed
  document.getElementById('un').innerHTML = "...checking database...";
  var name = document.getElementById("username").value;
  http.open("GET", url + escape(name), true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
}

function handleHttpResponse() {
  if (http.readyState == 4) {
    results = http.responseText;
    var name = document.getElementById("username").value;
    if(results == "") results = "Username <i>"+name+"</i> Is Available...";
    // the div in which the message appears
    document.getElementById('un').innerHTML = results;
  }
}

function getHTTPObject() {
  var xmlhttp;
  /*@cc_on
  @if (@_jscript_version >= 5)
    try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
        xmlhttp = false;
      }
    }
  @else
  xmlhttp = false;
  @end @*/
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    try {
      xmlhttp = new XMLHttpRequest();
    } catch (e) {
      xmlhttp = false;
    }
  }
  return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
</script>
</head>


The form is as follows.

<form method="post" action="signup.php" name="theForm" id="theForm">
Desired Username:<br/>
<input type="text" name="username" onblur="updateName();" id="username"/>
<div style="background: #eee;" name="un" id="un"></div>
<input type="submit" name="submit"/>
</form>

The text input field calls javascript function 'updateName()' when the user removes focus on the input field.

The script returns the resulting message into the div with id 'un'

<?php
include('DB_Connect.php');
$connect = new DB_Connect2();
$u = addslashes($param);

// change to reflect your database info
$sql = "select userName from user where userName = \"$u\"";
$r = $connect->query_db($sql);
while ($row = mysql_fetch_array ($r)) {
    $un = $row['userName'];
}
if($u == $un) echo "<font color=\"red\">Username $u already in use</font>";
?>

[tomfmason]

did you test it?

[chriscloyd]

ya i cant get it to work but heres the link to it

http://www.shawngo.com/xajaxformutil.php

[shawngo]

Hi,

I'm the owner of shawngo.com

The script you're talking about here is fairly ugly. I've really been meaning to clean up my code and stuff.

If you'd like, I can post a really simple version of this.

Using prototype.js and behaviour.js makes javascript life SUPER easy!! :D

I highly recommend both of these scripts, as well as several other javascript toolkits (scriptaculous, moo.fx, dojo, etc)

My email is shawn at shawngo dot com ( or anything at shawngo dot com for that matter ;;)

Shawn