How to synchronize two list/menu form fields in ASP

[jmartmem]

Greetings,

I am using Dreamweaver CS3 to design an ASP page that contains a Record Insertion Form. Within this form are two list/menu form fields that I would like to "synchronize". In other words, let's say I have two menus: one where the user selects "Calendar Quarter" and a second for selecting "Calendar Month". If the user selects "Q1" from the first menu, then the second menu is requeried and "refreshed" to show only the months "Jan.", "Feb". and "Mar."

I know how to do this using VisualBasic for MS Access forms but am not sure how to accomplish this for ASP.

Any advice or suggestions would be most welcome.

- JM

[jhardman]

The problem is that ASP is strictly a server-side technology, it ceases to work as soon as the page is loaded onto the browser. For that you will need at least some client-side scripting. There are two ways I often see this done, both involve some javascript and your choice depends largely on how much javascript you want to use. Here are the options:

1 - when you make the first selection use a very brief function to submit the form as it is so far (not much javascript, right? the rest is done in ASP). The form handler (preferably this same ASP page) should re-populate the form and send it right back to the user (hopefully fast enough that he doesn't realize he has submitted anything) with the inputs he has already entered filled out and the select in question changed to the months available.

2 - Make several versions of the second select, and all of them should be hidden. On the onChange event of the first drop-down, unhide the appropriate version of the second drop-down and rehide all the others.

I've seen both of these methods used well on live web sites. Let me know if this helps.

Jared

[jeffstl]

Greetings,

I am using Dreamweaver CS3 to design an ASP page that contains a Record Insertion Form. Within this form are two list/menu form fields that I would like to "synchronize". In other words, let's say I have two menus: one where the user selects "Calendar Quarter" and a second for selecting "Calendar Month". If the user selects "Q1" from the first menu, then the second menu is requeried and "refreshed" to show only the months "Jan.", "Feb". and "Mar."

I know how to do this using VisualBasic for MS Access forms but am not sure how to accomplish this for ASP.

Any advice or suggestions would be most welcome.

- JM

Are you using classic ASP ? (Response.write Variable)

Or are you using ASP.NET? (web controls such as <asp: Datagrid> , etc

If you are using asp.net what you describe can be accomplished, indirectly since .net pages do not reload the entire page but only send data back and forth.

There are probably asp.net calander controls out there, or add ons for dreamweaver.

If you are in fact using classic ASP however what jh said is correct, you will need to use javascript to implement something like that that happens right in front of the user working with the interface, without reloading the entire page, or opening new windows, etc.

[jmartmem]

I think your second option is probably the easier of the two, given my limited ASP experience. Could you perhaps point me in the direction of sample code where you've seen this done? While I understand the concept, I'm not sure how to accomplish this in Dreamweaver CS3 or by back-end coding.

Any examples you may have would be most helpful.

- JM

[jhardman]

I think your second option is probably the easier of the two, given my limited ASP experience. Could you perhaps point me in the direction of sample code where you've seen this done? While I understand the concept, I'm not sure how to accomplish this in Dreamweaver CS3 or by back-end coding.

Any examples you may have would be most helpful.

- JM

I don't have any dreamweaver experience, and although I have gotten this type of dealy to work, but I don't consider myself a javascript expert, so I don't feel like I'm qualified to give code on how it is done. I'll ask a javascript expert to look in on this thread.

Jared

[acoder]

There is a third option: Ajax. This would avoid the need to load all the select options at the beginning.

However, if you are going for the second option, this link should help. You could also use the select add() method (though IE is different from other browsers, as usual).

[jmartmem]

Several months ago, I started this thread. Over time, I've changed the direction I want to take.

What I'm seeking now is further advice on how to accomplish the following (which I've copied from an earlier post on this thread):

1 - when you make the first selection use a very brief function to submit the form as it is so far (not much javascript, right? the rest is done in ASP). The form handler (preferably this same ASP page) should re-populate the form and send it right back to the user (hopefully fast enough that he doesn't realize he has submitted anything) with the inputs he has already entered filled out and the select in question changed to the months available.

Whatever Web or other resources anyone can suggest would be most appreciated.

- JM

[DrBunchman]

Hi JM,

In the onclick event of your first drop down you can fire off a function which will redirect the page to itself and pass your selected value through the querystring. You can then use this value to populate your second drop down. Here's an example:

 <head> 
  function Reload(form)
  {
    var dd1=form.Title.options[form.dd1.options.selectedIndex].value;
    self.location='ThisPage.asp?dd1=' + dd1;
  }
</head>
<body>
<form>
<select name="dd1" onchange="Reload(this.form)">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>
<%
Dim dd1
dd1 = Request.Querystring("dd1")
%>
</form>
</body>
 

Can you see how this example works? I haven't written any code for the second drop down but all you'd need to do is use the value of dd1 to populate it as required.

Let me know if this helps,

Dr B

[jmartmem]

Well, it helps me get farther than I was this morning, but I still have a ways to go.

Let me back up: what I want is two list boxes filled with values from a query, and the selection from the 1st list box results in a filtered 2nd list box.

Here's the code for what I have so far:

<SCRIPT language=JavaScript>
function reload(form){
var workstream01=form.workstream01.options[form.workstream01.options.selectedIndex].value;
self.location='TEST_query.asp?workstream01=' + workstream01 ;
}
</script>
 
<%
Dim workstream01
workstream01=Request.QueryString("workstream01") 
%>
 
<form id="form1" name="form1" method="post" action="">
  <p>
 
<%
'FIRST DROP DOWN LIST
Dim mySQL1, myRS1, ddworkstream01
 
Set myRS1 = Server.CreateObject("ADODB.Recordset")
mySQL1 = "SELECT Workstream FROM XREF_WORKSTREAMS ORDER BY WorkFlow"
myRS1.Open mySQL1, myConn, adOpenKeyset, adLockOptimistic 
'Response.Write "<select name=workstream01 onchange="Reload(this.form)"><option value='''' selected>Select Workstream</option>"
 
Response.Write "<form method=post name=form1 action=''><select name=workstream01 onchange='reload(this.form)'><option value=''>Select Workstream</option>"
 
Do While Not myRS1.EOF 
Response.Write "<option value=''" & myRS1("Workstream") &"''>"& myRS1("Workstream") &"</option>"
myRS1.MoveNext
Loop
Response.Write "</select>"
myRS1.Close
Set myRS1 = Nothing 
%>
  </p>
  <p>
 
 
<%
'SECOND DROP DOWN LIST
Dim mySQL2, myRS2
 
'If len(workstream_01) > 1 Then
 
Set myRS2 = Server.CreateObject("ADODB.Recordset")
'mySQL2 = "SELECT Program_Name FROM EZTracking_MASTER WHERE EZ_Strategic_Workstream='" & workstream01 & "' GROUP BY Program_Name ORDER BY Program_Name"
mySQL2 = "SELECT Program_Name FROM EZTracking_MASTER GROUP BY Program_Name ORDER BY Program_Name"
myRS2.Open mySQL2, myConn, adOpenKeyset, adLockOptimistic 
'Response.Write "<select name=workstream01 onchange="Reload(this.form)"><option value='''' selected>Select Workstream</option>"
 
Response.Write "<form method=post name=form1 action=''><select name=program_name01'><option value=''>Select Program Name</option>"
 
Do While Not myRS2.EOF 
Response.Write "<option value=''" & myRS2("Program_Name") &"''>"& myRS2("Program_Name") &"</option>"
myRS2.MoveNext
Loop
Response.Write "</select>"
myRS2.Close
'end if
Set myRS2 = Nothing 
%>
 
 
  &nbsp;  </p>
</form>

As it stands now, the above code correctly populates the two list boxes and reloads the form when selecting from the first list box, but I've yet to get it to reload the page, keep the variable from the 1st list box and filter the 2nd list box.

One person suggested doing a "mini-submit" through an onchange event when the first list box selection is made, but I'm not sure how to accomplish that either.

I know I'm missing something but I can't figure out what it is. This is a problem I need to fix, so your help would be greatly appreciated.

JM

[DrBunchman]

I can't see anything obvious so the next step is to try to debug this to see where the problem lies. First of all try putting a messagebox in your javascript function to check it is being called correctly (alert('Test'); or something like that). Then put some Response.Write's on the page to test whether the value from the first dropdown list is being correctly passed back.

Let me know what happens,

Dr B

[jmartmem]

The alert('test') fires correctly onchange, but the value isn't getting passed back. I'll keep de-bugging, but am not sure what the problem is.

[jmartmem]

I'm posting some more code below because my inability to pass the variable back is getting extremely frustrating!

<%@ Language = VBscript %>
<% Option Explicit %>
<!--#include file="Connections/EZTrackingTool.asp" -->
<!-- #include virtual = "/adovbs.inc" -->
<% Response.Buffer = True %>
 
<html>
<head>
<title>Database Search</title>
<SCRIPT language=JavaScript>
function reload(form){
var val=form.workstream01.options[form.workstream01.options.selectedIndex].value;
self.location='TEST_query2.asp?workstream01=' + val ;
alert('TEST')
}
</script>
</head><body>
 
<%
Dim objconn,objRS,strSQL,ws
ws=Request.QueryString("workstream01")
Set objconn = Server.CreateObject("ADODB.Connection")
objconn.ConnectionString = "Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath("/ez/Database/TrackingToolDB.mdb")
objconn.Open
 
Set objRs = Server.CreateObject("ADODB.Recordset")
 
'''''First drop down list starts here'''''
 
strSQL = "SELECT WorkFlow from XREF_WORKSTREAMS ORDER BY WorkFlow"
objRS.Open strSQL, objconn
Response.Write "<form method=post name=f1 action=''><select name=workstream01 onchange='reload(this.form)'><option value=''>Select Workstream</option>"
Do While Not objRS.EOF 
    Response.Write "<option value=" & objRs("WorkFlow") & ">" & objRs("WorkFlow") & "</option>"
     objRS.MoveNext
 Loop
objRs.Close
Response.Write "</select>"
Response.Write "<br>----<br>"
 
''' Second list starts here ''''
 
If len(ws) > 1 Then
 
strSQL = "SELECT * FROM XREF_WORKSTREAMS where Workstream='" & ws &"'"
objRS.Open strSQL, objconn
 
Do While Not objRS.EOF 
    Response.Write objRs("Workstream") & " " & objRs("WorkFlow") & "  "  & objRs("Definition") & "<br>"
     objRS.MoveNext
 Loop
Response.Write "</form>"
objRs.Close
 
objconn.Close
end if 
 
     %>
</body>
</html>

As I mentioned before, the alert popup for the javascript function works fine. The value selected in the first drop down gets passed to the query string. But the Response.Write to the page in the second list does not happen.

I would also prefer that the first drop down retain the value selected after the onchange function, but am also unable to make this happen.

HELP PLEASE!

- JM

[DrBunchman]

JM, change the alert to alert(val); so you can see whether the value of the drop down is being assigned to the variable correctly.

Let me know what happens,

Dr B

[jmartmem]

It appears to work fine. I put the value in the javascript alert...

alert(form.workstream01.options[form.workstream01.options.selectedIndex].value)

...and the alert value returned is the same one selected in the 'workstream01' drop down list.

Anything else I should look at?