I want to dynamically select second list value based on first list value.

**acoder** · Jun 10 '08, 09:56 AM

Note first of all that JavaScript cannot connect to the database directly.

You have two ways (at least) in which you can do this:
1. set all the IP address values in an array using ASP during page load. In the select onchange, you can check which value matches and display the corresponding IP.
2. Use Ajax to connect to the database using an ASP script which returns the IP address to display in the text box.

**vikas251074** · Jun 10 '08, 10:05 AM

I will prefer to use 2nd method.
Please give me the code for connection to the oracle database. I know very little about AJAX. I shall oblige you sir

Thanks and regards,
Vikas

**acoder** · Jun 10 '08, 10:12 AM

Here's a quick example to get you started. Also check out some of the links in the Offsite Links sticky thread at the top of this forum for some useful beginner tutorials.

**vikas251074** · Jun 11 '08, 04:23 AM

To study ajax, I try following code -

This file name is 'ajax.asp'. It has 3 fix list value. When I select a value, it displays details of value. It used a script named 'selectcustomer .js' of which coding is given below this programme.

Code:

<html>
<head>
<script src="selectcustomer.js"></script>
</head><body><form> 
Select a Customer:
<select name="customers" onchange="showcustomer(this.value)">
<option value="66788">Sanjay Pandey
<option value="71955">Asis Das
<option value="77581">T.A. Sazid 
</select>
</form><p>
<div id="txtHint"><b>Customer info will be listed here.</b></div>
</p></body>
</html>

This file name is 'selectcustomer .js'

Code:

<%
var xmlHttp

function showcustomer(str){ 
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null)  {
    alert ("Your browser does not support AJAX!");
    return;
  } 
  var url="getcustomer.asp";
  url=url+"?q="+str;
  url=url+"&sid="+Math.random();
  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 { xmlHttp=new XMLHttpRequest();  }   // Firefox, Opera 8.0+, Safari
  catch (e){ try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}   // Internet Explorer
  catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlHttp;
}
%>

This file name is 'getcustomer.as p'

Code:

<html>
<head>
</head>
<%
response.expires=-1
sql="SELECT * FROM hba_empmast where empno="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User ID=ipis; Data Source=isap2000; Persist Security Info=True"
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql, conn

response.write("<table>")
do until rs.EOF
  for each x in rs.Fields
    response.write("<tr><td><b>" & x.name & "</b></td>")
    response.write("<td>" & x.value & "</td></tr>")
  next
  rs.MoveNext
loop

response.write("</table>")
%>
<body>
</body>
</html>

Here problem is that when I select a value from list. details of that value is not displayed. The error message is 'object required' in line no. 6 of 'ajax.asp'.

Thanks and regards,
Vikas

**vikas251074** · Jun 11 '08, 04:49 AM

When the content of selectcustomer. js is copied to ajax.asp within <script type="text/javascript"> tag then it display the details on selecting a value. But why not programme run earlier. Can u explain. me?

Thanks and regards,
Vikas

**acoder** · Jun 11 '08, 07:56 AM

I would guess the problem would be the ASP tags <% and %> which are not recognised by JavaScript. Remove them and the linked file should also work.

**vikas251074** · Jun 12 '08, 08:40 AM

Yes sir, I did exactly like that, I removed the ASP tag <% %>. but the same. Anyway it works when content of selectcustomer. js is copies to ajax.asp. But my main problem is to display second list value as soon as the first list value is selected. How can I do this?

Thanks and regards,
Vikas

**acoder** · Jun 12 '08, 08:48 AM

Select what in the second list? Can you explain clearly with an example?

**vikas251074** · Jun 12 '08, 08:52 AM

Yes sir,
Suppose two list
1) Country
2) State
If country is 'India', then state field should have list of all indian state.
And so on ....

Thanks and regards,
Vikas

**acoder** · Jun 12 '08, 09:19 AM

First of all, decide what format you want to return the output in using ASP. You could return HTML ready for use, or JSON/XML to be parsed. When the response is complete, either set the HTML directly or, if you've returned JSON or XML, parse the response. If you have problems implementing this, post here with your attempt.

**vikas251074** · Jun 13 '08, 04:26 AM

I am giving you my complete source code for your kind consideration.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--#include file="style.css"-->
<!--#include file="first.asp"-->
<script type="text/javascript">
var xmlHttp

function vitem(str){ 
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null)  {
    alert ("Your browser does not support AJAX!");
    return;
  } 
  var url="getip.asp";
  url=url+"?q="+str;
  url=url+"&sid="+Math.random();
  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 { xmlHttp=new XMLHttpRequest();  }   // Firefox, Opera 8.0+, Safari
  catch (e){ try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}   // Internet Explorer
  catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
}
return xmlHttp;
}

function menu(){
  window.location = "menu.asp";
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>IP Allocation</title>
</head>
<%
dim conn
dim rs
set conn = server.createobject("ADODB.Connection")
conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User Id=ipis; Data Source=isap2000;Persist Security Info=True"
set rs = server.createobject("ADODB.Recordset")
%>
<body>
<form name="myform" method="post" action="save_allotment.asp">
<div id="txtHint" style="position:absolute; top:150px; left:300px ">
  <table border="1">
    <tr>
      <th><h2>IP Allotment</h2></th>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td align="right">VLAN Name : </td>
            <td>
              <select name="vlan_name" style="width:150px " onchange="this.form.submit();">
<%              set rs = conn.execute("select vlan_name from vlan_master order by vlan_name")
                v_lan = rs("vlan_name")
	do while not rs.eof %>
                   <option value="<%=rs("vlan_name")%>"><%=rs("vlan_name")%></option>
                  rs.movenext
                loop%>
              </select>
            </td>
          </tr>
          <tr>
            <td align="right">Item : </td>
            <td>
              <select name="item" style="width:150px " onchange="vitem(this.value);">
<%              dim v_item
                set rs = conn.execute("select item, item_desc from network_item order by item_desc")
                do while not rs.eof
                  if rs("item") = "PC" then%>
                    <option value="<%=rs("item")%>" selected><%=rs("item_desc")%></option>
<%                  v_item=rs("item")
                   else%>
                    <option value="<%=rs("item")%>"><%=rs("item_desc")%></option>
<%                  end if
                  rs.movenext
                loop%>
              </select>
            </td>
          </tr>
          <tr>
<%          set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"' and seq_no = (select min(seq_no) from vlan_detail where allotted_to is null and item ='"&v_item&"' and vlan_name='"&v_lan&"')")
            dim v_ip_address
			v_ip_address = rs("ip_address") %>
            <td align="right">IP Address : </td>
            <td align="left">
              <select name="ip_address" style="width:150px ">
<%              set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"'")
                do while not rs.eof
			      if rs("ip_address") = v_ip_address then%>
                    <option value="<%=rs("ip_address")%>" selected><%=rs("ip_address")%></option>
<%	              else %>
                    <option value="<%=rs("ip_address")%>"><%=rs("ip_address")%></option>
<%                end if 
                  rs.movenext
                loop  %>
              </select>
	</td>
          </tr>
          <tr>
            <td align="right">Description : </td>
            <td align="left"><input type="text" name="emp_name" style="width:300px "/></td>
          </tr>
          <tr>
		    <td align="right">MAC Address : </td>
			<td align="left"><input type="text" name="mac_addr" style="width:250px "/></td>
		  </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center">
        <table>
          <tr>
            <td><input type="button" value="Back" name="back" style="width:100px " onClick="menu();"/></td>
	        <td><input type="reset" value="Reset" name="reset" style="width:100px "/></td>
		    <td><input type="submit" value="Submit" name="submit" style="width:100px "/></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
</form>
</body>
</html>

There is three list in this programme.
1) List of all Virtual Local Area Network VLAN (Maximum 255 connection in single network).
2) List of all items in single VLAN (like routers, computers, printers, switches, server, camera).
3) List of all IP in single item. there is total 255 IP in single VLAN and quota is fixed for each item.

Process should be -
If I select VLAN, then list of items available in that VLAN should display, And if I select items then list of IP should display with blank IP address as selected by default. AJAX method is used to display the list of IP with blank IP as selected. Then I write the name of employee or location to which this IP is allotted.
I am giving you the code of 'getip.asp' which is called in line no. 14.

Code:

<!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>Untitled Document</title>
</head>
<%
response.expires=-1
sql="select ip_address from vlan_detail where item ="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User ID=ipis; Data Source=isap2000; Persist Security Info=True"
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql, conn
%>
  <table border="1">
    <tr>
      <th><h2>IP Allotment</h2></th>
    </tr>
    <tr>
      <td>
        <table>
          <tr>
            <td align="right">VLAN Name : </td>
            <td>
              <select name="vlan_name" style="width:150px " onchange="this.form.submit();">
<%              set rs = conn.execute("select vlan_name from vlan_master order by vlan_name")
                v_lan = rs("vlan_name")
				do while not rs.eof 
                    <option value="<%=rs("vlan_name")%>"><%=rs("vlan_name")%></option>
<%                  end if
                  rs.movenext
                loop %>
              </select>
            </td>
          </tr>
          <tr>
            <td align="right">Item : </td>
            <td>
              <select name="item" style="width:150px " onchange="vitem(this.value);">
<%              dim v_item
                set rs = conn.execute("select item, item_desc from network_item order by item_desc")
                do while not rs.eof
                  if rs("item") = request.QueryString("q") then%>
                    <option value="<%=rs("item")%>" selected><%=rs("item_desc")%></option>
<%                  v_item=rs("item")
                   else%>
                    <option value="<%=rs("item")%>"><%=rs("item_desc")%></option>
<%                  end if
                  rs.movenext
                loop%>
              </select>
            </td>
          </tr>
          <tr>
<%          set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"' and seq_no = (select min(seq_no) from vlan_detail where allotted_to is null and item ='"&v_item&"' and vlan_name='"&v_lan&"')")
            dim v_ip_address
			v_ip_address = rs("ip_address") %>
            <td align="right">IP Address : </td>
            <td align="left">
              <select name="ip_address" style="width:150px ">
<%              set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"'")
                do while not rs.eof
			      if rs("ip_address") = v_ip_address then%>
                    <option value="<%=rs("ip_address")%>" selected><%=rs("ip_address")%></option>
<%	              else %>
                    <option value="<%=rs("ip_address")%>"><%=rs("ip_address")%></option>
<%                end if 
                  rs.movenext
                loop  %>
              </select>
			</td>
          </tr>
          <tr>
            <td align="right">Description : </td>
            <td align="left"><input type="text" name="emp_name" style="width:300px "/></td>
          </tr>
          <tr>
		    <td align="right">MAC Address : </td>
			<td align="left"><input type="text" name="mac_addr" style="width:250px "/></td>
		  </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center">
        <table>
          <tr>
            <td><input type="button" value="Back" name="back" style="width:100px " onClick="menu();"/></td>
	        <td><input type="reset" value="Reset" name="reset" style="width:100px "/></td>
		    <td><input type="submit" value="Submit" name="submit" style="width:100px "/></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
<body>
</body>
</html>

Problem -
Now what happens in programe is that after selecting items in list it displays list of all IP with blank IP as selected, but it lost VLAN name.

What should I do to avoid this?

Thanks and regards,
Vikas

**acoder** · Jun 13 '08, 07:49 AM

The reason why that happens is that you're replacing the div "txtHint"'s contents with the ASP file. The ASP script that you call should only output what is needed, not the whole page. So if you want the IPs only, return the HTML for the IP select named "ip_address " and set/replace that only.

**vikas251074** · Jun 13 '08, 08:57 AM

How can I return the HTML for the IP select named "ip_address " and set/replace that only? Please tell me.

Thanks and regards,
Vikas

**acoder** · Jun 13 '08, 09:05 AM

Look at this quick modification that I've made to getip.asp:

Code:

<%
response.expires=-1
sql="select ip_address from vlan_detail where item ="
sql=sql & "'" & request.querystring("q") & "'"

set conn=Server.CreateObject("ADODB.Connection")
conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User ID=ipis; Data Source=isap2000; Persist Security Info=True"
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sql, conn
          set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"' and seq_no = (select min(seq_no) from vlan_detail where allotted_to is null and item ='"&v_item&"' and vlan_name='"&v_lan&"')")
            dim v_ip_address
			v_ip_address = rs("ip_address") %>
              <select name="ip_address" style="width:150px ">
<%              set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"'")
                do while not rs.eof
			      if rs("ip_address") = v_ip_address then%>
                    <option value="<%=rs("ip_address")%>" selected><%=rs("ip_address")%></option>
<%	              else %>
                    <option value="<%=rs("ip_address")%>"><%=rs("ip_address")%></option>
<%                end if 
                  rs.movenext
                loop  %>
              </select>

Only the select is output. You can set the innerHTML of a div containing the select.

I want to dynamically select second list value based on first list value.

I want to dynamically select second list value based on first list value.

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment