PDA

View Full Version : Javascript not working in IE6 and IE7. OK in Firefox

welshsteve
12-11-2006, 11:10 AM
I have a show/hide function on a form in the page - http://swweb.frih.net/order.html

Depending on which option you choose in the first question, additional fields should appear at the bottom of the form. You can see this working in Firefox and Opera, but in IE6 and IE7 it just will not work, depite me setting my internet options up to allow scripting.

Any ideas at all?

Many thanks in advance



Sorry, just realised this post is in connection with THIS ONE (http://www.htmlforums.com/client-side-scripting/t-showhide-elements-problem-86538.html)

Still need an answer though ;)
coothead
12-11-2006, 04:33 PM
Hi there Steve,

try it like this...
<!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.getElementById('customer').getElementsByTagName('option');

document.getElementById('customer').onchange=function(){

for(c=0;c<inp.length;c++) {
if(c!=0){
document.getElementById('opt'+c).className='hide';
}
}
if(this.options[this.selectedIndex].id!=''){
num=this.options[this.selectedIndex].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>Order Form</h1>
<p>
If you wish for us to arrange for the collection of your old devices, please fill out the form below. Fields marked with a <span style="color:#f00;">*</span> are mandatory.
</p>
<div id="contact-form">

<form method="post" action="order.php">
<!-- START SECTION 1 -->
<fieldset>
<!-- <legend>Request Form</legend>-->
<table border="0">
<tr>
<td valign="top">Customer Type:</td>
<td valign="top">
<span style="color:#f00;">*</span>
<select name="custype" id="customer">
<option>---options---</option>
<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">
<span style="color:#f00;">*</span>
<select name="title">
<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"><span style="color:#f00;">*</span> <input type="text" size="40" name="fname" /></td>
</tr><tr>
<td valign="top">Surname:</td>
<td valign="top"><span style="color:#f00;">*</span> <input type="text" size="40" name="sname" /></td>
</tr><tr>
<td valign="top">Company Name:</td>
<td valign="top"><span style="color:#fff;">*</span> <input type="text" size="40" name="coname" /></td>
</tr><tr>
<td valign="top">Address:</td>
<td valign="top"><span style="vertical-align:top;color:#f00;">*</span> <textarea rows="5" cols="40" name="add"></textarea></td>
</tr><tr>
<td valign="top">Telephone:</td>
<td valign="top"><span style="color:#f00;">*</span> <input type="text" size="40" name="tel" /></td>
</tr><tr>
<td valign="top">Mobile:</td>
<td valign="top"><span style="color:#fff;">*</span> <input type="text" size="40" name="mob" /></td>
</tr><tr>
<td valign="top">E-Mail:</td>
<td valign="top"><span style="color:#f00;">*</span> <input type="text" size="40" name="email" /></td>
</tr><tr>
<td valign="top">Charity:</td>
<td valign="top">
<span style="color:#f00;">*</span>
<select name="charity">
<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"><span style="color:#fff;">*</span> <input type="text" size="5" name="nophone" /></td>
</tr><tr>
<td valign="top">Phone Make:</td>
<td valign="top"><span style="color:#fff;">*</span> <input type="text" size="40" name="phonemake" /></td>
</tr><tr>
<td valign="top">Phone Model:</td>
<td valign="top"><span style="color:#fff;">*</span> <input type="text" size="40" name="phonemod" /></td>
</tr><tr>
<td valign="top">Condition:</td>
<td valign="top">
<span style="color:#fff;">*</span>
<select name="cond">
<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">
<span style="color:#fff;">*</span>
<select name="jiffy">
<option value="Yes">Yes</option>
<option value="No" selected="selected">No</option>
</select>
</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">
<span style="color:#fff;">*</span>
<select name="rbin">
<option value="Yes">Yes</option>
<option value="No" selected="selected">No</option>
</select>
</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">
<span style="color:#fff;">*</span>
<select name="rbin">
<option value="Yes">Yes</option>
<option value="No" selected="selected">No</option>
</select>
</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>


One small point, why are you using this meta tag...
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
It brings up a dialog box that asks me to install a Japanese Language Pack. :supereek:
welshsteve
12-12-2006, 05:12 AM
Thanks coothead. I have no idea on the meta tag. I've changed it now. They now read

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="mobile, phone, recycling, charity, pda" />
<meta name="Description" content="Phones 4 Charity is an organisation set up to provide you with the means of recycling your old mobile phone and PDA devices. By recycling these devices you are protecting the environment." />


This is still not working correctly in IE though. I think IE is doing something to prevent it from running, even though it asked me if I wish to allow blocked content, to which I said "Yes". The "----options----" option just disappears after the page has finished loading, and the script won't work. What gets me is that the nav bar uses javascript and that works, so why won't this other bit of javascript work?
coothead
12-12-2006, 06:46 AM
Hi there Steve,

I tested the amended code in...

IE 6.02
Firefox 1.5.0.8
Opera 9.02

..and it worked OK.
So, I'm guessing that the problem may be local to you. :supereek:

You could try clearing Local Internet Files

If you wish to stop IE asking...
Do you wish to allow blocked content
This only happens locally. To effect a cure for the page add this snippet of code directly after the DOCTYPE...

<!-- saved from url=(0014)about:internet -->

To permantly disable this information do this...

open IE.
click 'Tools'.
click 'Internet Options'.
click 'Advanced' tab.
scroll down to 'Security'.
check 'Allow active content to run on My Computer'.
click 'Apply'.
click 'OK'
have a beer. ;)

Further reading:-
http://msdn.microsoft.com/workshop/author/dhtml/overview/motw.asp
welshsteve
12-12-2006, 07:20 AM
Thanks for that coothead. That doesn't seem to have made any difference. I've set the security settings correctly now, and cleared all temp internet files and restarted the browser, but no joy. This doesn't appear to be working on a friend's machine either, so something is amiss.

I might have to do the form so that there are no hidden sections instead, and mark the sections to say what is relevant based on the customer type.