Question about forms based on dropdown selection

[Shazam0527]

I've created forms before, but never in such a way.

What I'm looking to do is create 5 different forms, but have only 1 form come up based on the dropdown menu selection.

For example (and to be more clear) - if option 1 pops up
__________________________
| option 1 |
--------------------------

Then the form asking for

Name:______________
Age: ______________

________
|submit|
--------

comes up and the submit button emails the form off to [e-mail]. But if its on option 2 the form asks for What color is the sky, and how many fingers on one hand? (they are bogus questions, I just need to figure out how to make multiple forms and each one populates because of a pulldown)

I hope I'm clear on this, as this is frustrating me beyond banging my head against a wall.

Any help would be appreciated.

J.

[penders]

How far have you got? You'll need JavaScript. In fact, this is really a JavaScript question so is perhaps best suited for the JavaScript forum [webmasterworld.com].

- Create your 5 forms, one after another in the source. Give the controls unique names across all forms.

- I would put each form in an additional DIV container. Each with a unique ID.

- In JavaScript, as the page loads, hide all forms (DIV containers) except the first one, and make this the first selection in your dropdown. To hide the form, set obj.style.display="none" on the DIV container object. To show it, set obj.style.display="block".

- In the onchange event for your dropdown hide all the forms and make the one selected visible.

You probably don't need any special CSS.

Welcome to WebmasterWorld. :)

[Demaestro]

If it we me, I would create each form in the page, and place them each in their own div with a unique id.

<div id="this_form">
<form action="action">
name
Age
[submit]
</form>
</div>

<div id="that_form">
<form action="action">
name
Age
[submit]
</form>
</div>

Then using CSS set the container divs to be hidden

#this_form {
visibility:hidden;
}

#that_form {
visibility:hidden;
}

Then add some Javascript to the drop down box so that when someone selects something it will call a function to show the form

<select id="form_selector" onBlur="showForm();">
<option value="this_form>Show me this form</option>
<option value="that_form>Show me that form</option>
</select>

JS:
function showForm() {
var forms = ['this_form, 'that_form'];
var form_to_show = document.getElementById('form_selector').value;

for (form in forms)
{
if (form == form_to_show) {
document.getElementById(form).style.visibility = block;
} else {
document.getElementById(form).style.visibility = hidden;
}
}
}

[Shazam0527]

You guys are awesome! You both gave me good advice to work from and I am grateful for your assistance. And thank you for this kind welcome to webmasterworld! :)

Again, you guys are awesome.. tyvm!

J.

[penders]

You're welcome.

Just to add, setting

.style.visibility='hidden'

hides the element from view, but the space that was occupied by the element is still... occupied (by what looks like empty space). Setting

.style.display='none'

hides the element from view AND allows elements that follow it to occupy the space that it once occupied.

[Demaestro]

Hey Shazam... welcome to WebmasterWorld!

penders is right about the style, thanks for the clarification.

I always mess those up and the only thing I am consistent in is using the wrong one everytime.

If you have more questions Shaz keep posting.

[rocknbil]

I probably wouldn't take any of these approaches - and if I did it would just be ajax to post data to a div and a select JS. I'd start it all server side, then add the Javascript to enhance the application.

<selst name="whatever" id="whatever" onchange="this.form.submit();">
<option value="">Select</option>
...
</select>
(Also contains a submit button which we can hide with Javascript, if it's enabled.)

if (isset($_POST['whatever']) and ! empty($_POST['whatever'])) { 
 switch ($_POST['whatever']) { 
 case 1: 
 include('form1.txt'); 
 break; 
 case 2: 
 include('form2.txt'); 
 break; 
} 
else { 
 if (isset($_POST['your-question'])) { 
 process_the_data_and_respond(); 
 } 
 else { include('select-list-form.txt'); } 
} 

Don't get me wrong, there's nothing wrong with Javascript, but it is meant to be a progressive enhancement, not a core foundation. I'd build it this way first, then go add the JS as you please to enhance the front end.

}

[Shazam0527]

Thanks guys, I'm surprised I hadn't found this board before :)

@Rocknbil - I'd love to try ajax but unfortunately I've never played with it, and wouldn't even know where to begin or how to implement it.

Here is what I have so far, but it seems i'm overlooking something.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Forms Test</title>
<style type="text/css">
#initialconversation {
visibility:hidden;
}
#candidateinterviewedbymd {
visibility:hidden;
}
</style>
</head>
<script type="text/javascript">
function showForm() {
var forms = ['initialconversation', 'candidateinterviewedbymd'];
var form_to_show = document.getElementById('form_selector').value;

for (form in forms)
{
if (form == form_to_show) {
document.getElementById('form').style.visibility ='block';
} else {
document.getElementById('form').style.visibility ='hidden';
}
}
}
</script>

<select id="form_selector" onBlur="showForm();">
<option value="initialconversation">Initial Conversation</option>
<option value="candidateinterviewedbymd">Candidate interview by Medical Director</option>
</select>
<div id="initialconversation">
<form action="action" method="get" name="initialconversation">
Interview Performed by:<input name="Interview Performed By:" type="text" size="25" /><br />
Date:<input name="date" type="text" /><br />
Notes:<textarea name="notes" cols="40" rows="10" wrap="physical"></textarea><br />
Initial Conversation Complete:<input name="initialconvocomplete" type="checkbox" value="" /><br />
Next Interview Referred to:<input name="nextinterview" type="text" size="40" />
</form>
</div>
<div id="candidateinterviewedbymd">



<body>
</body>
</html>


Any advice is greatly appreciated :) And I hope to be a participating member of the forums. I'm definitely NOT an expert programmer, but I may be able to put my 2 cents in to help every now and then..

J.

[penders]

Yes, @rocknbil definitely has a point. This could well be the preferred method to handle multiple forms. The ajax/javascript is just an optional extra - it's not required. The only thought, however, is can the user switch between forms before submitting and switch back as they please? Although this would be a problem with both methods.

[Shazam0527]

This is the error I'm getting...

This is line 28: document.getElementById('form').style.visibility ='hidden';


Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; InfoPath.3; Tablet PC 2.0)
Timestamp: Wed, 22 Jun 2011 18:37:58 UTC


Message: Object required
Line: 28
Char: 1
Code: 0
URI: file:///C:/websites/html%20forms/Untitled-3.html

Isn't the object 'form'?

[Demaestro]

Here you go:

I changed a couple things, that I will explain

1) rather than use the visibility property I changed it to use the display property
-->display:none;
-->display:block;

I changed this in the CSS and the JS.

2) Using a for loop in the JS only sets the index of the array, it doesn't grab items from it. I changed the for loop to use the index of the array.

3) I changed onBlur() in the drop down to onChange()

I just tried this code and it works.

I also agree with what RnB is saying but only to certain point, imo sometimes it is better to take the processing onus off the server and put it on the client. When determining what method to use one must considering scaling, bandwidth, processing power and other things. Because of the small scale of this logic a server side implementation may be better, however that doesn't make this method wrong.


*****************************************
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Forms Test</title>
<style type="text/css">
#initialconversation {
display:none;
}
#candidateinterviewedbymd {
display:none;
}
</style>
</head>
<script type="text/javascript">
function showForm() {
var forms = ['initialconversation', 'candidateinterviewedbymd'];
var form_to_show = document.getElementById('form_selector').value;

for (ind in forms)
{
if (form[ind] == form_to_show) {

document.getElementById(forms[ind]).style.display ='block';
} else {
document.getElementById(forms[ind]).style.display ='none';
}
}
}
</script>

<select id="form_selector" onchange="showForm();">
<option value="initialconversation">Initial Conversation</option>
<option value="candidateinterviewedbymd">Candidate interview by Medical Director</option>
</select>
<div id="initialconversation">
<form action="action" method="get" name="initialconversation">
Interview Performed by:<input name="Interview Performed By:" type="text" size="25" /><br />
Date:<input name="date" type="text" /><br />
Notes:<textarea name="notes" cols="40" rows="10" wrap="physical"></textarea><br />
Initial Conversation Complete:<input name="initialconvocomplete" type="checkbox" value="" /><br />
Next Interview Referred to:<input name="nextinterview" type="text" size="40" />
</form>
</div>

<div id="candidateinterviewedbymd">
This is my text
</div>

<body>
</body>
</html>
*****************************************

[Shazam0527]

I can't thank you enough for the effort you guys are putting into my major headache ;)

But when I try to run your version - nothing happens except for the pulldown menu. What browser are you using? I tried IE and Chrome. both with the same result.. No errors, but no responses.

[Demaestro]

Hey Sham... no prblem

Looks like I missed a "s" on line 21


This:
if (form[ind] == form_to_show) {

Needs to be this:
if (forms[ind] == form_to_show) {

[Shazam0527]

Actually I stand corrected, I'm getting an error

form is not defined - Line 24

Which I figured out its just formS lol :) THANK YOU! :)

[Shazam0527]

Awesome :) ty again for your replies guys! :) you're the best!

[Demaestro]

Good luck and post back if you need to.

[penders]

This is line 28: document.getElementById('form').style.visibility ='hidden';

Message: Object required
Line: 28

Just FYI, this statement

document.getElementById('form')

searches the document for an element with id="form". There isn't one, so it doesn't return an object as expected. You then try and access the style property of this non-object, hence the error.

[Shazam0527]

This works perfectly now.. :) Thank you all for your amazing assistance! :) I will try to repay in kind by helping others when I can.. :)

[rocknbil]

Also avoid naming/id'ing things that will possibly conflict with reserved words - form submit, search, reset, these are all DOM objects or Javascript functions - use things like 'form-selector' or 'submit-button'.

I'll also point your attention to this:

<select id="form_selector" onBlur="showForm();">

A better handler would be to add a blank first option

<option value="">Select</option>

and use the onChange event instead. What if the user changes it, nothing happens, so they sit there thinking your page is broken? The second advantage of **always** setting a blank first element is it allows the user to reset their selections without selecting anything. All you have to do in your Javascript is:

if (object.selectedIndex > 0) { do_something(); }

The only thought, however, is can the user switch between forms before submitting and switch back as they please?

Right, without JS a submit will be required each time, which is why you could go back and add JS:

I'd love to try ajax but unfortunately I've never played with it, and wouldn't even know where to begin or how to implement it.

All Ajax is is a set of functions and methods to post data to a server and write the response to an area of the page without submitting/refreshing the entire page. It's not something you need all the time, but comes in handy.

Get started after you get it working. [w3schools.com]:-)

[Shazam0527]

Yeap, I put a "Choose an option" select in there after the whole thing started working ;) Great suggestions, ty again!