Updating form based on user input

**Matthew Lock** · Jul 23 '05, 04:49 PM

Re: Updating form based on user input

Check this

http://www.litotes.demon.co.uk/example_scripts/dependent_select.html

**RobG** · Jul 23 '05, 04:49 PM

Re: Updating form based on user input

Raffi wrote:[color=blue]
> Hi folks,
>
> I'm new to JavaScript and need some help.
>
> I have a form with a select field. Depending on what is selected in
> this field, I want to display or not display another select field. For
> example first field asks the user if they drive, if the user selects
> "NO" the form doesn't change. If they select "YES", another field
> appears with different makes to chose from. If they change back to "NO"
> the second field dissapears again.
>
> Any help is appreciated.
>[/color]

Doing this can get a bit complex, because you have to ensure
that everything still works if javascript is disabled.
Therefore, you need to consider your page layout when writing
your JavaScript.

The script below ensures that all controls are available when
the page loads, even if JS is disabled. If it's enabled, the
fields to be hidden are included in the onload function (though
they could be in a function just after where they are added to
the page to stop them being displayed then hidden if the page
loads slowly).

The extra field and it's label are shown when "drive" is
selected. The hard part is determining how to show/hide the
label associated with the options. I've used a label and the
parentNode relationship to hide/show it. I've also disabled
hidden fields so they aren't submitted, but that's probably not
necessary.

You also have to deal with what happens when "reset" is clicked,
you may end up with "drive" not selected but the drive options
still displayed. Hence the reset onclick must call the
initForm() function to ensure the extra options are hidden.

If you want the hidden controls to take up zero space when
hidden, use style.display = 'none' and style.display=' '

If you put the controls inside table elements (pretty common for
forms) you may want to hide/show the entire row containing the
label and option list, but then you'll have to use a different
method, either getElementById or go up the DOM from the option
until you find the parent TR, then hide it.

hideStuff() and showStuff() functions are designed to take as
many arguments as you like, so you can add several elements to
hide if you want.

You may also want to consider using a set of radio buttons
rather than option lists if there are only 4 or 5 options. It
saves clicks and users can see all the options without doing
anything (much preferred in my book). You can also attach the
hide/show stuff directly to the appropriate button rather than
having to find it using logic as is required of an option list.

Have fun with it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><ti tle>demo</title>
<script type="text/javascript">
function showExtra(x,y) {
if (x[x.selectedIndex].value == 'drive') {
showStuff(y);
} else {
hideStuff(y);
}
}
function hideStuff() {
var n = arguments.lengt h;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibili ty = 'hidden';
arguments[i].disabled = true;
if (arguments[i].parentNode.nod eName == 'LABEL') {
arguments[i].parentNode.sty le.visibility = 'hidden';
}
}
}
}
}
function showStuff() {
var n = arguments.lengt h;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibili ty = 'visible';
arguments[i].disabled = false;
if (arguments[i].parentNode.nod eName == 'LABEL') {
arguments[i].parentNode.sty le.visibility = 'visible';
}
}
}
}
}

function initForm() {
hideStuff(docum ent.forms['aForm'].elements['carType'])
}
</script>
</head>
<body onload="initFor m();">

<form name="aForm" action="">
<label for="travelMode ">Select a travel mode:
<select name="travelMod e" onchange=
"showExtra(this ,this.form.carT ype)">
<option value="walk">Wa lk</option>
<option value="cycle">C ycle</option>
<option value="drive">D rive</option>
</select></label>
<br>
<label for="carType">I f your mode is "drive"<br>
select a vehicle type:
<select name="carType">
<option value="sedan">S edan</option>
<option value="sedan">W agon</option>
<option value="sedan">C ommercial</option>
</select></label>
<br>
<input type="reset" value="Reset" onclick="initFo rm();"> 
<input type="submit" value="Submit">
</form>

</body>
</html>

--
Rob

**RobB** · Jul 23 '05, 04:49 PM

Re: Updating form based on user input

RobG wrote:[color=blue]
> Raffi wrote:[color=green]
> > Hi folks,
> >
> > I'm new to JavaScript and need some help.
> >
> > I have a form with a select field. Depending on what is selected in
> > this field, I want to display or not display another select field.[/color][/color]
For[color=blue][color=green]
> > example first field asks the user if they drive, if the user[/color][/color]
selects[color=blue][color=green]
> > "NO" the form doesn't change. If they select "YES", another field
> > appears with different makes to chose from. If they change back to[/color][/color]
"NO"[color=blue][color=green]
> > the second field dissapears again.
> >
> > Any help is appreciated.
> >[/color]
>
> Doing this can get a bit complex, because you have to ensure
> that everything still works if javascript is disabled.
> Therefore, you need to consider your page layout when writing
> your JavaScript.
>
> The script below ensures that all controls are available when
> the page loads, even if JS is disabled. If it's enabled, the
> fields to be hidden are included in the onload function (though
> they could be in a function just after where they are added to
> the page to stop them being displayed then hidden if the page
> loads slowly).
>
> The extra field and it's label are shown when "drive" is
> selected. The hard part is determining how to show/hide the
> label associated with the options. I've used a label and the
> parentNode relationship to hide/show it. I've also disabled
> hidden fields so they aren't submitted, but that's probably not
> necessary.
>
> You also have to deal with what happens when "reset" is clicked,
> you may end up with "drive" not selected but the drive options
> still displayed. Hence the reset onclick must call the
> initForm() function to ensure the extra options are hidden.
>
> If you want the hidden controls to take up zero space when
> hidden, use style.display = 'none' and style.display=' '
>
> If you put the controls inside table elements (pretty common for
> forms) you may want to hide/show the entire row containing the
> label and option list, but then you'll have to use a different
> method, either getElementById or go up the DOM from the option
> until you find the parent TR, then hide it.
>
> hideStuff() and showStuff() functions are designed to take as
> many arguments as you like, so you can add several elements to
> hide if you want.
>
> You may also want to consider using a set of radio buttons
> rather than option lists if there are only 4 or 5 options. It
> saves clicks and users can see all the options without doing
> anything (much preferred in my book). You can also attach the
> hide/show stuff directly to the appropriate button rather than
> having to find it using logic as is required of an option list.
>
> Have fun with it.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> <html><head><ti tle>demo</title>
> <script type="text/javascript">
> function showExtra(x,y) {
> if (x[x.selectedIndex].value == 'drive') {
> showStuff(y);
> } else {
> hideStuff(y);
> }
> }
> function hideStuff() {
> var n = arguments.lengt h;
> if (n > 0) {
> for (var i=0; i<n; i++) {
> if (arguments[i].style) {
> arguments[i].style.visibili ty = 'hidden';
> arguments[i].disabled = true;
> if (arguments[i].parentNode.nod eName == 'LABEL') {
> arguments[i].parentNode.sty le.visibility = 'hidden';
> }
> }
> }
> }
> }
> function showStuff() {
> var n = arguments.lengt h;
> if (n > 0) {
> for (var i=0; i<n; i++) {
> if (arguments[i].style) {
> arguments[i].style.visibili ty = 'visible';
> arguments[i].disabled = false;
> if (arguments[i].parentNode.nod eName == 'LABEL') {
> arguments[i].parentNode.sty le.visibility = 'visible';
> }
> }
> }
> }
> }
>
> function initForm() {
> hideStuff(docum ent.forms['aForm'].elements['carType'])
> }
> </script>
> </head>
> <body onload="initFor m();">
>
> <form name="aForm" action="">
> <label for="travelMode ">Select a travel mode:
> <select name="travelMod e" onchange=
> "showExtra(this ,this.form.carT ype)">
> <option value="walk">Wa lk</option>
> <option value="cycle">C ycle</option>
> <option value="drive">D rive</option>
> </select></label>
> <br>
> <label for="carType">I f your mode is "drive"<br>
> select a vehicle type:
> <select name="carType">
> <option value="sedan">S edan</option>
> <option value="sedan">W agon</option>
> <option value="sedan">C ommercial</option>
> </select></label>
> <br>
> <input type="reset" value="Reset" onclick="initFo rm();"> 
> <input type="submit" value="Submit">
> </form>
>
> </body>
> </html>
>
>
> --
> Rob[/color]

We interrupt this thread to bring you a brief announcement.

RobG: what did you use to post the above with?

It's beautiful.

Did you discover the secret formula to googlegroups? Please share.

RobB

**RobG** · Jul 23 '05, 04:49 PM

Re: Updating form based on user input

RobB wrote:
[...][color=blue]
> We interrupt this thread to bring you a brief announcement.
>
> RobG: what did you use to post the above with?
>
> It's beautiful.[/color]

<blush>
[color=blue]
>
> Did you discover the secret formula to googlegroups? Please share.[/color]

Nope, Thunderbird. I fixed my issues with my ISP (it was
actually Thunderbird's fault, it seems to fill up with posts and
stops getting new ones - unsubscribe then subscribe fixed it).

Incidentally, I re-read the OP's post and realised a set of
radio buttons were required anyway. Here's a better solution
(though the CSS purists will hate the use of nested tables...)

To the OP, note that it takes a bit of logic to ensure the page
looks the same when loaded, when re-loaded and when reset
regardless of the current radio button selected.

initForms() just runs through all forms and clicks the reset
button (a necessary precaution in this case).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><ti tle>demo</title>
<style type="text/css">
body {
font-family: arial, sans-serif;
}
.aCell {
border-top: 1px solid blue;
border-bottom: 1px solid blue;
}
</style>

<script type="text/javascript">

function hideStuff() {
var n = arguments.lengt h,
el, id;
for (var i=0; i<n; i++) {
id = arguments[i];
if ((el = document.getEle mentById(id)) ||
(el = document.all[id])) {
if (el.style) el.style.visibi lity = 'hidden';
}
}
}
function showStuff() {
var n = arguments.lengt h,
el, id;
for (var i=0; i<n; i++) {
id = arguments[i];
if ((el = document.getEle mentById(id)) ||
(el = document.all[id])) {
if (el.style) el.style.visibi lity = 'visible';
}
}
}
function doClick(t,x){
if (t.type == 'radio'){
if (t.value == 'yes') {
showStuff(x);
} else {
hideStuff(x);
}
} else if (t.type == 'reset') {
showStuff(x);
}
}

function initForms(){
if (document.forms ) {
var f = document.forms;
for (var i=0,len=f.lengt h; i<len; i++) {
f[i].reset();
}
}
}
</script>
</head>
<body onload="initFor ms();">

<form name="aForm" action="">
<table>
<tr>
<td class="aCell">D o you drive?</td>
<td class="aCell">
<input type="radio" name="drive" value="yes" checked
onclick="doClic k(this,'driveT' );this.blur();" >Yes
<br>
<input type="radio" name="drive" value="no"
onclick="doClic k(this,'driveT' );this.blur();" >No
</td>
<td class="aCell">
<table id="driveT">
<tr>
<td>Select a vehicle type:</td>
<td>
<select name="carType">
<option value="sedan">S edan</option>
<option value="sedan">W agon</option>
<option value="sedan">C ommercial</option>
</select></label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<input type="reset" value="Reset" onclick="
doClick(this,'d riveT');this.bl ur();
"> 
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>

</body>
</html>

--
Rob

**Raffi** · Jul 23 '05, 04:50 PM

Re: Updating form based on user input

RobG wrote:[color=blue]
> Raffi wrote:[color=green]
> > Hi folks,
> >
> > I'm new to JavaScript and need some help.
> >
> > I have a form with a select field. Depending on what is selected in
> > this field, I want to display or not display another select field.[/color][/color]
For[color=blue][color=green]
> > example first field asks the user if they drive, if the user[/color][/color]
selects[color=blue][color=green]
> > "NO" the form doesn't change. If they select "YES", another field
> > appears with different makes to chose from. If they change back to[/color][/color]
"NO"[color=blue][color=green]
> > the second field dissapears again.
> >
> > Any help is appreciated.
> >[/color]
>
> Doing this can get a bit complex, because you have to ensure
> that everything still works if javascript is disabled.
> Therefore, you need to consider your page layout when writing
> your JavaScript.
>
> The script below ensures that all controls are available when
> the page loads, even if JS is disabled. If it's enabled, the
> fields to be hidden are included in the onload function (though
> they could be in a function just after where they are added to
> the page to stop them being displayed then hidden if the page
> loads slowly).
>
> The extra field and it's label are shown when "drive" is
> selected. The hard part is determining how to show/hide the
> label associated with the options. I've used a label and the
> parentNode relationship to hide/show it. I've also disabled
> hidden fields so they aren't submitted, but that's probably not
> necessary.
>
> You also have to deal with what happens when "reset" is clicked,
> you may end up with "drive" not selected but the drive options
> still displayed. Hence the reset onclick must call the
> initForm() function to ensure the extra options are hidden.
>
> If you want the hidden controls to take up zero space when
> hidden, use style.display = 'none' and style.display=' '
>
> If you put the controls inside table elements (pretty common for
> forms) you may want to hide/show the entire row containing the
> label and option list, but then you'll have to use a different
> method, either getElementById or go up the DOM from the option
> until you find the parent TR, then hide it.
>
> hideStuff() and showStuff() functions are designed to take as
> many arguments as you like, so you can add several elements to
> hide if you want.
>
> You may also want to consider using a set of radio buttons
> rather than option lists if there are only 4 or 5 options. It
> saves clicks and users can see all the options without doing
> anything (much preferred in my book). You can also attach the
> hide/show stuff directly to the appropriate button rather than
> having to find it using logic as is required of an option list.
>
> Have fun with it.
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> <html><head><ti tle>demo</title>
> <script type="text/javascript">
> function showExtra(x,y) {
> if (x[x.selectedIndex].value == 'drive') {
> showStuff(y);
> } else {
> hideStuff(y);
> }
> }
> function hideStuff() {
> var n = arguments.lengt h;
> if (n > 0) {
> for (var i=0; i<n; i++) {
> if (arguments[i].style) {
> arguments[i].style.visibili ty = 'hidden';
> arguments[i].disabled = true;
> if (arguments[i].parentNode.nod eName == 'LABEL') {
> arguments[i].parentNode.sty le.visibility = 'hidden';
> }
> }
> }
> }
> }
> function showStuff() {
> var n = arguments.lengt h;
> if (n > 0) {
> for (var i=0; i<n; i++) {
> if (arguments[i].style) {
> arguments[i].style.visibili ty = 'visible';
> arguments[i].disabled = false;
> if (arguments[i].parentNode.nod eName == 'LABEL') {
> arguments[i].parentNode.sty le.visibility = 'visible';
> }
> }
> }
> }
> }
>
> function initForm() {
> hideStuff(docum ent.forms['aForm'].elements['carType'])
> }
> </script>
> </head>
> <body onload="initFor m();">
>
> <form name="aForm" action="">
> <label for="travelMode ">Select a travel mode:
> <select name="travelMod e" onchange=
> "showExtra(this ,this.form.carT ype)">
> <option value="walk">Wa lk</option>
> <option value="cycle">C ycle</option>
> <option value="drive">D rive</option>
> </select></label>
> <br>
> <label for="carType">I f your mode is "drive"<br>
> select a vehicle type:
> <select name="carType">
> <option value="sedan">S edan</option>
> <option value="sedan">W agon</option>
> <option value="sedan">C ommercial</option>
> </select></label>
> <br>
> <input type="reset" value="Reset" onclick="initFo rm();"> 
> <input type="submit" value="Submit">
> </form>
>
> </body>
> </html>
>
>
> --
> Rob[/color]

Great! This is exactly what I was looking for.

Thanks,
Raffi

Updating form based on user input

Updating form based on user input

Comment

Comment

Comment

Comment

Comment