In this article I will explain with an example, how to check Username availability i.e. check whether Username exists in database or not using
JavaScript XmlHttp and
AJAX and in ASP.Net with C# and VB.Net.
Database
I have made use of the following table Users with the schema as follows.
![Check whether User Name already exists using JavaScript and XmlHttp]()
I have already inserted few records in the table.
![Check whether User Name already exists using JavaScript and XmlHttp]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The following HTML Markup consists of:
TextBox – For entering UserName.
The HTML TextBox has been assigned an
OnKeyUp event handler which calls the
ClearMessage JavaScript function.
Button – For checking whether UserName already exists or not.
The HTML Button has been assigned with a
JavaScript onclick event handler which calls the
CheckAvailability JavaScript function.
SPAN – For displaying UserName availability message.
Username:
<input id="txtUsername" type="text" onkeyup="ClearMessage()" />
<input id="btnCheck" type="button" value="Show Availability" onclick="CheckAvailability()" />
<br />
<span id="message"></span>
Stored Procedure
The following Stored Procedure will be used to check whether the supplied Username exists in the database or not.
It will return TRUE, if the Username does not exists in database i.e. it is available and it will return FALSE, if the Username exists in the database i.e. it is already in use.
CREATE PROCEDURE [dbo].[CheckUserAvailability]
@UserName VARCHAR(50)
AS
BEGIN
SET NOCOUNT ON;
IF NOT EXISTS(SELECT UserName FROM Users
WHERE UserName = @UserName)
BEGIN
SELECT 'TRUE'
END
ELSE
BEGIN
SELECT 'FALSE'
END
END
GO
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
The Web Method
Inside the WebMethod, the CheckUserAvailability Stored Procedure is called and returns the value returned from the Stored Procedure back to the Client Side function.
C#
[WebMethod]
public static bool CheckUserName(string username)
{
bool status = false;
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection conn = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("CheckUserAvailability", conn))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@UserName", username);
conn.Open();
status = Convert.ToBoolean(cmd.ExecuteScalar());
conn.Close();
}
}
return status;
}
VB.Net
<WebMethod>
Public Shared Function CheckUserName(ByVal username As String) As Boolean
Dim status As Boolean = False
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using conn As SqlConnection = New SqlConnection(conString)
Using cmd As SqlCommand = New SqlCommand("CheckUserAvailability", conn)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@UserName", username)
conn.Open()
status = Convert.ToBoolean(cmd.ExecuteScalar())
conn.Close()
End Using
End Using
Return status
End Function
Client Side implementation
CheckAvailability JavaScript function
When the Button is clicked,
CheckAvailability JavaScript function is called.
Inside this function, an
AJAX call is made to the
CheckUserName Web Method using
JavaScript XmlHttp function which accepts the username as parameter.
Note: For more details on calling Web Method using XmlHttp, please refer
When the response is received, based on whether the Username is available or in use, appropriate message is displayed in the HTML SPAN element.
ClearMessage JavaScript function
The
ClearMessage JavaScript function gets called when user types in the TextBox, it simply clears the message displayed in the HTML SPAN element.
<script type="text/javascript">
function CheckAvailability() {
var username = document.getElementById("txtUsername").value;
var request;
if (window.XMLHttpRequest) {
//New browsers.
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
//Old IE Browsers.
request = new ActiveXObject("Microsoft.XMLHTTP");
}
if (request != null) {
var url = "Default.aspx/CheckUserName";
request.open("POST", url, false);
var sendStr = "{username: '" + username + "'}";
request.setRequestHeader("Content-Type", "application/json");
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
var messages = document.getElementById("message");
if (JSON.parse(request.responseText).d) {
//Username available.
message.style.color = "green";
message.innerHTML = "Username is available";
}
else {
//Username not available.
message.style.color = "red";
message.innerHTML = "Username is NOT available";
}
}
};
request.send(sendStr);
}
}
function ClearMessage() {
document.getElementById("message").innerHTML = "";
};
</script>
Screenshot
![Check whether User Name already exists using JavaScript and XmlHttp]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
