473,325 Members | 2,828 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Updating form based on user input

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
5 5848
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
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
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

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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jason | last post by:
Let's say I have an html form with 20 or 30 fields in it. The form submits the fields via POST to a php page which updates a table in a database with the $_POST vars. Which makes more sense? ...
2
by: TTD | last post by:
Hi, I have a form (input type) which is based on a table. Let's say it has 2 fields 1: numeric keyfield 2: textfield. When the form opens the numeric is automatically added with 1. When I...
4
by: Darrel | last post by:
I'm creating a table that contains multiple records pulled out of the database. I'm building the table myself and passing it to the page since the table needs to be fairly customized (ie, a...
10
by: sqlboy2000 | last post by:
Hello all, I have something very simple going on here and I'm scratching my head as to what the problem is. There are 4 items in my project, 2 webforms, a user control, and a module: ...
5
by: Navillus | last post by:
Hey gang, I have a login form that is empty by default, but can be filled with values from a previous form: <input type=text maxlength="40" size="40" name="user" value="`usr`"> <input...
2
by: underground | last post by:
Hi, everyone I've been trying to figure out a way for a user to update there information. I'm using sections to identify the specific user..Here is the form <? include("include/session.php");...
10
by: chimambo | last post by:
Hi All, I have a little problem. I am retrieving records from a table and I want to update the records using checkboxes. I am able to display the database record quite alright and I have created...
3
by: Spoogledrummer | last post by:
Hi it's me again, still working on the sam 5 minute problem so feeling kind of thick now. I've dumped the idea of using a textarea for now and am using a textbox instead but am struggling when it...
5
stepterr
by: stepterr | last post by:
I have a form that is built based on a query. Everything is working except when I submit the form the radio buttons are only updating the first row in my database. dcategory and dthumbnail are two...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.