p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Dreamweaver (all versions) (http://p2p.wrox.com/forumdisplay.php?f=58)
-   -   Retain form value from dependent list box (http://p2p.wrox.com/showthread.php?t=12922)

qhong May 12th, 2004 07:14 PM

Retain form value from dependent list box
 
I have a ASP page(timeOffRequest.asp) with 2 text fields and 2 list boxes. There is a parent list box(mnuDept) and the other one(mnuName) is dependent on this parent.
My Problem: I want to retain the values on the 2 list boxes after submit. I am able to retain the first list box values by using
<option value="<%=(rsDepartment.Fields.Item("deptID").Valu e)%>"<%if rsDepartment.fields("deptID")=Request.queryString( "mnuDept") then%>Selected<%end if%>><%=(rsDepartment.Fields.Item("deptName").Valu e)%></option>

How can I retain the 2nd list box values after submitting? I am using Javascript to populate the dependent list...any suggestion would be really helpful...
After submission, form action go to "insert_action1.asp" page and it will redirect back to this form page(timeoffRequest.asp)

Here is the JavaScript code:


script language="JavaScript">
<!--
var arrDynaList = new Array();
var arrDL1 = new Array();

arrDL1[1] = "mnuDept"; // Name of parent list box
arrDL1[2] = "frmTimeOffRequest"; // Name of form containing parent list box
arrDL1[3] = "mnuName"; // Name of child list box
arrDL1[4] = "frmTimeOffRequest"; // Name of form containing child list box
arrDL1[5] = arrDynaList;

<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS

txtDynaListRelation = "deptID" ' Name of recordset field relating to parent
txtDynaListLabel = "name" ' Name of recordset field for child Item Label
txtDynaListValue = "empID" ' Name of recordset field for child Value
Set oDynaListRS = rsEmp ' Name of child list box recordset

Dim varDynaList
varDynaList = -1

Dim varMaxWidth
varMaxWidth = "1"

Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value

Dim varCheckLength
varCheckLength = 0

Dim varMaxLength
varMaxLength = 0

While (NOT oDynaListRS.EOF)

 If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value ) Then
  If (varCheckLength > varMaxLength) Then
   varMaxLength = varCheckLength
  End If
  varCheckLength = 0
 End If
%>
 arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation). Value)%>"
 arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Val ue)%>"
 arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Val ue)%>"
<%

 If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Val ue) > len(varMaxWidth)) Then
  varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
 End If
 varCheckLength = varCheckLength + 1
 varDynaList = varDynaList + 3
 oDynaListRS.MoveNext()

Wend

If (varCheckLength > varMaxLength) Then
 varMaxLength = varCheckLength
End If
%>

//-->
</script>



<script language="JavaScript">
<!--

function setDynaList(arrDL){

 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];

 clearDynaList(oList2);

 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }

 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}

function clearDynaList(oList){

 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }

 oList.selectedIndex = -1;
}

function populateDynaList(oList, nIndex, aArray){

 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }

 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]",0);
 }

oList.selectedIndex = 0;

}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>

*My form code:

<form name="frmTimeOffRequest" method="post" action ="insert_action1.asp" onsubmit="return validateForm(this)">
  <div align="center">
    <p class="tse01"><b></b></p>
    <table border="1" width="80%" bgcolor="#669999">
      <tr bgcolor="#669999">
        <td colspan="4" height="37" valign="middle" align="left">
          <div align="center"><b>Time-Off Request Form </b></div>
        </td>
      </tr>
      <tr>
        <td width="150" height="37" valign="middle" align="left">
          <div align="right">Department:</div>
        </td>
        <td colspan="3" class="tse01" height="37">
          <select name="mnuDept" onChange="MM_callJS('setDynaList(arrDL1)')">
            <%
While (NOT rsDepartment.EOF)
%>
            <option value="<%=(rsDepartment.Fields.Item("deptID").Valu e)%>"<%if rsDepartment.fields("deptID")=Request.queryString( "mnuDept") then%>Selected<%end if%>><%=(rsDepartment.Fields.Item("deptName").Valu e)%></option>
            <%
  rsDepartment.MoveNext()
Wend

If (rsDepartment.CursorType > 0) Then
  rsDepartment.MoveFirst
Else
  rsDepartment.Requery
End If

%>
          </select>
        </td>
      </tr>
      <tr>
        <td width="150" height="35" valign="middle">
          <div align="right">Name:</div>
        </td>
        <td colspan="3" class="tse01" height="35">
          <select name="mnuName">
          </select>
        </td>
      </tr>

      <tr>
        <td width="150" height="26" nowrap> <b>Date</b>
        </td>
        <td width="207" align="left" height="26" nowrap>Holiday Type</td>
      </tr>
      <tr>
        <td width="150" height="29">
          <input type="text" name="txtDate1" size="10">
          <a href="javascript:show_calendar('frmTimeOffRequest. txtDate1');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"><img src="../../Images/show-calendar.gif" width=24 height=22 border=0></a>
          </td>
               <td width="207" class="tse01" height="29">
          <input type="text" name="txtHol1">
        </td>
      </tr>
            <tr>
        <td colspan="4" height="45">
          <div align="center">
            <input type="submit" name="Submit" value="Save">
            <input type="hidden" name="txtTransType" value="T">
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div align="center">
    <p>&nbsp; </p>
    <p>&nbsp;</p>
  </div>
</form>

Thanks

Quinn


Imar May 13th, 2004 02:10 AM

Hi there,

Without getting into your code too much, here's the general idea:

1. Create a way to find out if the form was posted back to the server or not. This can be accomplished by looking at the submit button, for example. E.g.:

If Request.Form("Save") & "" = "" Then
  ' First load of the form
Else
  ' Form posted back
End If

2. Next, in the If clause, load the data from the database. For example:

' Do database stuff here
(Dim DeptID)
DeptID = rsDepartment.Fields.Item("deptID").Value

3. Save this info to the textbox:
<input type="text" value="<%=DeptID%> name="txtDeptID" />

4. And finally, retrieve the info from the form when the page is posted back (in the Else clause). For example:
DeptID = Request.Form("txtDeptID")

You can apply this general concept to other controls as well. So, based on the value of DeptID you could preselect an item in the drop-down.
In your code, you're using Request.QueryString to get values from the QueryString. However, your form is set to POST so you should get the information from Request.Form instead.

Hope this helps,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

qhong May 13th, 2004 01:58 PM

Imar,

Thanks for the reply. I believe my problem is in Javascript. I want to capture the second list box value I just submit so that user does not need to reselect it again if they want to submit more records with the same name in same department.
For example, after selecting a department from department list box, the second Name list box will populate all the names in the selected department, then user enter data in text boxes and click Save button. After submitting the data, I want to redirect to the same page with the same department and same name list boxes I just submit. For now, I am able to retain the same department, but for the name list box, it always selects the first selection. I wonder if it has to deal with my Javascript: oList.selectedIndex = 0 since there is a function call when the page is loaded.

Thanks,

Quinn


Imar May 13th, 2004 02:14 PM

Does the second list change when you change the first? I mean, do you use JavaScript to populate the second list?

If not, you could stick to the structure I presented earlier:
Code:

If Request.Form("Save") & "" = "" Then
  ' First load of the form
Else
  ' Form posted back
  ' Get DepartmentID
  DepartmentID = Request.Form("lstDepartmentID")
  ' Use DepartmentID toget the list of names working in that department
  ' You can then use the recordset with names to create the list of Names
End If

Instead of trying to write the code for you without exactly knowing what you need, maybe I can better suggest you these articles:

ASP
http://www.asp101.com/samples/db_pulldown_linked.asp

Client Side JavaScript:
http://www.atgconsulting.com/triplelist.asp

There are much more examples out on the Web: http://www.google.com/search?hl=en&q=linked+list+asp

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Good Times by The Stone Roses (From the album: Second Coming) What's This?

qhong May 13th, 2004 03:00 PM

Hi Imar,

Yes, I am using Javascript to populate the second list box. When it first loads the form, the first value is selected. I want it to change to the value a user selected after the submission. Before posting this topic, I already look at ATG consulting page, but not much information would help. In addition, how do I do to a self submit form? I really appreciate your help.

Quinn


Imar May 13th, 2004 03:14 PM

If you know the selectedIndex for your drop-down from within ASP, you can simply set it directly, e.g.:

myDroppDown.selectedIndex = <%=ASPSelectedIndex%>;

Otherwise, you'll need a function that loops through each item in the drop down and retrieves and compares each value against a ASP value, e.g.: (pseudo code):

var ValueToSelect = <%=ASPValueToSelect%>;
for each myItem in my dropdown
if myItem equals ValueToSelect
     myItems.Selected = true
end if
next

Does that make sense?

You can submit a form through code with:

document.MyFormName.submit();

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: For Real by Tricky with DJ Muggs and Grease (Track 1 from the album: Juxtapose) What's This?

Snib May 13th, 2004 03:23 PM

Translated to JavaScript:


var ValueToSelect = '<%=ASPValueToSelect%>';
for(myItem in myDropdown)
{
 if(myItem.text = ValueToSelect) /*if you want to check the value, use myItem.value instead of myItem.text*/
  myItem.selected = true;
}

HTH,

Snib

<><

qhong May 13th, 2004 03:53 PM

Hi,

I am not very familiar to javascript. Would you take a look at my script and point out where should I edit the script to get the solution. I tried to set the selectedIndex to the Name drop-down list selectedIndex, but an error message saying that there is no arrDL not define. Please take a look at my script, the red color code is where I edit.

Thanks

Quinn

script language="JavaScript">
<!--
var arrDynaList = new Array();
var arrDL1 = new Array();

arrDL1[1] = "mnuDept"; // Name of parent list box
arrDL1[2] = "frmTimeOffRequest"; // Name of form containing parent list box
arrDL1[3] = "mnuName"; // Name of child list box
arrDL1[4] = "frmTimeOffRequest"; // Name of form containing child list box
arrDL1[5] = arrDynaList;

<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS

txtDynaListRelation = "deptID" ' Name of recordset field relating to parent
txtDynaListLabel = "name" ' Name of recordset field for child Item Label
txtDynaListValue = "empID" ' Name of recordset field for child Value
Set oDynaListRS = rsEmp ' Name of child list box recordset

Dim varDynaList
varDynaList = -1

Dim varMaxWidth
varMaxWidth = "1"

Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value

Dim varCheckLength
varCheckLength = 0

Dim varMaxLength
varMaxLength = 0

While (NOT oDynaListRS.EOF)

 If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value ) Then
  If (varCheckLength > varMaxLength) Then
   varMaxLength = varCheckLength
  End If
  varCheckLength = 0
 End If
%>
 arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation). Value)%>"
 arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Val ue)%>"
 arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Val ue)%>"
<%

 If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Val ue) > len(varMaxWidth)) Then
  varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
 End If
 varCheckLength = varCheckLength + 1
 varDynaList = varDynaList + 3
 oDynaListRS.MoveNext()

Wend

If (varCheckLength > varMaxLength) Then
 varMaxLength = varCheckLength
End If
%>

//-->
</script>



<script language="JavaScript">
<!--

function setDynaList(arrDL){

 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];

 clearDynaList(oList2);

 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }

 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}

function clearDynaList(oList){

 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }

 oList.selectedIndex = -1;
}

function populateDynaList(oList, nIndex, aArray){

 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }

 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]",0);
 }
oList.selectedIndex = oList2.selectedIndex;
oList.selectedIndex = 0;

}

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>

Thanks,

Quinn


Imar May 14th, 2004 02:20 AM

I am not sure I understand what you're trying to set where. Since I can't test the ASP part of the page, I cannot see what is going on.

Anyway, if you want to set the selected index after the page has loaded, create a separate function that you call in the body's onload event. At that point, all JavaScript has been loaded so all arrays etc should be defined and ready for use. E.g.:

<body onload="SetSelectedIndex();">

<script>
function SetSelectedIndex()
{
  var itemToSelect = '<%=ASPItem%>';
  // Snib's code here to preselect the item
}
</script>

If that doesn't help, do you have a running page somewhere I can see? And can you explain a bit more how things are related? arrDL1 and arrDynaLList aren't the most descriptive variable names to see how things are related ;)

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: we use the pain by Guano Apes (From the album: Proud Like a God) What's This?

qhong May 14th, 2004 12:34 PM

Imar,

I get the JavaScript sample from the internet, so the variable naming is very generic.

I already created a function that is called in the body's onload event. However, everytime the page is loaded, it is always selects the first index(0) which is set to 0 in the populateDynaList() function. I want the selected index change after the submission.

Here is the function which is called when the page is loaded.


<script language="JavaScript">
<!--

function setDynaList(arrDL){

 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];

 clearDynaList(oList2);

 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }

 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}

function clearDynaList(oList){

 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }

 oList.selectedIndex = -1;
}

function populateDynaList(oList, nIndex, aArray){

 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
 }

 if (oList.options.length == 0){
  oList.options[oList.options.length] = new Option("[none available]",0);
 }

oList.selectedIndex = 0;

}
function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>

The following is the body tag of my page that the function is called.

<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_callJS('setDynaList(arrDL1) ')">
arrDL1 is the parent list box(mnuDept) where arrDynaList is the array value.

The purpose of this form is to enter data of an employee time off request record. For example, an employee can take more than one day off each month, so I need to enter the data into the form and save it. But it would be very annoyed if there is more one record to enter and users always need to re-select the employee name after the first save. The main problem is how can retain the value the users select(department and employee name) since the selected index always select the first employee name from Name drop-down box.

My form includes a Department drop-down box, Employee Name drop-down box, Date textbox, Hour text box, Type drop-down box and a Save button.

Hope this would help you to visualize what the problem is.

Thanks,

Quinn



All times are GMT -4. The time now is 12:50 AM.

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.