Web Analytics Made Easy - StatCounter Display/Hide form questions based on previous answers - CodingForum

Announcement

Collapse
No announcement yet.

Display/Hide form questions based on previous answers

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Display/Hide form questions based on previous answers

    Is there any way to either hide or disable sections of forms based on the answers to previous questions in the form?

    I'm finding this hard to describe but i'll try and give an example. Say the user is asked their marital status, if they answer "married" then the form asks their spouse details. If however they answer "single" then the spouse details section is either disabled or hidden.

    Any ideas?

    TIA, Rich

    P.S. It's ending up on as ASP page if that makes a difference!
    Tags: None
  • #2
    well you are going to have to check every time someone changes something in the form for example for a select box try this

    <script>
    function checkselect()
    {
    if (document.theselect.options[theform.theselect.selectedIndex].value == single)
    {document.theform.offspring.disable = true }
    }
    </script>

    <form name="theform">

    <select name="theselect" onchange="checkselect()">
    <option value="married">married
    <option value="single">single
    </select>

    <input name="offspring">

    </form>

    that should work
    photoshop too expensive? use the GIMP! www.gimp.org

    Comment

    • #3
      cheers, just to make it more complex (sorry!) is there any way of putting it into DIVs? In the actual form I'm doing this in there are 4 sections and only one needs to be filled in based on a dropdown selection near the start of the form. I know there are easier ways than this (i.e. having a page before that asks what section you need to fill out) but this is the way i've been told to do it!

      Cheers for your help, i know it will work, just trying to make the job as small as possible!

      Rich

      Comment

      • #4
        if you mean that you want 4 differnt forms depending on a select then here goes!

        <head>
        <script>
        function checkselect()
        {
        form1.style.visibility = 'hidden'
        form2.style.visibility = 'hidden'
        form3.style.visibility = 'hidden'
        form4.style.visiblilty = 'hidden'

        if (document.theselect.options[theform.theselect.selectedIndex].value == case1)
        {form1.style.visibility = 'visible'}
        else
        if (document.theselect.options[theform.theselect.selectedIndex].value == case2)
        {form2.style.visibility = 'visible'}
        else
        if (document.theselect.options[theform.theselect.selectedIndex].value == case3)
        {form3.style.visibility = 'visible'}
        else
        if (document.theselect.options[theform.theselect.selectedIndex].value == case4)
        {form4.style.visibility = 'visible'}
        }
        </script>

        <style>
        .formdiv
        {
        position: absolute;
        pixel-left: 10px;
        pixel-top: 10px;
        }
        </style>
        </head>

        <body>
        <form name="theform">
        <select name="theselect">
        <option value="case1">case 1
        <option value="case2">case 2
        <option value="case3">case 3
        <option value="case4">case 4
        </select>
        </form>

        <div id="form1" class="formdiv">
        <!-- place first form here -->
        </div>

        <div id="form2" class="formdiv">
        <!-- place first form here -->
        </div>

        <div id="form3" class="formdiv">
        <!-- place first form here -->
        </div>

        <div id="form4" class="formdiv">
        <!-- place first form here -->
        </div>
        </body>

        that should do(i hope)
        photoshop too expensive? use the GIMP! www.gimp.org

        Comment

        • #5
          wow! I'm impressd with the speed, thank you!

          One last question (i think!) will that work with one big form with those divs internally? as in one set of <form></form> tags and each of those divs around a group of options in the form?

          Comment

          • #6
            it should do i think, try it both ways. i just split them into differnet forms for simpler reading. and as for the speed, well im on revision leave and my exam is tomorrow but hey
            photoshop too expensive? use the GIMP! www.gimp.org

            Comment

            • #7
              cheers for your help, much appreciated. Will try it out when I get this damn Flash movie to do what I want it to!

              Comment

              • #8
                In ASP you can decide what to display after a form is submitted, without using any client-side code. i.e.:

                <%
                maritalstatus = Request.Form("maritalstatus")
                If maritalstatus = "single" Then %>
                <!-- Display your "single" form here in HTML -->
                <% ElseIf maritalstatus = "married" Then %>
                <!-- Display your "married" form here in HTML -->
                <% ElseIf maritalstatus = "divorced" Then %>
                <!-- Display your "divorced" form here in HTML -->
                <% End If %>

                But that's the "ugly" or "spaghetti code" way of doing things...

                Even better, you can have your separate forms (or the relevant parts) as subroutines (and also include files if you want)... and just call them programatically, i.e.:

                <%
                maritalstatus = Request.Form("maritalstatus")

                Display HTMLHeader()

                If maritalstatus = "single" Then
                SingleForm()
                ElseIf maritalstatus = "married" Then
                MarriedForm()
                ElseIf maritalstatus = "divorced" Then
                DivorcedForm()
                End If

                Display HTMLFooter()
                %>

                Just another way to accomplish this.
                Former ASP Forum Moderator - I'm back!

                If you can teach yourself how to learn, you can learn anything. ;)

                Comment

                • #9
                  if you did that tho, surely you would have to have the section decided before the page is loaded? I want ity so that half way through the page the selection is there and there is no redirect to another page. correct me if I'm wrong, i'm not so hot on ASP!

                  Comment

                  • #10
                    One thing to keep in mind when you use divs is that in NS it's not considered part of the same form. The form fields won't even show up unless you wrap them with another set of form tags. If you're lucky and don't need to worry about Netscape then you can use IE's display. Makes things nice & easy.

                    <DIV ID="spousalsection" STYLE="display:none">
                    <INPUT TYPE="text" NAME="spousename" VALUE="">
                    </DIV>

                    function SpouseSection(bDisplay) {

                    if (bDisplay == "show") {
                    document.getElementById("spousalsection").style.display = "";
                    } else {
                    document.getElementById("spousalsection").style.display = "none";
                    }
                    }

                    Comment

                    • #11
                      You're right, big. I was just offering another alternative; besides you can always use that sort of thing!
                      Former ASP Forum Moderator - I'm back!

                      If you can teach yourself how to learn, you can learn anything. ;)

                      Comment

                      Previous template Next
                      Working...
                      X