IE 7 and Forms 2

[lexus]

has anyone noticed a problem with IE 7 and drop-down lists on a form? things that worked in IE 6, FF, Etc., now are not working in IE 7. Code is simple so it's not the code.

Anyone else experience this? I am advising all my users NOT to update.

**Quiquid latine dictum sit altum viditur.**

 

[feherke]

Hi

Could you give us an example code or URL ?

Feherke.

http://rootshell.be/~feherke/

 

[lexus]

It's not a public form so I can't give you the URL but I can put the code here. This is the code for the <form> </from> only. It works in IE 6.x and Firefox but not IE. It seems to be the dropdowns that will not stay open when you select them. Afte clicking on them several times, they finally stay open for selection. Weird that it only happens in IE 7. I changed the person's email address in the first line and replaced it with "emailaddress". The form works fine for emailing as do all my other forms.

The onclick is part of a script that colors the field for the user so they know where they are on the form. Works fine. Thanks for your help!

<form action="/../cgi-bin/mail?emailaddress" method="POST" onKeyUp="highlight(event)" onClick="highlight(event)" name="sasiLabel" id="sasiLabel" onSubmit="MM_validateForm('noCopies','','RinRange1:3','name','','R','school','','R','phone','','R');return document.MM_returnValue">
<input name="subject" type="hidden" value="SASI Label Request">

<table width="85%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="45%" height="52" valign="top"><label><strong>Label Type: </strong> </label>
<select name="Type" tabindex="1" size="1" id="Type">
<option>Select Type:</option>
<option value="Mailing">Mailing</option>
<option value="Permanent Record">Permanent record</option>
</select>
</td>
<td width="55%" rowspan="2" valign="top"><Label><strong>Grades </strong>- select one or multiple grades: </Label>
<BR>
<em><font size="2">(To select multiple grades, press the <strong>Control</strong> key while clicking on each grade level.)<br>
</font></em> <select name="Grades" size="8" multiple id="Grades" tabindex="7">
<option value="all in school">All in school</option>
<option value="kindergarden">Kindergarden</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<em></em></td>
</tr>
<tr>
<td height="117" valign="top">
<label><strong> Sort Type: </strong></label>
<select name="Sort" tabindex="2" size="1" id="Sort">
<option>Select Type:</option>
<option value="Alpha">Straight Alpha</option>
<option value="Alpha by Grade">Alpha by Grade</option>
<option value="Alpha by HR">Alpha by Homeroom</option>
</select></td>
</tr>
<tr>
<td height="76" align="left" valign="top" ><p align="left"><strong>Number of copies:<br>
</strong>
<select name="HowMany" size="4" id="HowMany" tabindex="3">
<option>Select Number:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
</td>
<td rowspan="2"><p>&nbsp;</p>
<p><strong>Additional instructions:</strong><BR>
<textarea name="addInstructions" tabindex="8" cols="50" rows="7" id="addInstructions"></textarea>
</p></td>
</tr>
<tr>
<td height="110" valign="middle"><strong>Include extra mailing:
</strong> <p>
<label>
<input type="radio" name="extraMailing" tabindex="4"value="yes">
Yes</label>
<br>
<label>
<input type="radio" name="extraMailing" tabindex="5" value="no">
No</label>
<br>
</p></td>
</tr>
<tr>
<td valign="top" ><BR><label><strong>Select delivery period:</strong> </label>
<select name="Delivery" tabindex="6" size="1" id="Delivery">
<option>Select Delivery Period</option>
<option value="as soon as possible">as soon as possible</option>
<option value="within week">within week</option>
<option value="within 2 weeks">within 2 weeks</option>
</select></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="35%"><label><strong>*Name <em><font size="2">(first, then last) </font></em></strong></Label></td>
<td width="65%"><input name="Name" tabindex = "9" type="text" id="Name" size="50" maxlength="50"></td>
</tr>
<tr>
<td><label><strong>*District &amp; School </strong></Label></td>
<td><input name="DistrictSchool" type="text" id="DistrictSchool" tabindex = "10" size="50" maxlength="50"></td>
</tr>
<tr>
<td><label><strong>*Phone &amp; Extension </strong></label></td>
<td><input name="Phone" type="text" id="Phone" tabindex = "11" onBlur="MM_validateForm('name','','R','school','','R','phone','','R','email','','NisEmail');return document.MM_returnValue" size="50" maxlength="50"></td>
</tr>
<tr>
<td><label><strong>Email</strong></label></td>
<td><input name="Email" type="text" tabindex = "12" id="Email" size="50" maxlength="50"></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<p>
<input name="Send" type="submit" id="Send" tabindex = "13 name="" value="Send"Submit>
<input name="Reset" type="reset" tabindex = "14" id="Reset" value="Reset">
</p>
<p><font size="2">You should receive a <strong>confirmation page</strong> when you press the <strong>Send</strong> button.<br>
</font>* <font size="2">Required Field </font></p>
</div></td>
</tr>
</table>
</form>

**Quiquid latine dictum sit altum viditur.**

 

[feherke]

Hi

Is necessary to see the JavaScript code, especially the highlight() script. That is where probably the problem is.

Feherke.

http://rootshell.be/~feherke/

 

[lexus]

Here is the total code. I am also going to strip out all js and try it that way on the server.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Production Request</title>
<script language="JavaScript1.2">


var highlightcolor="#ffff66"

var ns6=document.getElementById&&!document.all
var previous=''
var eventobj

//Regular expression to highlight only form elements
var intended=/INPUT|TEXTAREA|SELECT|OPTION/

//Function to check whether element clicked is form element
function checkel(which){
if (which.style&&intended.test(which.tagName)){
if (ns6&&eventobj.nodeType==3)
eventobj=eventobj.parentNode.parentNode
return true
}
else
return false
}

//Function to highlight form element
function highlight(e){
eventobj=ns6? e.target : event.srcElement
if (previous!=''){
if (checkel(previous))
previous.style.backgroundColor=''
previous=eventobj
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
}
else{
if (checkel(eventobj))
eventobj.style.backgroundColor=highlightcolor
previous=eventobj
}
}

</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; return x;
}

function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script>

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

<body bgcolor="#EBF3FC">
<p align="center"><img src="../../images/logo.gif" width="189" height="60"></p>
<p align="center"><strong><font size="4">SASI Label Request</font></strong></p>
<p align="center"><strong><em>Specialist: Name of Specialist</em></strong></p>
<hr width="90%" noshade>
<form action="/../cgi-bin/mail?emailaddress" method="POST" onKeyUp="highlight(event)" onClick="highlight(event)" name="sasiLabel" id="sasiLabel" onSubmit="MM_validateForm('noCopies','','RinRange1:3','name','','R','school','','R','phone','','R');return document.MM_returnValue">
<input name="subject" type="hidden" value="SASI Label Request">

<table width="85%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="45%" height="52" valign="top"><label><strong>Label Type: </strong> </label>
<select name="Type" tabindex="1" size="1" id="Type">
<option>Select Type:</option>
<option value="Mailing">Mailing</option>
<option value="Permanent Record">Permanent record</option>
</select>
</td>
<td width="55%" rowspan="2" valign="top"><Label><strong>Grades </strong>- select one or multiple grades: </Label>
<BR>
<em><font size="2">(To select multiple grades, press the <strong>Control</strong> key while clicking on each grade level.)<br>
</font></em> <select name="Grades" size="8" multiple id="Grades" tabindex="7">
<option value="all in school">All in school</option>
<option value="kindergarden">Kindergarden</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<em></em></td>
</tr>
<tr>
<td height="117" valign="top">
<label><strong> Sort Type: </strong></label>
<select name="Sort" tabindex="2" size="1" id="Sort">
<option>Select Type:</option>
<option value="Alpha">Straight Alpha</option>
<option value="Alpha by Grade">Alpha by Grade</option>
<option value="Alpha by HR">Alpha by Homeroom</option>
</select></td>
</tr>
<tr>
<td height="76" align="left" valign="top" ><p align="left"><strong>Number of copies:<br>
</strong>
<select name="HowMany" size="4" id="HowMany" tabindex="3">
<option>Select Number:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
</td>
<td rowspan="2"><p>&nbsp;</p>
<p><strong>Additional instructions:</strong><BR>
<textarea name="addInstructions" tabindex="8" cols="50" rows="7" id="addInstructions"></textarea>
</p></td>
</tr>
<tr>
<td height="110" valign="middle"><strong>Include extra mailing:
</strong> <p>
<label>
<input type="radio" name="extraMailing" tabindex="4"value="yes">
Yes</label>
<br>
<label>
<input type="radio" name="extraMailing" tabindex="5" value="no">
No</label>
<br>
</p></td>
</tr>
<tr>
<td valign="top" ><BR><label><strong>Select delivery period:</strong> </label>
<select name="Delivery" tabindex="6" size="1" id="Delivery">
<option>Select Delivery Period</option>
<option value="as soon as possible">as soon as possible</option>
<option value="within week">within week</option>
<option value="within 2 weeks">within 2 weeks</option>
</select></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="35%"><label><strong>*Name <em><font size="2">(first, then last) </font></em></strong></Label></td>
<td width="65%"><input name="Name" tabindex = "9" type="text" id="Name" size="50" maxlength="50"></td>
</tr>
<tr>
<td><label><strong>*District &amp; School </strong></Label></td>
<td><input name="DistrictSchool" type="text" id="DistrictSchool" tabindex = "10" size="50" maxlength="50"></td>
</tr>
<tr>
<td><label><strong>*Phone &amp; Extension </strong></label></td>
<td><input name="Phone" type="text" id="Phone" tabindex = "11" onBlur="MM_validateForm('name','','R','school','','R','phone','','R','email','','NisEmail');return document.MM_returnValue" size="50" maxlength="50"></td>
</tr>
<tr>
<td><label><strong>Email</strong></label></td>
<td><input name="Email" type="text" tabindex = "12" id="Email" size="50" maxlength="50"></td>
</tr>
</table></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="2"><div align="center">
<p>
<input name="Send" type="submit" id="Send" tabindex = "13 name="" value="Send"Submit>
<input name="Reset" type="reset" tabindex = "14" id="Reset" value="Reset">
</p>
<p><font size="2">You should receive a <strong>confirmation page</strong> when you press the <strong>Send</strong> button.<br>
</font>* <font size="2">Required Field </font></p>
</div></td>
</tr>
</table>
</form>
<p align="center">
<script language="JavaScript" src="contact.js" type="text/JavaScript"></script>
</p>
</body>

**Quiquid latine dictum sit altum viditur.**

 

[feherke]

Hi

Thank you for the information. For me looks like the problem is the highlight() function. Probably interferes with the event queue by generating a new event before another gets handled.

Our IE 7 will late another day or two, but this will be between the first things I will check.

Feherke.

http://rootshell.be/~feherke/

 

[lexus]

Ok..I will take that out and try it again. You are wonderful! Thanks for the help!

**Quiquid latine dictum sit altum viditur.**

 

[lexus]

That's it!! Thanks..It works!

**Quiquid latine dictum sit altum viditur.**

 

[lexus]

That's it!! Thanks..It works!

**Quiquid latine dictum sit altum viditur.**

 

[ChrisHunt]

The onclick is part of a script that colors the field for the user so they know where they are on the form.

You don't need a script to do that, at least not on modern browsers. This CSS should do the same thing:

input:focus, select:focus {
   background: #FFC;  /* or whatever colour you prefer */
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[lexus]

How do I use that or where do I put it? I know basic CSS but havent done anything like that.

**Quiquid latine dictum sit altum viditur.**

 

[feherke]

Hi

You may paste it directly in the page source between [tt]style[/tt] tags :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Production Request</title>
[red]<style type="text/css">[/red]
[green]input:focus, select:focus {
   background: #FFC;  /* or whatever colour you prefer */
}[/green]
[red]</style>[/red]
<script language="JavaScript1.2">

[gray]...[/gray]

Or put it in a separate file, lets say called style.css then refer it from the page with a [tt]link[/tt] tag :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Production Request</title>
[red]<link rel="stylesheet" type="text/css" href="style.css">[/red]
<script language="JavaScript1.2">

[gray]...[/gray]

Do not forget to give a star to Chris.

Feherke.

http://rootshell.be/~feherke/

 

[lexus]

You both are fantastic! Thank you so much for all your help. Because I had no problems with the script in IE 6, it would have driven me crazy trying to find the answer!

A million stars and thanks to both of you!

**Quiquid latine dictum sit altum viditur.**