Wizard Form Show/Hide Table in asp.net 3.5/vb 2008

Hi EE,

I have a Wizard form that has a table that I need to show/hide based upon the value of a checkbox.
If the form has already been filled out and the user is reviewing the step, it needs to show/hide based on the check value.
If no data has been filled out it needs to show/hide based on the value of the checkbox.
In addition, the space that the table takes up on the form, needs to shrink, expand based on whether shown/hidden.
I found some sample code, but I get an error saying the ShowHide function
ShowHide' is not a member of 'ASP.applynow_aspx'.

Thanks
<tr>
        <td class="wizardfont" colspan="3">
           <asp:CheckBox ID="chkCoBorrower" runat="server" CssClass="masterform" 
           text="Please check this box if you have a co-borrower applying with you"  OnCheckedChanged="ShowHide(this)" />
           
           </td>
           
       </tr>  
       
       </table>
                       
 <script language="javascript" type="text/javascript">

     function ShowHide(obj) {
         if (!obj.checked)
             document.getElementById('tblCoBorrower').style.visibility = "visible";
         else
             document.getElementById('tblCoBorrower').style.visibility = "hidden";

     }
       
</script>

Open in new window

SheritlwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

krunal_shahCommented:
this is because "OnCheckedChanged" can be used to call the server sidw method.
you can not call the Javascript dunction using OnCheckedChanged.
to call the javascript function use onxlick method,
try this,
<asp:CheckBox ID="chkCoBorrower" runat="server" CssClass="masterform"  
           text="Please check this box if you have a co-borrower applying with you"  OnClick="ShowHide(this)" />

further check this,
http://stackoverflow.com/questions/1135134/onclick-vs-onclientclick-for-an-aspcheckbox
http://bytes.com/topic/asp-net/answers/484577-asp-checkbox-hide-show-text-fields-when-its-clicked-without-doing-postback
0
SheritlwAuthor Commented:
I tried the onclick and I no longer get the error, but the function doesn't work.
How would I show/hide based on whether the checkbox has already been selected and whether it's been changed?
Thanks
0
krunal_shahCommented:
for that you need to write server side "OnCheckedChanged" metd and check in that methodif the check box is selected or not and based on that you can show/hide any server side control like panel.
if you wan to show./hide table make it runatat="server" or put it in side asp:panel so you can access it in code file.


<asp:CheckBox ID="chkCoBorrower" runat="server" CssClass="masterform"  
           text="Please check this box if you have a co-borrower applying with you"  OnCheckedChanged="ShowHide(this)" />


public void ShowHide(object sender, EventArgs e)
{
 
  if (chkCoBorrower.Checked)
  {
   //show/hide panel
  }
  else
  {
   //show/hide panel
  }
}
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

SheritlwAuthor Commented:
Hi,

It still doesn't work.

Thanks
<td class="wizardfont" colspan="3">
           <asp:CheckBox ID="chkCoBorrower" runat="server" CssClass="wizardfont" 
           text="Please check this box if you have a co-borrower applying with you" OnCheckedChanged="ShowHide" />
           
           </td>


Public Sub ShowHide()
        Dim chk As CheckBox = wzd.Controls(0).FindControl("chkCoBorrower")
        If Not chk Is Nothing Then


            If chk.Checked Then
                Me.tblCoBorrower.Visible = True
            Else
                Me.tblCoBorrower.Visible = False
            End If

        End If
    End Sub

Open in new window

0
krunal_shahCommented:
Hi,
can you please specify what is tblCoBorrower? is it a server side table?
does your code giving any error?
0
CodeCruiserCommented:
Try changing this

OnCheckedChanged="ShowHide(this)

to this
OnCheckedChanged="JavaScript:ShowHide(this)"
0
SheritlwAuthor Commented:
That didn't work either.

The table is within a wizard step.  I have tried all different types of code combination's but can't get it to work.
Could you provide an example that would show/hide the table when checkbox is clicked.  The table needs to shrink/expand according to the checkbox value.

Thanks
0
CodeCruiserCommented:
Did you try my suggestion with your original JavaScript function?
0
SheritlwAuthor Commented:
yes, I did.  I received the error 'JavaScript' is not a member of 'ASP.mortgage_loanapplynow_aspx'.
I also tried changing OnCheckedChanged to OnClick.  I didn't get an error, but it didn't work either.
Thanks


<td class="wizardfont" colspan="3">
           <asp:CheckBox ID="chkCoBorrower" runat="server" CssClass="wizardfont" 
           text="Please check this box if you have a co-borrower applying with you" OnCheckedChanged="JavaScript:ShowHide(this)" />
           
           </td>
           
       </tr>  
       
       </table>
                       
         <script language="javascript" type="text/javascript">

             function ShowHide(obj) {
                 if (!obj.checked)
                     document.getElementById('tblCoBorrower').style.visibility = "visible";
                 else
                     document.getElementById('tblCoBorrower').style.visibility = "hidden";

             }
       
</script>           

Open in new window

0
CodeCruiserCommented:
Use this example to add the onclick event hander for the checkbox on page load

http://will.id.au/blog/archive/2005/02/17/enabling-disabling-aspnet-checkbox-using-javascript
0
SheritlwAuthor Commented:
Hi,
I converted the code to VB 2008 and tried it, with no luck.
I think it may have something to do with the wizard step the table is in.  
I have tried to debug, but the checkbox doesn't seem to register the click and if it does, it doesn't send to any procedure, whether script or code.
Any other ideas?
Thanks
0
CodeCruiserCommented:
For it to register the click with the code behind, you need to set the AutoPostBack to True in the checkbox.
0
SheritlwAuthor Commented:
Hi,
I tried that and still no response.  
I've added the code I am currently using in hopes that you will review it.
Thanks
<script runat="server">

    Private Sub ShowHide_OnClick(ByVal sender As Object, ByVal e As EventArgs)
        Dim chk As CheckBox = wzd.Controls(0).FindControl("chkCoBorrower")
        Dim tbl As Table = wzd.Controls(0).FindControl("tblCoBorrower")
        If Not chk Is Nothing Then


            If chk.Checked Then
                tbl.Visible = True
            Else
                tbl.Visible = False
            End If

        End If
    End Sub


</script>

        <td class="wizardfont" colspan="3">
           <asp:CheckBox ID="chkCoBorrower" runat="server" CssClass="wizardfont" 
           text="Please check this box if you have a co-borrower applying with you" AutoPostBack="true" OnClick="ShowHide_OnClick" />
        </td>

Open in new window

0
CodeCruiserCommented:
If you step through the code, what lines get executed?
0
SheritlwAuthor Commented:
None.  When I click the checkbox, the showhide_click does not get executed.
0
SheritlwAuthor Commented:
Wow, it looks like the Wizard control doesn't allow a simple onclick event.
So, after searching all over the internet, I found some different types of workarounds that would accomplish what I needed.
My need was to not show a table unless the user clicked a checkbox.
What I had to do is make the table/information a new wizard step, so the step before had the checkbox.
I then had to assign procedures to the events that the wizard control provides.  That let me check to see if the next button, previous button etc. was selected.  From there I could find out what step the user was on and then check whether the checkbox was selected, if it was, I show the next step, otherwise I skip a step.  
I had to use a boolean to determine if the previous button was selected so that I could go back an extra step.
I'm sure the code I put together needs to be refined, and hopefully as I learn more, I will figure out how to do this better, but it works.

Thanks for your help

<%@ Page Title="Seneca Apply Now" Language="VB" MasterPageFile="~/MasterPages/Site.master" AutoEventWireup="false" CodeFile="LoanApplyNow.aspx.vb" Inherits="Forms_LoanApplyNow" %>


<script runat="server">

    Private Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        Trace.Write("Page init", "Init fired.")
    End Sub

Private Sub ViewChanged(ByVal sender As Object, ByVal e As System.EventArgs)
    'Validate the page on each view change
    
        
    Trace.Write("ViewChanged", "Just after calling validate")
    End Sub
    
    Private Sub SideBarClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
        Trace.Write("SideBarClick", "SideBar Clicked")
        MoveWizardStep(e, False)
    End Sub

Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    
        
    Trace.Write("Page_Load", "Page event called")
    End Sub
    
Private Sub StartWizard(ByVal sender As Object, ByVal e As EventArgs)
    'Redirect to some other page...here I just move to start.
        
        wzd.MoveTo(wzd.WizardSteps(0))
End Sub

    Private Sub NextButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)
        
        If Page.IsValid Then
            MoveWizardStep(e, False)
        End If
            
    End Sub
    
    Private Sub PreviousButtonClick(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs)

        If Page.IsValid Then
            MoveWizardStep(e, True)
        End If
        
    End Sub
    
    Private Function GetStepIndex(ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs, ByVal bPrev As Boolean) As Integer
        Dim StepsCollection As WizardStepCollection = wzd.WizardSteps
        Dim wStep As WizardStep = StepsCollection(e.NextStepIndex)
        Dim i As Integer = 0
        
        Select Case wStep.ID
            Case "wzdContactStep"
                i = 0
                Exit Select
            Case "wzdPropertyStep"
                i = 1
                Exit Select
            Case "wzdSSDobStep"
                i = 2
                Exit Select
            Case "wzdCoBorrower"
                i = 3
                Exit Select
            Case "WizardStep4"
                i = 4
        End Select
        
        Return i
        
    End Function
    
    
    Private Sub SetLabels(ByVal i As Integer)

        Dim lblTitle As Label = Me.wzd.FindControl("HeaderContainer").FindControl("lblTitle")
        Dim lbl As Label = wzd.Controls(0).FindControl("lblName")
        
        
        If Not lblTitle Is Nothing Then

            Select Case i
                Case 0 '"wzdContactStep"
                    lblTitle.Text = "Enter Contact information."
                    Exit Select
                Case 1 '"wzdPropertyStep"
                    lblTitle.Text = "Enter Property Information."
                    Exit Select
                Case 2 '"wzdSSDobStep"
                    lblTitle.Text = "Enter Borrower Information"
                    If Not lbl Is Nothing Then
                        lbl.Text = Me.txtFirstName.Text & " " & Me.txtMI.Text.ToString & " " & Me.txtLastName.Text
                    End If
                    Exit Select
                Case 3 '"wzdCoBorrower"
                    lblTitle.Text = "Enter Co-Borrower Information"
                    Exit Select
       
        
            End Select
        End If
    End Sub
           
    Private Sub MoveWizardStep(ByVal e As System.Web.UI.WebControls.WizardNavigationEventArgs, ByVal bPrev As Boolean)
        
        Dim i As Integer = GetStepIndex(e, bPrev)
        
        If bPrev = True And i = 4 Or bPrev = False And i = 3 Then
            'If i = 2 Or i = 3 Or i = 4 Then
        
            Dim chk As CheckBox = wzd.Controls(0).FindControl("chkCoBorrower")
            
            If Not chk Is Nothing Then

                If chk.Checked Then
                    wzd.MoveTo(wzd.WizardSteps(i))
                
                Else
                    If bPrev Then
                        i = i - 1
                    Else
                        i = i + 1
                    End If
                    wzd.MoveTo(wzd.WizardSteps(i))
                End If

            End If
        End If
        
        SetLabels(i)
        
    End Sub

</script>

<asp:Wizard ID="wzd" DisplaySideBar="true" runat="server" Width="100%" Font-Names="Verdana" 
            onactiveviewchanged="ViewChanged" 
            onnextbuttonclick="NextButtonClick" 
            onpreviousbuttonclick="PreviousButtonClick"
            onsidebarbuttonclick="SideBarClick"
            >

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CodeCruiserCommented:
The code looks fine to me. I tried myself to build a test page but the onclick was never executing. I then got busy at work and could not try it again.
0
SheritlwAuthor Commented:
HI CodeCruiser,

The wizard is such a pain and the code is get way to long.  I think it is good for a few page form, but not anything bigger.  
I am making separate forms for each step, omitting the wizard control.

Thanks again for all your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.