By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,952 Members | 1,937 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,952 IT Pros & Developers. It's quick & easy.

Updating form based on user input

P: n/a
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.

Raffi

Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Raffi wrote:
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.


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><title>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.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'hidden';
arguments[i].disabled = true;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'hidden';
}
}
}
}
}
function showStuff() {
var n = arguments.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'visible';
arguments[i].disabled = false;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'visible';
}
}
}
}
}

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

<form name="aForm" action="">
<label for="travelMode">Select a travel mode:
<select name="travelMode" onchange=
"showExtra(this,this.form.carType)">
<option value="walk">Walk</option>
<option value="cycle">Cycle</option>
<option value="drive">Drive</option>
</select></label>
<br>
<label for="carType">If your mode is "drive"<br>
select a vehicle type:
<select name="carType">
<option value="sedan">Sedan</option>
<option value="sedan">Wagon</option>
<option value="sedan">Commercial</option>
</select></label>
<br>
<input type="reset" value="Reset" onclick="initForm();">&nbsp;
<input type="submit" value="Submit">
</form>

</body>
</html>
--
Rob
Jul 23 '05 #3

P: n/a
RobG wrote:
Raffi wrote:
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.


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><title>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.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'hidden';
arguments[i].disabled = true;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'hidden';
}
}
}
}
}
function showStuff() {
var n = arguments.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'visible';
arguments[i].disabled = false;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'visible';
}
}
}
}
}

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

<form name="aForm" action="">
<label for="travelMode">Select a travel mode:
<select name="travelMode" onchange=
"showExtra(this,this.form.carType)">
<option value="walk">Walk</option>
<option value="cycle">Cycle</option>
<option value="drive">Drive</option>
</select></label>
<br>
<label for="carType">If your mode is "drive"<br>
select a vehicle type:
<select name="carType">
<option value="sedan">Sedan</option>
<option value="sedan">Wagon</option>
<option value="sedan">Commercial</option>
</select></label>
<br>
<input type="reset" value="Reset" onclick="initForm();">&nbsp;
<input type="submit" value="Submit">
</form>

</body>
</html>
--
Rob

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

Jul 23 '05 #4

P: n/a
RobB wrote:
[...]
We interrupt this thread to bring you a brief announcement.

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

It's beautiful.
<blush>

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


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><title>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.length,
el, id;
for (var i=0; i<n; i++) {
id = arguments[i];
if ((el = document.getElementById(id)) ||
(el = document.all[id])) {
if (el.style) el.style.visibility = 'hidden';
}
}
}
function showStuff() {
var n = arguments.length,
el, id;
for (var i=0; i<n; i++) {
id = arguments[i];
if ((el = document.getElementById(id)) ||
(el = document.all[id])) {
if (el.style) el.style.visibility = '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.length; i<len; i++) {
f[i].reset();
}
}
}
</script>
</head>
<body onload="initForms();">

<form name="aForm" action="">
<table>
<tr>
<td class="aCell">Do you drive?</td>
<td class="aCell">
<input type="radio" name="drive" value="yes" checked
onclick="doClick(this,'driveT');this.blur();">Yes
<br>
<input type="radio" name="drive" value="no"
onclick="doClick(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">Sedan</option>
<option value="sedan">Wagon</option>
<option value="sedan">Commercial</option>
</select></label>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<input type="reset" value="Reset" onclick="
doClick(this,'driveT');this.blur();
">&nbsp;
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>

</body>
</html>
--
Rob
Jul 23 '05 #5

P: n/a

RobG wrote:
Raffi wrote:
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.


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><title>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.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'hidden';
arguments[i].disabled = true;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'hidden';
}
}
}
}
}
function showStuff() {
var n = arguments.length;
if (n > 0) {
for (var i=0; i<n; i++) {
if (arguments[i].style) {
arguments[i].style.visibility = 'visible';
arguments[i].disabled = false;
if (arguments[i].parentNode.nodeName == 'LABEL') {
arguments[i].parentNode.style.visibility = 'visible';
}
}
}
}
}

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

<form name="aForm" action="">
<label for="travelMode">Select a travel mode:
<select name="travelMode" onchange=
"showExtra(this,this.form.carType)">
<option value="walk">Walk</option>
<option value="cycle">Cycle</option>
<option value="drive">Drive</option>
</select></label>
<br>
<label for="carType">If your mode is "drive"<br>
select a vehicle type:
<select name="carType">
<option value="sedan">Sedan</option>
<option value="sedan">Wagon</option>
<option value="sedan">Commercial</option>
</select></label>
<br>
<input type="reset" value="Reset" onclick="initForm();">&nbsp;
<input type="submit" value="Submit">
</form>

</body>
</html>
--
Rob


Great! This is exactly what I was looking for.

Thanks,
Raffi

Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.