Question

I’m working with Javascript and ASP in this scenario. When this particular page opens, one of my drop-down menus is already populated with a status of “Open” or “Closed” – you can see the value comes from an ID in my recordset.

What I would like to do now is this: If the status on the page when it first loads is “Closed” and the user decides to change it to “Open” they must re-enter a “Reopen Reason” – so, that would display the header and text box below the drop-down….

Here’s what I have tried thus far: I have created a showHide() function and placed it inside of the select in the drop-down, but it doesn’t do anything, so am now stuck. Any help is appreciated. Thanks!

  <select name="cboStatus" id="cboStatus" style="width:200px" onchange="showHide();">                           <%
                        RSStatus.MoveFirst
                        If Not RSStatus.EOF Then
                            Do While Not RSStatus.EOF
                                %><option value='<%= RSStatus("ID")%>'
                                <%If RSStatus("ID") = RS("prjStatus") Then Response.Write "selected"%>><%= RSStatus("prjStatus")%></option><%
                                RSStatus.MoveNext
                            Loop
                        End If
                        %>           
                    </select>

The HTML that should be produced from the above JS:

<tr id="lbReopenReason" style="display:none">
                <td bordercolor="#f0f0e4" bgcolor="#f0f0e4"><h3>Reopen Reason</h3></td>
              </tr>
              <tr id="trReopenReason" style="display:none">
                <td bordercolor="#FFFFFF" bgcolor="#FFFFFF">
                <input name="txtReopenReason" type="text" id="txtReopenReason" value="<%If (RS("reOpenReason")) <> "" Then Response.Write(RS("reOpenReason"))%>" size="100" />
                </td>
              </tr>     

Javascript:

    function showHide()
        {
            var cboStatus = document.getElementById("cboStatus");
                  var cboStatusValue = cboStatus.options[cboStatus.selectedIndex].text;
            var lbReopenReason = document.getElementById("lbReopenReason");             var trReopenReason = document.getElementById("trReopenReason");         

            //If the status of the project is Closed at the time of page load, and that status changes, then the user must enter a re-open reason.
            if ( (status == 3) && (cboStatusvalue == 'Open' )
            {
                lbReopenReason.style.display = "";
                trReopenReason.style.display = "";
                }
                  else
{
                lbReopenReason.style.display = "none";
            trReopenReason.style.display = "none";
            }
    }  

Answer 1

Have finally resolved this one with the following:

Window onload to populate initial record value:

window.onload = findStatus;

    function findStatus()   
    {
        var cboStatus = document.getElementById('cboStatus');
        statusShowHide(cboStatus);      
    }

Followed by this Javascript for changing statuses:

function statusShowHide(obj)
{   
    var txtStatusFirstLoad = document.getElementById("txtStatusFirstLoad");                  
    var lbReopenReason = document.getElementById("lbReopenReason");
    lbReopenReason.style.display = "none";

    if (txtStatusFirstLoad.value == 3 && obj.value == 1)
    {

        lbReopenReason.style.display = "block";
    }   
}

And added this hidden text box to capture initial status value:

<input name="txtStatusFirstLoad" id = "txtStatusFirstLoad" type="hidden" value="<%=RS("Status")%>" />