PDA

View Full Version : Show/Hide Elements problem

welshsteve
12-06-2006, 07:56 AM
I've used the following code in a form I'm designing for somebody. FOr some reason, the "Customer Type" select box is not invoking the javascript to show the hidden element. See my code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<style type="text/css">
<!--
label {
font-weight:bold;
}
.hide {
display:none;
margin-left:10px;
}

-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {

inp=document.getElementsByTagName('option');
for(c=0;c<inp.length;c++) {
inp[c].onclick=function() {

for(c=0;c<inp.length;c++) {
document.getElementById('opt'+(c+1)).className='hide';
}
num=this.id.split('option')[1]
document.getElementById('opt'+num).className='';
}
}
}
//-->
</script>

</head>

<body id="p2">

<form action="" method="post">

Customer Type: <select>
<option value="residential" id="option1">Residential</option>
<option value="pub" id="option2">Pub</option>
<option value="school" id="option3">School</option>
</select>
<br /><br />
Title: <select>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
<option value="other">Other</option>
</select>
<br /><br />
First Name: <input type="text" width="40" />
<br /><br />
Surname: <input type="text" width="40" />
<br /><br />
Company Name: <input type="text" width="40" />
<br /><br />
Address: <textarea rows="5" cols="40"></textarea>
<br /><br />
Telephone: <input type="text" width="40" />
<br /><br />
Mobile: <input type="text" width="40" />
<br /><br />
E-Mail: <input type="text" width="40" />
<br /><br />
Charity: <select>
<option value="bernardos">Bernardos</option>
<option value="cancer">Cancer Research UK</option>
<option value="oxfam">Oxfam</option>
</select>
<br /><br />
<!-- OPTION 1 - if residential -->
<div class="hide" id="opt1">
No of phones: <textarea rows="5" cols="40" />
<br /><br />
Phone Make: <input type="text" width="40" />
<br /><br />
Phone Model: <input type="text" width="40" />
<br /><br />
Condition: <select>
<option value="broken">Broken</option>
<option value="working">Working</option>
<option value="scratched">Scratched</option>
</select>
<br /><br />
Request Jiffy Bag: <input type="radio" value="jiffy" />
</div>
<!-- END OPTION 1 -->
<!-- OPTION 2 - if pub -->
<div class="hide" id="opt2">
Request Bin: <input type="radio" value="bin" />
</div>
<!-- END OPTION 2 -->

<!-- OPTION 3 - if school -->
<div class="hide" id="opt3">
Request Bin: <input type="radio" value="bin" />
</div>
<!-- END OPTION 2 -->

</body>
</html>


I have used this exact same javascript before and it's worked fine (see www.geocities.com/leamington_district_snooker/s_res_prem.html)

Anyone have ay ideas what's wrong?
¥åßßå
12-06-2006, 09:20 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<style type="text/css">
<!--
label {
font-weight:bold;
}
.hide {
display:none;
margin-left:10px;
}

-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {

inp=document.getElementsByTagName('option');
for(c=0;c<inp.length;c++) {
inp[c].onclick=function() {

divs = document.getElementsByTagName( 'div' );

for(c=0;c<divs.length;c++) {
if( divs[c].id.substr(0,3) == 'opt' ){
divs[c].className='hide';
}
}
num=this.id.split('option')[1]
document.getElementById('opt'+num).className='';
}
}
}
//-->
</script>

</head>

<body id="p2">

<form action="" method="post">

Customer Type: <select>
<option value="residential" id="option1">Residential</option>
<option value="pub" id="option2">Pub</option>
<option value="school" id="option3">School</option>
</select>
<br /><br />
Title: <select>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
<option value="other">Other</option>
</select>
<br /><br />
First Name: <input type="text" width="40" />
<br /><br />
Surname: <input type="text" width="40" />
<br /><br />
Company Name: <input type="text" width="40" />
<br /><br />
Address: <textarea rows="5" cols="40"></textarea>
<br /><br />
Telephone: <input type="text" width="40" />
<br /><br />
Mobile: <input type="text" width="40" />
<br /><br />
E-Mail: <input type="text" width="40" />
<br /><br />
Charity: <select>
<option value="bernardos">Bernardos</option>
<option value="cancer">Cancer Research UK</option>
<option value="oxfam">Oxfam</option>
</select>
<br /><br />
<!-- OPTION 1 - if residential -->
<div class="hide" id="opt1">
No of phones: <textarea rows="5" cols="40"></textarea>
<br /><br />
Phone Make: <input type="text" width="40" />
<br /><br />
Phone Model: <input type="text" width="40" />
<br /><br />
Condition: <select>
<option value="broken">Broken</option>
<option value="working">Working</option>
<option value="scratched">Scratched</option>
</select>
<br /><br />
Request Jiffy Bag: <input type="radio" value="jiffy" />
</div>
<!-- END OPTION 1 -->
<!-- OPTION 2 - if pub -->
<div class="hide" id="opt2">
Request Bin: <input type="radio" value="bin" />
</div>
<!-- END OPTION 2 -->

<!-- OPTION 3 - if school -->
<div class="hide" id="opt3">
Request Bin: <input type="radio" value="bin" />
</div>
<!-- END OPTION 2 -->

</body>
</html>
You have 15 <options> but only 3 "opt#" divs ;)

¥
welshsteve
12-06-2006, 09:29 AM
Thats because I don't want to apply the javascript to every option, just the ones that relate to the question I've applied it to. I don't want it applied to the Title, Charity and Condition questions. Based on answers choosen in my form, I want other form elements to show or hide. Surely you don't have to apply an id to tags you don't want as well?

If there's another way of achieving this, please let me know. I don't want to have to do three different forms. I'd rather it be interactive on the one form.
¥åßßå
12-06-2006, 09:44 AM
Urm, did you try the code I posted?

¥

*edit*
ahhh, think I see what you mean. I was working on a different error :p

*edit #2*
change the js in the code I posted to this :-
<script type="text/javascript">
<!--
window.onload=function() {

inp=document.getElementsByTagName('option');
for(c=0;c<inp.length;c++) {
if( inp[c].id.substr( 0, 6) == 'option' ){
inp[c].onclick=function() {

divs = document.getElementsByTagName( 'div' );

for(c=0;c<divs.length;c++) {
if( divs[c].id.substr(0,3) == 'opt' ){
divs[c].className='hide';
}
}
num=this.id.split('option')[1]
document.getElementById('opt'+num).className='';
}
}
}
}
//-->
</script>
welshsteve
12-06-2006, 10:59 AM
That's great. Cheers for that. Much appreciated
coothead
12-06-2006, 11:10 AM
Hi there Steve,

I haven't tested the code that ¥åßßå has posted, but have tested mine, so I will post it just in case. ;)
You will see that I have highlighted the amendments made.
Note:-

you did not give the textarea element a closing tag. :supereek:
<input type="text" width="40" /> does not validate, perhaps you meant to use size.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<style type="text/css">
<!--
label {
font-weight:bold;
}
.hide {
display:none;
margin-left:10px;
}

-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {
inp=document.getElementById('customer').getElementsByTagName('option');
for(c=0;c<inp.length;c++) {
inp[c].onclick=function() {

for(c=0;c<inp.length;c++) {
document.getElementById('opt'+(c+1)).className='hide';
}
num=this.id.split('option')[1]
document.getElementById('opt'+num).className='';
}
}
}
//-->
</script>

</head>
<body id="p2">

<form action="#" method="post">

Customer Type: <select id="customer">
<option value="residential" id="option1">Residential</option>
<option value="pub" id="option2">Pub</option>
<option value="school" id="option3">School</option>
</select>
<br /><br />
Title: <select>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
<option value="other">Other</option>
</select>
<br /><br />
First Name: <input type="text" width="40" />
<br /><br />
Surname: <input type="text" width="40" />
<br /><br />
Company Name: <input type="text" width="40" />
<br /><br />
Address: <textarea rows="5" cols="40"></textarea>
<br /><br />
Telephone: <input type="text" width="40" />
<br /><br />
Mobile: <input type="text" width="40" />
<br /><br />
E-Mail: <input type="text" width="40" />
<br /><br />
Charity: <select>
<option value="bernardos">Bernardos</option>
<option value="cancer">Cancer Research UK</option>
<option value="oxfam">Oxfam</option>
</select>
<br /><br />
<!-- OPTION 1 - if residential -->
<div class="hide" id="opt1">
No of phones: <textarea rows="5" cols="40" ></textarea>
<br /><br />
Phone Make: <input type="text" width="40" />
<br /><br />
Phone Model: <input type="text" width="40" />
<br /><br />
Condition: <select>
<option value="broken">Broken</option>
<option value="working">Working</option>
<option value="scratched">Scratched</option>
</select>
<br /><br />
Request Jiffy Bag: <input type="radio" value="jiffy" />
</div>
<!-- END OPTION 1 -->
<!-- OPTION 2 - if pub -->
<div class="hide" id="opt2">
Request Bin: <input type="radio" value="bin" />
</div>
<!-- END OPTION 2 -->

<!-- OPTION 3 - if school -->
<div class="hide" id="opt3">
Request Bin: <input type="radio" value="bin" />
</div>
</form>
<!-- END OPTION 2 -->

</body>
</html>
¥åßßå
12-06-2006, 11:28 AM
Bugger, I noticed the textarea but totally missed the width :P

¥
welshsteve
12-06-2006, 11:43 AM
Thanks guys. It all validates now. Here's the whole page finished.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Phones 4 Charity</title>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<link rel="stylesheet" type="text/css" href="mainstyles.css" />

<style type="text/css">
<!--
label {
font-weight:bold;
}
.hide {
display:none;
margin-left:10px;
}

-->
</style>
<script type="text/javascript">
<!--
window.onload=function() {

inp=document.getElementsByTagName('option');
for(c=0;c<inp.length;c++) {
if( inp[c].id.substr( 0, 6) == 'option' ){
inp[c].onclick=function() {

divs = document.getElementsByTagName( 'table' );

for(c=0;c<divs.length;c++) {
if( divs[c].id.substr(0,3) == 'opt' ){
divs[c].className='hide';
}
}
num=this.id.split('option')[1]
document.getElementById('opt'+num).className='';
}
}
}
}
//-->
</script>

</head>

<body>

<div id="header">
<img src="recycle.gif" style="float:left;margin-left:20px;margin-top:10px;" alt="recycle" />
<img src="old_mobiles.gif" style="float:right;display:inline;" alt="old mobiles" />

</div>
<div id="nav">
<script type="text/javascript" src="nav.js"></script>
</div>

<div id="content">
<h1>Request a collection</h1>
<p>
If you wish for us to arrange for the collection of your old devices, please fill out the form below.
</p>
<div id="contact-form">
<form method="post" action="#">
<!-- START SECTION 1 -->
<fieldset>
<!-- <legend>Request Form</legend>-->
<table border="0">
<tr>
<td valign="top">Customer Type:</td>
<td valign="top">
<select>
<option value="residential" id="option1">Residential</option>
<option value="pub" id="option2">Pub</option>
<option value="school" id="option3">School</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Title:</td>
<td valign="top">
<select>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td valign="top">First Name:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr>
<tr>
<td valign="top">Surname:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr>
<tr>
<td valign="top">Company Name:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr>
<tr>
<td valign="top">Address:</td>
<td valign="top"><textarea rows="5" cols="40"></textarea></td>
</tr>
<tr>
<td valign="top">Telephone:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr>
<tr>
<td valign="top">Mobile:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr>
<tr>
<td valign="top">E-Mail:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr>
<tr>
<td valign="top">Charity:</td>
<td valign="top">
<select>
<option value="bernardos">Bernardos</option>
<option value="cancer">Cancer Research UK</option>
<option value="oxfam">Oxfam</option>
</select>
</td>
</tr>
<tr>
<!-- OPTION 1 - if residential -->
<td colspan="2">
<table class="hide" id="opt1">
<tr>
<td valign="top">No of phones:</td>
<td valign="top"><input type="text" size="5" /></td>
</tr><tr>
<td valign="top">Phone Make:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr><tr>
<td valign="top">Phone Model:</td>
<td valign="top"><input type="text" size="40" /></td>
</tr><tr>
<td valign="top">Condition:</td>
<td valign="top">
<select>
<option value="broken">Broken</option>
<option value="working">Working</option>
<option value="scratched">Scratched</option>
</select>
</td>
</tr><tr>
<td valign="top">Request Jiffy Bag:</td>
<td valign="top"><input type="checkbox" value="jiffy" /></td>
</tr>
</table>
<!-- END OPTION 1 -->
<!-- OPTION 2 - if pub -->
<table class="hide" border="0" id="opt2"><tr><td valign="top">Request Bin:</td><td valign="top"><input type="checkbox" value="bin" /></td></tr></table>
<!-- END OPTION 2 -->
<!-- OPTION 3 - if school -->
<table class="hide" border="0" id="opt3"><tr><td valign="top">Request Bin:</td><td valign="top"><input type="checkbox" value="bin" /></td></tr></table>
<!-- END OPTION 3 -->
</td>
</tr>
<tr>
<td valign="top"><input type="submit" name="btnSubmit" id="btnSubmit" class="btn" value="Send Form" /></td>
<td valign="top"><input type="reset" name="btnReset" id="btnReset" class="btn" value="Reset Form" /></td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
<div id="footer">
Phones 4 Charity&reg; is a registered trademark. Registration number: 12345678
</div>

</body>
</html>
¥åßßå
12-06-2006, 12:07 PM
All that effort and you reverted to using tables :(

Ahhh well, at least it works :D

¥
welshsteve
12-06-2006, 12:48 PM
I know I know. I'm aware of that :D I'll revert to divs as soon as It's all working correctly.

On another note, I've now tried to use PHP to deal with the request form but am getting a parse error. Full details are in a thread I've posted in the PHP forum HERE (http://www.htmlforums.com/showthread.php?p=568660#post568660). If you're able to help, I'd appreciate it.
varunmatj
04-09-2008, 11:04 AM
Hi,
Could anyone provide a fix to this code for internet exp 6.0!!!!?
rangana
04-09-2008, 09:14 PM
@varunmatj,

You should'nt hijack someone else's thread :disagree:

...Create a new thread instead...and the code to the problem...or better a link :agree:
varunmatj
04-09-2008, 11:12 PM
sure! will create a new one....................:)