drop down lists

J

JMcC

hello,

Im trying to do a wee trick with drop down lists. Im creating a form
with 4 drop down lists on it that a user has to fill in. I dont want
to overwhelm the user so what I want is when the page loads up only 1
drop down list is present and then when a selection is made in that
list the next drop down list appears. To do this I was looking into
using a JavaScript function but I keep running into an error and im not
to sure how to fix it. Could someone please take a look at this code
and see if they can help.. Thanks and regards

<html>
<head>
<title>test</title>
<style>
.vis1 { visibility:visible }
.vis2 { visibility:hidden }
</style>

<script type = "text/javascript">
<!-- Hide JavaScript from older browsers

function make_visible(id_no)
{
drop = document.getElementById(id_no);
drop.class="vis1";
}

// End hiding JavaScript from older browsers -->
</script>

</head>

<body>

<form name="list1" action="test.php" method="post">

<select name="test1" id="test1" class="vis1"
OnChange="make_visible('test2');">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>

<select name="test2" id="test2" class="vis2"
OnChange="make_visible('test3');">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>

<select name="test3" id="test3" class="vis2"
OnChange="make_visible('test4');">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>

<select name="test4" id="test4" class="vis2">
<option value="nill">please choose</option>
<option value="1">number 1</option>
<option value="2">number 2</option>
<option value="3">number 3</option>
</select>

<br /><br />
<input type="submit" name="submit" value="submit" />

</form>
</body>
</html>
 
H

Harlan Messinger

JMcC said:
hello,

Im trying to do a wee trick with drop down lists. Im creating a form
with 4 drop down lists on it that a user has to fill in. I dont want
to overwhelm the user so what I want is when the page loads up only 1
drop down list is present and then when a selection is made in that
list the next drop down list appears. To do this I was looking into
using a JavaScript function but I keep running into an error and im not
to sure how to fix it. Could someone please take a look at this code
and see if they can help.. Thanks and regards
Click to expand...

Once you get this running, try using the keyboard to select an item down
toward the bottom of the first list, and see if you like the way in
which the screen keeps changing every time you scroll one item down,
instead of only when you reach your final selection.

Or go to www.wordreference.com. The listbox there isn't rigged up to
fire automatically, but the radio buttons below are. Type an English
word into the blank labeled "Enter a Word". Then tab to the "Choose a
Dictionary, and use your Down key to select English to Italian. Except
you can't, because as soon as you move down one step, the trigger is
fired and a Spanish-to-English look-up occurs.
 
J

Jukka K. Korpela

JMcC said:
Im trying to do a wee trick with drop down lists. Im creating a form
with 4 drop down lists on it that a user has to fill in. I dont want
to overwhelm the user so what I want is when the page loads up only 1
drop down list is present
Click to expand...

That's hardly a good approach. What matters is the size and complexity of
the form as a whole. Hiding parts of it does not help. This is a case where
honesty pays off: the user should get a good idea of the form, so that you
get responses from people who made an informed decision to fill it out.
Besides, they will only see the part that fits in the browser window anyway,
but a simple design lets them estimate the total size from the vertical
scroll bar - and easily glimpse over the form using scrolling.

Thus, in addition to being fairly complex to implement, the "piecewise"
approach probably makes the form less convenient to fill out.

There's a serious problem in your intended implementation:
<style>
.vis1 { visibility:visible }
.vis2 { visibility:hidden }
</style>
Click to expand...

So anything in class "vis2" is and will remain hidden when CSS is in use but
JavaScript isn't. A safer approach would be to remove that <style> element
and have some JavaScript code that initially sets the desired elements to
hidden state.
 
J

Jonathan N. Little

JMcC said:
hello,

Im trying to do a wee trick with drop down lists. Im creating a form
with 4 drop down lists on it that a user has to fill in. I dont want
to overwhelm the user so what I want is when the page loads up only 1
drop down list is present and then when a selection is made in that
list the next drop down list appears. To do this I was looking into
using a JavaScript function but I keep running into an error and im not
to sure how to fix it. Could someone please take a look at this code
and see if they can help.. Thanks and regards
Click to expand...

Well I question the usefulness but you have a real DOM error here.
<html>
<head>
<title>test</title>
<style>
.vis1 { visibility:visible }
.vis2 { visibility:hidden }
</style>

<script type = "text/javascript">
<!-- Hide JavaScript from older browsers

function make_visible(id_no)
{
drop = document.getElementById(id_no);
drop.class="vis1";
Click to expand...


that is drop.className not drop.class

also it is a good idea to limit the scope of variables in functions, use
the 'var' keyword

var drop = document.getElementById(id_no);

else drop is global and can lead to nasty debugging issues.
 
J

JMcC

Im just doing it the way I have been asked to do it.. I have been
asked not too put too much information on the 1 page and the user will
be made aware that there are more steps to go.. I have been fiddling
about with it and have figured out a way to generate new option boxes
with the following code

<html>
<head>
<title>test</title>

<script language="JavaScript" type="text/javascript">
<!--
var prod = new Array ('Select an option', 'option1', 'option2',
'option3', 'option4');

function NewSel(me)
{
var sel1 = document.createElement('SELECT');
sel1.setAttribute("name", me);

for (var zxc0=0;zxc0<prod.length;zxc0++)
{
var o = document.createElement('OPTION');
o.value=prod[zxc0];
o.appendChild(document.createTextNode(prod[zxc0]));
sel1.appendChild(o);
}
document.getElementsByTagName('form')[0].appendChild(sel1);
}

//-->
</script>

</head>

<body>

<form action="test.php" method="post" >

<select name="test1" id="test1" OnChange="NewSel('test2');">
<option value="one">please choose</option>
<option value="two">number 1</option>
<option value="three">number 2</option>
<option value="four">number 3</option>
</select>

<br /><br />
<input type="submit" name="submit" value="submit" />

</form>
</body>

</html>

The problem with this is that I can only get the new option box
appended to the end of the form (after the submit button). What I
really want is for it to be appended right next to the current select
box inside the form. I know the problem is with the line

document.getElementsByTagName('form')[0].appendChild(sel1);

but when I change form to select it will not display any new select box

Thanks
 
J

Jukka K. Korpela

JMcC said:
Im just doing it the way I have been asked to do it..
Click to expand...

You're new to Usenet, are you not? You are not quoting or paraphrasing to
indicate what you are responding to, and you apparently did not read the
answers comprehensively.

"Asked to do it" is a lame excuse. It's a wrong approach, and you should
tell that to your boss or client. Did you?
I have been fiddling
about with it and have figured out a way to generate new option boxes
Click to expand...

So now you have managed to design something that is even more broken than
the previous approach: when scripting is disabled, the other menus are there
not at all, not as hidden via CSS (which could be overridden).

To summarize, you have found a non-solution to a problem that didn't exist
before someone got the idea of making just part of a form visible. Do you
really want to get help in polishing it, instead of finding a way to avoid
creating the problem?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I make the ddChild dropdown conditionally required and its selected value should not be the initial value(which is value="") 2
action_page.php form 2
Dependent Drop Downs 1
Add Image and label dynamically inside the dropdown 2
I dont get this. Please help me!! 2
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

No members online now.
Total: 61 (members: 0, guests: 61)
Robots: 456

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,816
Latest member
SapanaCarpetStudio

Latest Threads

Top