Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts

    filling textboxes from what was clicked in a dropdown

    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>

  • #2
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This should work but i haven't tested it. First, here's the web page (and form) after ASP processing:
    Code:
    <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.

    Code:
    <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.
    Last edited by HairyTeeth; 04-01-2003 at 10:04 AM.

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Regular Coder
    Join Date
    Mar 2003
    Posts
    176
    Thanks
    0
    Thanked 0 Times in 0 Posts
    depends a bit on the datasource i guess, but here is one way using js arrays (no doubt there are tricker ways around):
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •