By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,785 Members | 2,074 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,785 IT Pros & Developers. It's quick & easy.

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

vikas251074
100+
P: 198
I have create form as below -

Expand|Select|Wrap|Line Numbers
  1.         <table>
  2.           <tr>
  3.             <td align="right">VLAN Name : </td>
  4.             <td>
  5.               <select name="vlan_name" style="width:150px ">
  6. <%              set rs = conn.execute("select vlan_name from vlan_master order by vlan_name")
  7.                 do while not rs.eof%>
  8.                   <option value="<%=rs("vlan_name")%>"><%=rs("vlan_name")%></option>
  9. <%                rs.movenext
  10.                 loop%>
  11.               </select>
  12.             </td>
  13.           </tr>
  14.           <tr>
  15.             <td align="right">Item : </td>
  16.             <td>
  17.               <select name="item" style="width:150px ">
  18. <%              set rs = conn.execute("select item, item_desc from network_item order by item_desc")
  19.                 do while not rs.eof
  20.                   if rs("item") = "PC" then%>
  21.                     <option value="<%=rs("item")%>" selected><%=rs("item_desc")%></option>
  22. <%                else%>
  23.                     <option value="<%=rs("item")%>"><%=rs("item_desc")%></option>
  24. <%                  end if
  25.                   rs.movenext
  26.                 loop%>
  27.               </select>
  28.             </td>
  29.           </tr>
  30.           <tr>
  31.             <td align="right">IP Address : </td>
  32.             <td align="left"><input type="text" name="ip_address" style="width:150px "/></td>
  33.           </tr>
  34.           <tr>
  35.             <td align="right">MIS No : </td>
  36.             <td>
  37.               <select name="mis_no" style="width:250px ">
  38. <%              set rs = conn.execute("select a.mis_no, a.seq_no, a.lot_no, b.item_description from item_procurement_history_dtl a, item_master b where a.status = 'D' and b.item_code = a.item_code order by a.item_code, substr(mis_no, instr(mis_no, '/', -1)+1)")
  39.                 do while not rs.eof%>
  40.                   <option value="<%=rs("mis_no")%>"><%=rs("mis_no")%></option>
  41. <%                rs.movenext
  42.                 loop%>
  43.               </select>
  44.             </td>
  45.           </tr>
  46.           <tr>
  47.             <td align="right">Employee name : </td>
  48.             <td align="left"><input type="text" name="emp_name" style="width:300px "/></td>
  49.           </tr>
  50.         </table>
I am using two table 1) Item_master and 2) IP_Address.
The field of IP_Address is given below
1) Item, IP_Address, EmpName
Here Item and IP_Address field is filled with fixed set of ip addresses and item. And if any ip address is assigned to anybody , then empname is filled, if ip address is released then empname field against that ip address is deleted.

If user select Computer in Item field, then the second field IP Address should be display the first available ip address from table automatically. How can I achieve this?

Thanks and regards,
Vikas
Jun 10 '08 #1
Share this Question
Share on Google+
17 Replies


acoder
Expert Mod 15k+
P: 16,027
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.
Jun 10 '08 #2

vikas251074
100+
P: 198
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
Jun 10 '08 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Jun 10 '08 #4

vikas251074
100+
P: 198
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.
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script src="selectcustomer.js"></script>
  4. </head><body><form> 
  5. Select a Customer:
  6. <select name="customers" onchange="showcustomer(this.value)">
  7. <option value="66788">Sanjay Pandey
  8. <option value="71955">Asis Das
  9. <option value="77581">T.A. Sazid 
  10. </select>
  11. </form><p>
  12. <div id="txtHint"><b>Customer info will be listed here.</b></div>
  13. </p></body>
  14. </html>
This file name is 'selectcustomer.js'
Expand|Select|Wrap|Line Numbers
  1. <%
  2. var xmlHttp
  3.  
  4. function showcustomer(str){ 
  5.   xmlHttp=GetXmlHttpObject();
  6.   if (xmlHttp==null)  {
  7.     alert ("Your browser does not support AJAX!");
  8.     return;
  9.   } 
  10.   var url="getcustomer.asp";
  11.   url=url+"?q="+str;
  12.   url=url+"&sid="+Math.random();
  13.   xmlHttp.onreadystatechange=stateChanged;
  14.   xmlHttp.open("GET",url,true);
  15.   xmlHttp.send(null);
  16. }
  17.  
  18. function stateChanged() { 
  19.   if (xmlHttp.readyState==4)
  20.     { document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}
  21. }
  22.  
  23. function GetXmlHttpObject(){
  24.   var xmlHttp=null;
  25.   try { xmlHttp=new XMLHttpRequest();  }   // Firefox, Opera 8.0+, Safari
  26.   catch (e){ try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}   // Internet Explorer
  27.   catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
  28. }
  29. return xmlHttp;
  30. }
  31. %>
This file name is 'getcustomer.asp'
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. </head>
  4. <%
  5. response.expires=-1
  6. sql="SELECT * FROM hba_empmast where empno="
  7. sql=sql & "'" & request.querystring("q") & "'"
  8.  
  9. set conn=Server.CreateObject("ADODB.Connection")
  10. conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User ID=ipis; Data Source=isap2000; Persist Security Info=True"
  11. set rs = Server.CreateObject("ADODB.Recordset")
  12. rs.Open sql, conn
  13.  
  14. response.write("<table>")
  15. do until rs.EOF
  16.   for each x in rs.Fields
  17.     response.write("<tr><td><b>" & x.name & "</b></td>")
  18.     response.write("<td>" & x.value & "</td></tr>")
  19.   next
  20.   rs.MoveNext
  21. loop
  22.  
  23. response.write("</table>")
  24. %>
  25. <body>
  26. </body>
  27. </html>
  28.  
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
Jun 11 '08 #5

vikas251074
100+
P: 198
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
Jun 11 '08 #6

acoder
Expert Mod 15k+
P: 16,027
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.
Jun 11 '08 #7

vikas251074
100+
P: 198
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
Jun 12 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Select what in the second list? Can you explain clearly with an example?
Jun 12 '08 #9

vikas251074
100+
P: 198
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
Jun 12 '08 #10

acoder
Expert Mod 15k+
P: 16,027
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.
Jun 12 '08 #11

vikas251074
100+
P: 198
I am giving you my complete source code for your kind consideration.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <!--#include file="style.css"-->
  4. <!--#include file="first.asp"-->
  5. <script type="text/javascript">
  6. var xmlHttp
  7.  
  8. function vitem(str){ 
  9.   xmlHttp=GetXmlHttpObject();
  10.   if (xmlHttp==null)  {
  11.     alert ("Your browser does not support AJAX!");
  12.     return;
  13.   } 
  14.   var url="getip.asp";
  15.   url=url+"?q="+str;
  16.   url=url+"&sid="+Math.random();
  17.   xmlHttp.onreadystatechange=stateChanged;
  18.   xmlHttp.open("GET",url,true);
  19.   xmlHttp.send(null);
  20. }
  21.  
  22. function stateChanged() { 
  23.   if (xmlHttp.readyState==4)
  24.     { document.getElementById("txtHint").innerHTML=xmlHttp.responseText;}
  25. }
  26.  
  27. function GetXmlHttpObject(){
  28.   var xmlHttp=null;
  29.   try { xmlHttp=new XMLHttpRequest();  }   // Firefox, Opera 8.0+, Safari
  30.   catch (e){ try {xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}   // Internet Explorer
  31.   catch (e){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
  32. }
  33. return xmlHttp;
  34. }
  35.  
  36. function menu(){
  37.   window.location = "menu.asp";
  38. }
  39. </script>
  40. <html>
  41. <head>
  42. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  43. <title>IP Allocation</title>
  44. </head>
  45. <%
  46. dim conn
  47. dim rs
  48. set conn = server.createobject("ADODB.Connection")
  49. conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User Id=ipis; Data Source=isap2000;Persist Security Info=True"
  50. set rs = server.createobject("ADODB.Recordset")
  51. %>
  52. <body>
  53. <form name="myform" method="post" action="save_allotment.asp">
  54. <div id="txtHint" style="position:absolute; top:150px; left:300px ">
  55.   <table border="1">
  56.     <tr>
  57.       <th><h2>IP Allotment</h2></th>
  58.     </tr>
  59.     <tr>
  60.       <td>
  61.         <table>
  62.           <tr>
  63.             <td align="right">VLAN Name : </td>
  64.             <td>
  65.               <select name="vlan_name" style="width:150px " onchange="this.form.submit();">
  66. <%              set rs = conn.execute("select vlan_name from vlan_master order by vlan_name")
  67.                 v_lan = rs("vlan_name")
  68.     do while not rs.eof %>
  69.                    <option value="<%=rs("vlan_name")%>"><%=rs("vlan_name")%></option>
  70.                   rs.movenext
  71.                 loop%>
  72.               </select>
  73.             </td>
  74.           </tr>
  75.           <tr>
  76.             <td align="right">Item : </td>
  77.             <td>
  78.               <select name="item" style="width:150px " onchange="vitem(this.value);">
  79. <%              dim v_item
  80.                 set rs = conn.execute("select item, item_desc from network_item order by item_desc")
  81.                 do while not rs.eof
  82.                   if rs("item") = "PC" then%>
  83.                     <option value="<%=rs("item")%>" selected><%=rs("item_desc")%></option>
  84. <%                  v_item=rs("item")
  85.                    else%>
  86.                     <option value="<%=rs("item")%>"><%=rs("item_desc")%></option>
  87. <%                  end if
  88.                   rs.movenext
  89.                 loop%>
  90.               </select>
  91.             </td>
  92.           </tr>
  93.           <tr>
  94. <%          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&"')")
  95.             dim v_ip_address
  96.             v_ip_address = rs("ip_address") %>
  97.             <td align="right">IP Address : </td>
  98.             <td align="left">
  99.               <select name="ip_address" style="width:150px ">
  100. <%              set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"'")
  101.                 do while not rs.eof
  102.                   if rs("ip_address") = v_ip_address then%>
  103.                     <option value="<%=rs("ip_address")%>" selected><%=rs("ip_address")%></option>
  104. <%                  else %>
  105.                     <option value="<%=rs("ip_address")%>"><%=rs("ip_address")%></option>
  106. <%                end if 
  107.                   rs.movenext
  108.                 loop  %>
  109.               </select>
  110.     </td>
  111.           </tr>
  112.           <tr>
  113.             <td align="right">Description : </td>
  114.             <td align="left"><input type="text" name="emp_name" style="width:300px "/></td>
  115.           </tr>
  116.           <tr>
  117.             <td align="right">MAC Address : </td>
  118.             <td align="left"><input type="text" name="mac_addr" style="width:250px "/></td>
  119.           </tr>
  120.         </table>
  121.       </td>
  122.     </tr>
  123.     <tr>
  124.       <td align="center">
  125.         <table>
  126.           <tr>
  127.             <td><input type="button" value="Back" name="back" style="width:100px " onClick="menu();"/></td>
  128.             <td><input type="reset" value="Reset" name="reset" style="width:100px "/></td>
  129.             <td><input type="submit" value="Submit" name="submit" style="width:100px "/></td>
  130.           </tr>
  131.         </table>
  132.       </td>
  133.     </tr>
  134.   </table>
  135. </div>
  136. </form>
  137. </body>
  138. </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.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7. </head>
  8. <%
  9. response.expires=-1
  10. sql="select ip_address from vlan_detail where item ="
  11. sql=sql & "'" & request.querystring("q") & "'"
  12.  
  13. set conn=Server.CreateObject("ADODB.Connection")
  14. conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User ID=ipis; Data Source=isap2000; Persist Security Info=True"
  15. set rs = Server.CreateObject("ADODB.Recordset")
  16. rs.Open sql, conn
  17. %>
  18.   <table border="1">
  19.     <tr>
  20.       <th><h2>IP Allotment</h2></th>
  21.     </tr>
  22.     <tr>
  23.       <td>
  24.         <table>
  25.           <tr>
  26.             <td align="right">VLAN Name : </td>
  27.             <td>
  28.               <select name="vlan_name" style="width:150px " onchange="this.form.submit();">
  29. <%              set rs = conn.execute("select vlan_name from vlan_master order by vlan_name")
  30.                 v_lan = rs("vlan_name")
  31.                 do while not rs.eof 
  32.                     <option value="<%=rs("vlan_name")%>"><%=rs("vlan_name")%></option>
  33. <%                  end if
  34.                   rs.movenext
  35.                 loop %>
  36.               </select>
  37.             </td>
  38.           </tr>
  39.           <tr>
  40.             <td align="right">Item : </td>
  41.             <td>
  42.               <select name="item" style="width:150px " onchange="vitem(this.value);">
  43. <%              dim v_item
  44.                 set rs = conn.execute("select item, item_desc from network_item order by item_desc")
  45.                 do while not rs.eof
  46.                   if rs("item") = request.QueryString("q") then%>
  47.                     <option value="<%=rs("item")%>" selected><%=rs("item_desc")%></option>
  48. <%                  v_item=rs("item")
  49.                    else%>
  50.                     <option value="<%=rs("item")%>"><%=rs("item_desc")%></option>
  51. <%                  end if
  52.                   rs.movenext
  53.                 loop%>
  54.               </select>
  55.             </td>
  56.           </tr>
  57.           <tr>
  58. <%          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&"')")
  59.             dim v_ip_address
  60.             v_ip_address = rs("ip_address") %>
  61.             <td align="right">IP Address : </td>
  62.             <td align="left">
  63.               <select name="ip_address" style="width:150px ">
  64. <%              set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"'")
  65.                 do while not rs.eof
  66.                   if rs("ip_address") = v_ip_address then%>
  67.                     <option value="<%=rs("ip_address")%>" selected><%=rs("ip_address")%></option>
  68. <%                  else %>
  69.                     <option value="<%=rs("ip_address")%>"><%=rs("ip_address")%></option>
  70. <%                end if 
  71.                   rs.movenext
  72.                 loop  %>
  73.               </select>
  74.             </td>
  75.           </tr>
  76.           <tr>
  77.             <td align="right">Description : </td>
  78.             <td align="left"><input type="text" name="emp_name" style="width:300px "/></td>
  79.           </tr>
  80.           <tr>
  81.             <td align="right">MAC Address : </td>
  82.             <td align="left"><input type="text" name="mac_addr" style="width:250px "/></td>
  83.           </tr>
  84.         </table>
  85.       </td>
  86.     </tr>
  87.     <tr>
  88.       <td align="center">
  89.         <table>
  90.           <tr>
  91.             <td><input type="button" value="Back" name="back" style="width:100px " onClick="menu();"/></td>
  92.             <td><input type="reset" value="Reset" name="reset" style="width:100px "/></td>
  93.             <td><input type="submit" value="Submit" name="submit" style="width:100px "/></td>
  94.           </tr>
  95.         </table>
  96.       </td>
  97.     </tr>
  98.   </table>
  99. <body>
  100. </body>
  101. </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
Jun 13 '08 #12

acoder
Expert Mod 15k+
P: 16,027
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.
Jun 13 '08 #13

vikas251074
100+
P: 198
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
Jun 13 '08 #14

acoder
Expert Mod 15k+
P: 16,027
Look at this quick modification that I've made to getip.asp:
Expand|Select|Wrap|Line Numbers
  1. <%
  2. response.expires=-1
  3. sql="select ip_address from vlan_detail where item ="
  4. sql=sql & "'" & request.querystring("q") & "'"
  5.  
  6. set conn=Server.CreateObject("ADODB.Connection")
  7. conn.open "Provider=MSDAORA.1; dsn=ipis; Password=ipis; User ID=ipis; Data Source=isap2000; Persist Security Info=True"
  8. set rs = Server.CreateObject("ADODB.Recordset")
  9. rs.Open sql, conn
  10.           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&"')")
  11.             dim v_ip_address
  12.             v_ip_address = rs("ip_address") %>
  13.               <select name="ip_address" style="width:150px ">
  14. <%              set rs=conn.execute("select ip_address from vlan_detail where item ='"&v_item&"' and vlan_name='"&v_lan&"'")
  15.                 do while not rs.eof
  16.                   if rs("ip_address") = v_ip_address then%>
  17.                     <option value="<%=rs("ip_address")%>" selected><%=rs("ip_address")%></option>
  18. <%                  else %>
  19.                     <option value="<%=rs("ip_address")%>"><%=rs("ip_address")%></option>
  20. <%                end if 
  21.                   rs.movenext
  22.                 loop  %>
  23.               </select>
Only the select is output. You can set the innerHTML of a div containing the select.
Jun 13 '08 #15

vikas251074
100+
P: 198
I didn't understand what you have done. Please explain me clearly and what to do next? What about the remaining lines of code?

Thanks and regards,
Vikas
Jun 13 '08 #16

acoder
Expert Mod 15k+
P: 16,027
I've just removed all the extra duplicated code, so that only the select element is output. Run that page directly (without using Ajax) and you'll see what I mean (though check for any syntax errors in the ASP).

What you need to do next is put a div or span around the IP select in the main page and set its innerHTML when the Ajax request is complete/successful. Make sure you give it an ID, so you can access it. Alternatively, just return the options only and set the select element's innerHTML instead.
Jun 13 '08 #17

vikas251074
100+
P: 198
Okay!
Let us see what happens.
Jun 13 '08 #18

Post your reply

Sign in to post your reply or Sign up for a free account.