As I see.
Well thats quite easy, you'll need to use jQuery and fetch the data from the database once the ID field is completed.
So, your form will be a normal form.
First:
You'll want the jQuery plugin:
http://jquery.com/
Include that in your HTML head.
Then on the form:
In the ID input you want some javascript, that will call a function when the user looses focus.
This javascript will take the entered ID, query the database and return the forename and surname, populating the forename and surname fields.
So, some code, a kind of example...
The form itself, that ID input field will have something like this in it:
<input type="text" name="userid" value="" id="userid" onblur="fetch_account();" />
You'll want an id/name on the form (in this example we will call it "signupForm", you'll want to name it something more relevant to you.
Then you'll have a JS file which has a function in it called fetch_account()
This is untested, quick example I've just ripped apart and adapted (simplified) from a check username (form side) function I have in an application.
// This fetches a users account.
// You have two options, return the account as a delimited string (i.e. forename:surname) and split it out OR make two calls, one for forename, one for surname.
// I'm doing one call for forename.
// Also, the ajax.php script wants to simply accept the do (action) and userid (in practice you'd use POST and probably some kind of security on it)
// Then that method in the php script will query the DB and echo out the result, returning 0 for no account found.
function fetch_account()
{
// Get the ID the user entered in the form
var userid = document.signupForm.userid.value.toLowerCase();
// Trim any white space from the beginning and end
userid = jQuery.trim(userid);
// Get the users details from the DB (you'll want to do this by POST in a live environment)
var url = "http://example.com/api/ajax.php?do=fetch_forename&userid=" + userid;
// For non IE Browsers (process the request)
if (window.XMLHttpRequest)
{
req = new XMLHttpRequest();
// The function to call on state change
req.onreadystatechange = processForename;
// Perform the request on the script (url)
try
{
req.open("GET", url, true);
}
catch (e)
{
// Show the error (as an alert popup, you'll want to probably update the form with a message in red)
alert(e);
}
req.send(null);
}
// For IE
else if (window.ActiveXObject)
{
req = new ActiveXObject("Microsoft.XMLHTTP");
// Perform the request
if (req)
{
req.onreadystatechange = processForename;
req.open("GET", url, true);
req.send();
}
}
}
// This function processes the response from that call we made in the previous function (for forename, you'll want a seperate one for surname)
function processForename()
{
if(req.readyState == 4)
{
// Complete
if(req.status == 200)
{
// OK response (we have the response)
// If the response responseText is 0, means the ID didnt exist
if(req.responseText == "0")
{
// We do something to tell the user that this userid doesnt exist, such as set a DIV with the id "feedback-userid" to an error
document.getElementById("feedback-userid").innerHTML="<p style=\"width: 400px;\" id=\"feedback\">This userid does not exist.</p>";
}
else
{
// All is well, set the form var (the response from that script will either be the forename or 0, we caught a 0 above, so this is the forename.
// Assume the forms forename field is called "forename" (as in id="forename")
document.signupForm.elements["forename"].value = req.responseText;
}
}
else
{
// Something went wrong, i.e. the API failed
document.getElementById("feedback-userid").innerHTML="<p style=\"width: 400px;\" id=\"feedback\">" + req.statusText + "</p>";
}
}
}
As I've ripped a load of code out, I'm not sure whether this will just work, but it reveals the kind of process. This particular code originally checked an entered username and recoloured the username label in a signup form as green or red (and changed and image to either a tick or red cross).
The method however is the same, call a JS function, call a PHP script, passing the userid to it and handling the scripts response.
There are other ways, this will work fine though. You'll want to add some security and tidy it up as the above is a bit of a hack job. lol
This post has been edited by FizixRichard: 26 January 2012 - 05:01 PM
Help
