...

View Full Version : filling textboxes from what was clicked in a dropdown



tcadieux
03-31-2003, 06:49 PM
Can someone help me figure this out, I do not to Javascript, but some kind
soul gave me this primer on how to populate Textboxes depending on what
someone picks from a dropdown. It works but the example only had 1 textbox
being populated, i would like to do 2 more, but I do not know how. My code
is below..I want to be able to put the person's e-mail and phone number in
the two other textboxes, assume they are in position 3 and 4 in the array.
<!-- #include file="../includes/adovbs.inc" -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head> <script language="javascript">

<!--



function SetConvenor (o)

{

if (document.info.Convenor.selectedIndex > 0)

o.value =
document.info.Convenor.options[document.info.Convenor.selectedIndex].value;

}



//}

//-->

</script>





</head>

<body>

</body>

</html>

<%

strDBPath = Server.MapPath("admin/registration.mdb")

Set cnnGetRows = Server.CreateObject("ADODB.Connection")

cnnGetRows.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & strDBPath
& ";"

strSQL = "SELECT convenor.ConvenorID, convenor.c_lname, convenor.c_fname,
convenor.c_hphone, " strSQL = strSQL & "convenor.c_wphone, prov.Province,
convenor.c_email, prov.ProvID " strSQL = strSQL & "FROM convenor INNER JOIN
prov ON convenor.ProvID = prov.ProvID " strSQL = strSQL & "WHERE
prov.ProvID=" & request.QueryString("provID") & ";"

Set rs = cnnGetRows.Execute(strSQL)

if not rs.eof then

convernors = rs.GetRows()

end if

rs.Close

Set rs = Nothing

cnnGetRows.Close

Set cnnGetRows = Nothing



%>

<FORM action="test.asp" method=post name="info">

<table>

<tr>

<td><font size="2" face="Arial">&nbsp;<b>Convenor:</b></font></td>

</tr>

<tr>

<td><font size="+0" face="Arial">

<input NAME="convenor_name" SIZE="2" MAXLENGTH ="2" readonly> <br> <input
NAME="convenor_e-mail" SIZE="2" MAXLENGTH ="2" readonly> <br> <input
NAME="convenor_phone" SIZE="2" MAXLENGTH ="2" readonly> <br>

<select onfocusout="return

Convenor_onfocusout()" name="Convenor" size="1" tabindex ="7"
onchange="SetConvenor (document.info.convenor_name);">

<option value=" " selected>Convenor Name...</option>

<% if isarray(convernors) then

for ct=0 to ubound(convernors,2) %>

<option value="<%=convernors(0,ct)%>"

<%if trim(convernors(0,ct))=trim(Session("Convenor")) then
Response.Write "selected"%>><%= convernors(2,ct) & " " & convernors(1,ct)
%></option>

<% Next

end if

%>

</select></font></td>

</tr>

</table>

HairyTeeth
04-01-2003, 09:46 AM
This should work but i haven't tested it. First, here's the web page (and form) after ASP processing:


<html>
<head>
<title>Populate Textboxes</title>
<script language="jav&#97;script" type="text/javascript">
<!--

function populate(form){
var f=form.aList;
var selectedOption = f.options[f.selectedIndex].value;
var strElm = selectedOption.split(",");
form.c_name.value=strElm [0];
form.c_phone.value=strElm [1];
form.c_email.value=strElm [2];
}
//-->
</script>
</head>
<body>
<form>
<select name="aList" onchange="populate(this.form)">
<option name="selOpt" value=", , " selected="selected">Convenor's Name...</option>
<option value="Harry Henderson,5655 5555,harry@henderson.com">Harry Henderson</option>
<option value="Homer Simpson,4444 4444,homer@simpson.com">Homer Simpson</option>
<option value="Hairy Teeth,6666 6666,Hairy@teeth.com">Hairy Teeth</option>
</select>
<br />
<input type="text" NAME="c_name" readonly="readonly" /> Convenor<br />
<input type="text" NAME="c_email" readonly="readonly" /> Email<br />
<input type="text" NAME="c_phone" readonly="readonly" /> Phone<br />
</form>
</body>
</html>


Put the jav&#97;script in the head of the ASP document , change the option list (as made bold below. Im not certain i've got the ASP array indices right) and substitute my recordset variables for your own.



<FORM action="test.asp" method=post name="info">

<table>

<tr>

<td><font size="2" face="Arial"> <b>Convenor:</b></font></td>

</tr>

<tr>

<td><font size="+0" face="Arial">

<input type="text" NAME="c_name" readonly> <br>
<input NAME="c_e-mail" readonly> <br>
<input NAME="c_phone" readonly> <br>

<select name="Convenor" size="1" tabindex ="7"
onchange="populate(this.form)">

<option value=", , " selected>Convenor Name...</option>

<% if isarray(convernors) then

for ct=0 to ubound(convernors,2) %>

<option value="<%=convernors(0,ct) & ", " & conv_email & ", " & conv_phone %>"
<%if trim(convernors(0,ct))=trim(Session("Convenor")) then
Response.Write "selected"%>><%= convernors(2,ct) & " " & convernors(1,ct)
%></option>

<% Next

end if

%>

</select></font></td>

</tr>

</table>


As i say, i haven't tested it with the ASP, but see how it goes anyway.

tcadieux
04-03-2003, 03:57 AM
Thanx man, i finally got it working, this is how!!

<!-- #include file="../includes/adovbs.inc" -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript" type="text/javascript">
<!--

function populate(form){
var f=form.aList;
var selectedOption = f.options[f.selectedIndex].value;
var strElm = selectedOption.split(",");
// form.c_name.value=strElm [0];
form.c_phone.value=strElm [1];
form.c_email.value=strElm [2];
}
//-->
</script>


</head>
<%

strDBPath = Server.MapPath("admin/registration.mdb")
Set cnnGetRows = Server.CreateObject("ADODB.Connection")
cnnGetRows.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & strDBPath & ";"

strSQL = "SELECT convenor.ConvenorID, convenor.c_lname, convenor.c_fname, convenor.c_hphone, "
strSQL = strSQL & "convenor.c_wphone, prov.Province, convenor.c_email, prov.ProvID "
strSQL = strSQL & "FROM convenor INNER JOIN prov ON convenor.ProvID = prov.ProvID "
strSQL = strSQL & "WHERE prov.ProvID=" & request.QueryString("provID") & ";"

Set rs = cnnGetRows.Execute(strSQL)
DIM arrUsers
IF NOT rs.EOF THEN
arrUsers = rs.GetRows()
DIM intGR_email, intGR_phone
intGR_email = 6
intGR_phone = 3
END IF
rs.Close
'DIM intRow
'IF ISARRAY(arrUsers) THEN
' FOR intRow = LBOUND(arrUsers, 2) TO UBOUND(arrUsers, 2)
' Response.Write arrUsers(intGR_email, intRow) & " " & arrUsers(intGR_phone, intRow) & "<br />"
' NEXT
'END IF

%>
<body>

<FORM action="test.asp" method=post name="info">

<table>

<tr>

<td><p>
<select name="aList" onchange="populate(this.form)">
<option name="selOpt" value=", , " selected="selected">Convenor's Name...</option>
<% if isarray(arrUsers) then

for intRow=LBOUND(arrUsers, 2) TO UBOUND(arrUsers, 2) %>
<option value="<%=arrUsers(0,intRow) & "," & arrUsers(intGR_phone, intRow) & "," & arrUsers(intGR_email, intRow) %>"
<%if trim(arrUsers(0,intRow))=trim(Session("Convenor")) then Response.Write "selected"%>><%= arrUsers(2,intRow) & " " & arrUsers(1,intRow)
%></option>
<% Next

end if

%>
</select>
</p>
<p><font size="2" face="Arial"><b>Convenor:</b></font></p></td>

</tr>

<tr>
<td>E-mail Address
<input NAME="c_email" type="text" size="40" readonly="readonly" /> <br />
Phone Number
<input NAME="c_phone" type="text" size="40" readonly="readonly" /> <br /> </td>
</tr>
</body>
</html>

tcadieux
04-10-2003, 02:15 PM
I'm curious, how would i change the JavaScript to loop, assuming i wanted to populate a DropDown with multiple values instead of a textbox?

<script language="javascript" type="text/javascript">
<!--

function populate(form){
var f=form.aList;
var selectedOption = f.options[f.selectedIndex].value;
var strElm = selectedOption.split(",");
// form.c_name.value=strElm [0];
form.c_phone.value=strElm [1];
form.c_email.value=strElm [2];
}
//-->
</script>

HairyTeeth
04-10-2003, 08:37 PM
depends a bit on the datasource i guess, but here is one way using js arrays (no doubt there are tricker ways around):


<html>
<head>
<title>Demo</title>
<script type="text/jav&#97;script" language="jav&#97;script">
<!--;
//object constructor;
function cons(name,email){
this.name=name;
this.email=email;
}

//data source;
var strData = new Array();
strData[0] = new cons('Homer Simpson','homer@simpleton.com');
strData[1] = new cons('Crazy Bill','crazy@foo.net');
strData[2] = new cons('Pooh Bear','honey@pot.org');
//etc etc


//write form to document
function populate(){
var page='';
page+="<form action='' method='' name='frm'>";
page+="<select name='aList' onchange='getOption()'>";
page+="<option value='' name='defaulOpt' selected='selected'>Please select...</option>"

//loop through options
for(var i=0;i<strData.length;i++){ //length=3
page+="<option value='" + strData[i].name + ","+strData[i].email+"'>";
page+=strData[i].name;
page+="</option>";
}

page+="</select>"
page+="</form>"
document.write(page);

}

//demo function
function getOption(){
var f=frm.aList,msg='';
var selectedOption = f.options[f.selectedIndex].value;
var strElm = selectedOption.split(",");

if(selectedOption ==''){
return false;
}else{
msg+="Selected Name: " + strElm [0];
msg+="\nEmail Address: " + strElm [1];
alert(msg)
return true;
}
}
//-->
</script>
</head>
<body>

<div id="myDiv">
<script language="jav&#97;script" type="text/jav&#97;script">
<!--
//call function to write form to document;
populate();
//-->
</script>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum