AJAX - Populate a form dynamically

ASP Free Forums Sponsor:

March 22nd, 2006, 09:03 AM

degsy

Contributing User

ASP Free God 2nd Plane (6000 - 6499 posts)

Join Date: Aug 2005

Location: North East, UK

Posts: 6,191

Time spent in forums: 3 Weeks 4 Days 19 h 41 m 52 sec
Reputation Power: 122

AJAX - Populate a form dynamically

Ajax Populate Form

This is an example of how to type some info into a textfield and populate the rest of the form.

Querying the database via QueryString
The ASP/SQL is a simple QueryString

e.g.

Code:

ajax_populate_form_getDetails.asp?user_name=john

Code:

SELECT user_email, user_id FROM ajax_user WHERE user_name = 'john'

You could also change this to a LIKE statement

Code:

"SELECT user_email, user_id FROM ajax_user WHERE user_name LIKE '" & variable & "%'"

The "getDetails" part of the string grabs the variable from the QueryString

asp Code:

Original - asp Code
If (Request.QueryString("user_name") <> "") Then getDetails__MMColParam = Request.QueryString("user_name") End If

 
If (Request.QueryString("user_name") <> "") Then 
  getDetails__MMColParam = Request.QueryString("user_name")
End If

It then queries the database

asp Code:

Original - asp Code
getDetails.Source = "SELECT user_email, user_id FROM ajax_user WHERE user_name = '" + Replace(getDetails__MMColParam, "'", "''") + "'"

 
getDetails.Source = "SELECT user_email, user_id FROM ajax_user WHERE user_name = '" + Replace(getDetails__MMColParam, "'", "''") + "'"

If a valid record is found it writes them to variables

asp Code:

Original - asp Code
If Not getDetails.EOF Or Not getDetails.BOF Then user_email = getDetails("user_email") user_id = getDetails("user_id") End If

 
If Not getDetails.EOF Or Not getDetails.BOF Then
    user_email = getDetails("user_email")
    user_id = getDetails("user_id")
End If

The content to be included is then output

asp Code:

Original - asp Code
Email: <input name="email" type="text" id="email" value="<%=user_email%>"> <br> Id: <input name="textfield" type="text" size="3" value="<%=user_id%>">

 
Email:
<input name="email" type="text" id="email" value="<%=user_email%>">
    <br>
    Id:
    <input name="textfield" type="text" size="3" value="<%=user_id%>">

Ajax/Javascript to query the database
The difference here is that were do not need to submit the page. We can use Ajax/Javascript to make the request dynamically onkeyup (you could use onkeypress or onblur etc).

The Ajax script used can be found here
Dynamic Ajax Content

How to pass the querystring
The important code is to pass the value of the textfield to the ajax script

Code:

<input name="name" type="text" id="name" onKeyUp="ajaxpage('ajax_populate_form_getDetails.asp?user_n  ame=' + this.value,'details')">

The other important part is how and where to show the results.
With the Ajax script above it is basically including the page into the element that we choose.

Code:

function ajaxpage(url, containerid)

So we are calling ajax_populate_form_getDetails.asp plus a querystring and are going to make it appear in the element ID "details"

Code:

<span id="details">
   Email:
    <input name="email" type="text" id="email">
    <br>
    Id:
    <input name="textfield" type="text" size="3">
	</span>

The content of this ID is dummy content. It is just there for show.
When we call the Ajax script we will grab our new content

Code:

function loadpage(page_request, containerid)

This function takes the content of the Ajax response and inserts it into the dumy ID "details"

Code:

document.getElementById(containerid).innerHTML=pag  e_request.responseText

Here are the scripts in full (There is a bit of Dreamweaver coding). Change to your own coding style. The logic is the important thing.

ajax_populate_form.asp

asp Code:

Original - asp Code

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
db = Server.MapPath(".\ajax_populate_form.mdb")
Conn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & db

Dim valid_names
Dim valid_names_numRows

Set valid_names = Server.CreateObject("ADODB.Recordset")
valid_names.ActiveConnection = Conn
valid_names.Source = "SELECT user_name FROM ajax_user"
valid_names.CursorType = 0
valid_names.CursorLocation = 2
valid_names.LockType = 1
valid_names.Open()

While NOT valid_names.EOF
	names = names & valid_names("user_name") & ", " 'Create a comma delimited string of availabel user names
  valid_names.MoveNext()
Wend

valid_names.Close()
Set valid_names = Nothing
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Populate Form 2</title>
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
	if (window.XMLHttpRequest){ // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	}
	else if (window.ActiveXObject){ // if IE
		try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
			try{
				page_request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e){
			}
		}
	}
	else{
		return false
	}
	
page_request.onreadystatechange=function(){
	loadpage(page_request, containerid)
}
	
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
		document.getElementById(containerid).innerHTML=pag  e_request.responseText
	}
</script>
</head>

<body>
<form name="form1" method="post" action="">
  <p>Name: 
    <input name="name" type="text" id="name" onKeyUp="ajaxpage('ajax_populate_form_getDetails.asp?user_n  ame=' + this.value,'details')">
<%
' Write out available user names to use as examples
names = Trim(names)
names = Left(names,Len(names)-1) 'Remove the end comma from the string
Response.Write names
%>
    <br>
  *type a name from the list</p>
  <p>
  
  <span id="details">
   Email:
    <input name="email" type="text" id="email">
    <br>
    Id:
    <input name="textfield" type="text" size="3">
	</span>
  </p>
</form>
</body>
</html>

 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
db = Server.MapPath(".\ajax_populate_form.mdb")
Conn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & db
 
Dim valid_names
Dim valid_names_numRows
 
Set valid_names = Server.CreateObject("ADODB.Recordset")
valid_names.ActiveConnection = Conn
valid_names.Source = "SELECT user_name FROM ajax_user"
valid_names.CursorType = 0
valid_names.CursorLocation = 2
valid_names.LockType = 1
valid_names.Open()
 
While NOT valid_names.EOF
    names = names & valid_names("user_name") & ", " 'Create a comma delimited string of availabel user names
  valid_names.MoveNext()
Wend
 
valid_names.Close()
Set valid_names = Nothing
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Populate Form 2</title>
<script type="text/javascript">
 
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
 
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
 
function ajaxpage(url, containerid){
var page_request = false
    if (window.XMLHttpRequest){ // if Mozilla, Safari etc
        page_request = new XMLHttpRequest()
    }
    else if (window.ActiveXObject){ // if IE
        try {
            page_request = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e){
            try{
                page_request = new ActiveXObject("Microsoft.XMLHTTP")
            }
            catch (e){
            }
        }
    }
    else{
        return false
    }
    
page_request.onreadystatechange=function(){
    loadpage(page_request, containerid)
}
    
page_request.open('GET', url, true)
page_request.send(null)
}
 
 
function loadpage(page_request, containerid){
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
        document.getElementById(containerid).innerHTML=pag  e_request.responseText
    }
</script>
</head>
 
<body>
<form name="form1" method="post" action="">
  <p>Name: 
    <input name="name" type="text" id="name" onKeyUp="ajaxpage('ajax_populate_form_getDetails.asp?user_n  ame=' + this.value,'details')">
<%
' Write out available user names to use as examples
names = Trim(names)
names = Left(names,Len(names)-1) 'Remove the end comma from the string
Response.Write names
%>
    <br>
  *type a name from the list</p>
  <p>
  
  <span id="details">
   Email:
    <input name="email" type="text" id="email">
    <br>
    Id:
    <input name="textfield" type="text" size="3">
    </span>
  </p>
</form>
</body>
</html>

ajax_populate_form_getDetails.asp

asp Code:

Original - asp Code

 
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
db = Server.MapPath(".\ajax_populate_form.mdb")
Conn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & db
 
Dim getDetails__MMColParam
getDetails__MMColParam = "1"
If (Request.QueryString("user_name") <> "") Then 
  getDetails__MMColParam = Request.QueryString("user_name")
End If
 
Dim getDetails
Dim getDetails_numRows
 
Set getDetails = Server.CreateObject("ADODB.Recordset")
getDetails.ActiveConnection = Conn
getDetails.Source = "SELECT user_email, user_id FROM ajax_user WHERE user_name = '" + Replace(getDetails__MMColParam, "'", "''") + "'"
getDetails.CursorType = 0
getDetails.CursorLocation = 2
getDetails.LockType = 1
getDetails.Open()
 
If Not getDetails.EOF Or Not getDetails.BOF Then
    user_email = getDetails("user_email")
    user_id = getDetails("user_id")
End If
 
getDetails.Close()
Set getDetails = Nothing
%>
Email:
<input name="email" type="text" id="email" value="<%=user_email%>">
    <br>
    Id:
    <input name="textfield" type="text" size="3" value="<%=user_id%>">

See attachment for Scripts and Database

Attached Files

ajax_populate_form.zip (8.5 KB, 1055 views)

February 28th, 2007, 10:10 AM

degsy

Contributing User

Join Date: Aug 2005

Location: North East, UK

Posts: 6,191

Time spent in forums: 3 Weeks 4 Days 19 h 41 m 52 sec
Reputation Power: 122

Just a little code snippet to call the script from a dropdown

asp Code:

Original - asp Code
<p>or choose a name<br> <select name="selName" id="selName" onchange="ajaxpage('ajax_populate_form_getDetails.asp?user_n ame=' + this.value,'details')"> <option>Select a name</option> <% For Each n In Split(names,",") %> <option value="<%=Trim(n)%>"><%=n%></option> <% Next %> </select> </p>

 <p>or choose a name<br>
    <select name="selName" id="selName" onchange="ajaxpage('ajax_populate_form_getDetails.asp?user_n  ame=' + this.value,'details')">
    <option>Select a name</option>
    <% For Each n In Split(names,",") %>
    <option value="<%=Trim(n)%>"><%=n%></option>
    <% Next %>
    </select> 
  </p>

Example

Code:

<select name="selName" id="selName" onchange="ajaxpage('ajax_populate_form_getDetails.asp?user_n  ame=' + this.value,'details')">
	<option>Select a name</option>
	
	<option value="John">John</option>
	
	<option value="Paul"> Paul</option>
	
	<option value="George"> George</option>
	
	<option value="Ringo"> Ringo</option>
	
    </select>

[code]

Comments on this post

D.O.M.I.N.A.T.O.R agrees: I'm .net follower, but good work!

deniz_seasdie agrees: Good work. Thanx

__________________
CyberTechHelp

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: