PDA

View Full Version : Display/Hide form questions based on previous answers

bigolslabomeat
06-26-2002, 12:38 PM
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!
whackaxe
06-26-2002, 01:56 PM
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
bigolslabomeat
06-26-2002, 02:00 PM
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! :D

Rich
whackaxe
06-26-2002, 02:25 PM
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)
bigolslabomeat
06-26-2002, 02:29 PM
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?
whackaxe
06-26-2002, 02:37 PM
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:p
bigolslabomeat
06-26-2002, 02:54 PM
cheers for your help, much appreciated. Will try it out when I get this damn Flash movie to do what I want it to!
whammy
06-26-2002, 11:44 PM
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. :)
bigolslabomeat
06-27-2002, 11:30 AM
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!
tamienne
06-27-2002, 08:52 PM
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";
}
}
whammy
06-27-2002, 11:38 PM
You're right, big. I was just offering another alternative; besides you can always use that sort of thing!