Check user name/email with Spry AJAX
Easy check the username or email with AJAX calls
When user is registering a new account it is often important to check user name or email for uniqueness to make sure it hasn't been already registered.
In this short tutorial you will learn how to build this functionality in Dreamweaver using standard Recordset, Show Recordset is not Empty Server Behavior and Spry Server Action object from Spry Data Utilities Toolkit
Introduction
When user is registering a new account it
is often important to check user name or email for uniqueness to make sure it
hasn't been already registered.
In this short tutorial you will learn how to build this functionality in
Dreamweaver using standard Recordset, Show Recordset is not Empty Server
Behavior and Spry Server Action object from Spry Data Utilities Toolkit.
Setting up the interface
In our example we have a web form with "email"
text field.
Both name and id attributes of the text field are set
to "email".
Both name and id attributes of the registration form
are set to "register_form".
If user types an email address which already exists in the database we want to
notify the user and blank the field (which is required in order to create the
account).
1.Using Behaviors panel or Code View add the following code to the onBlur event of the "email" field:
if(this.value!=''){verifyEmail(this)}
The outcome should look similar to this:
<input name="email" type="text
onblur="if(this.value!=''){verifyEmail(this)}" />
Whenever user cursor leaves the field and it's
value isn't blank the action
verifyEmail will be triggered.
2.Insert small loading animation right next to the "email" text field.
Set both name and id attributes of the image to "email_check_loader".
Set its style display property to "none".
As a result your code should look something like this:
<img style="display:none" id="email_check_loader"
src="images/ajax-loader.gif" width="16" height="16" align="absmiddle" />
3.Create another form with the name attribute
set to "veryfy_email_form".
Make sure it has been placed outside your registration form.
Set the action parameter of the form to "check_email.php" (use another
extension if you are using ASP, ColdFusion, etc.)
4.Add a hidden field to it. Make sure both name and id attributes of the text field are set to "email".
5.Place the script with the verifyEmail function
inside your page <head> tag:
<script language="javascript">
function verifyEmail(what){
document.veryfy_email_form.email.value=what.value;
document.veryfy_email_form.submit();
}
</script>
This function will set the value of the "email" field inside the
verify_email form to the value typed by the user and will submit that form.
6.Add another JavaScript function that will
analyze server response, notify the user and blank email field in the "register_form":
function checkEmail(server_response){
if(server_response.xhRequest.responseText!=""){
alert(server_response.xhRequest.responseText);
document.register_form.email.value="";
}
}
Alex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.
When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.
See All Postings From Alex July >>
Reviews
Javascript error
Chris, please download the extension once again. The issue you are describing with Dreamweaver CS3 has been fixed in version 1.7.0 (update posted today).
With all issues and questions please contact the extension developer (Linecraft Studio) directly: http://www.linecraft.com/contact.php. You will receive guaranteed prompt reply.
email with Spry AJAX
How do I delete email in the value of input box when checking email exist?
You must me logged in to write a review.
