/    Sign up×
Community /Pin to ProfileBookmark

Ajax Populate Input Box

I have a drop down box that a user selects their name and then I would like the rest of their details to be auto completed in the form.

I can talk to the ajax script and get the results from my database but I can’t fingure out how to auto complete the other input boxs in my form.

Any help would be great.

[CODE]
HTML

<select name=”autofill” id”txt1″ type”text” value=”<%=txtsearch%>” onChange=”showHint(this.value)”>

<%
strSQL = “SELECT * FROM tbl_phonelist ORDER By forename”
Set Rs = Server.CreateObject(“ADODB.Recordset”)
Rs.Open strSQL, Conn2, 1,3

do while not Rs.EOF
%>

<option value=”<%=Rs(“ID”)%>”><%=Rs(“forename”)%>&nbsp;<%=Rs(“Surname”)%></option>

<%
Rs.MoveNext
loop
%>

</select>
<p></p>

<input name=”firstname” type=”text” id=”firstname”>

<p></p>

<input name=”surname” type=”text” id=”surname”>

[/CODE]

[CODE]
Ajax

var xmlHttp

function showHint(str)
{

if (str.length==0)
{
document.getElementById(“txtHint”).innerHTML=””;
return;
}

xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert (“Your browser does not support AJAX!”);
return;
}

var url=”ajax/hint.asp”;
url=url+”?q=”+str;
url=url+”&sid=”+Math.random();
//alert (str)
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById(“txtHint”).innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}

[/CODE]

[CODE]
Hint.asp

<%@LANGUAGE=”VBSCRIPT” CODEPAGE=”1252″%>
<!– #INCLUDE file=”../includes/conn.asp” –>

<%
Dim txtSearch

txtSearch = request.QueryString(“q”)

strSQL = “SELECT * FROM tbl_phonelist WHERE ID =” & txtSearch
Set Rs = Server.CreateObject(“ADODB.Recordset”)
Rs.Open strSQL, Conn2, 1,3

do while not Rs.EOF
%>

<%response.Write(Rs(“surname”))%>

<%
Rs.MoveNext
loop
%>

[/CODE]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@aaronbassettMay 10.2007 — I might be missing something but I dont see an element in the top code example with an id of "txtHint" and if it doesn;t exist then you cannot use innerHTML to place any content inside it.
Copy linkTweet thisAlerts:
@jemesauthorMay 10.2007 — Sorry Missed that bit of code out.

[CODE]
<div id="hint"><p></p><span id="txtHint"></span></div>
[/CODE]


I've been using the above to test everthing was working which it is.

But I can't work out how to populate the firstname and surname input boxes.

Thanks for the help.

Jemes
Copy linkTweet thisAlerts:
@jemesauthorMay 10.2007 — Changed the code below but that throws up an error.

[CODE]
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("firstname").innerHTML=xmlHttp.responseText;
}
}

[/CODE]
Copy linkTweet thisAlerts:
@aaronbassettMay 10.2007 — have it return the firstname and surname as a pipe separated string like "John|Doe" then do

var parts = xmlHttp.responseText.split("|");
document.getElementById('firstname').value = parts[0];
document.getElementById('surname').value = parts[1];
×

Success!

Help @jemes spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...