Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

IE 7 and Forms 2

Status
Not open for further replies.
lexus

lexus

MIS
Joined
Oct 1, 1998
Messages
277
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.**
 
Sort by date Sort by votes
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.**
 
Upvote 0 Downvote
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"
"<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(n); 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.**
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Ok..I will take that out and try it again. You are wonderful! Thanks for the help!

**Quiquid latine dictum sit altum viditur.**
 
Upvote 0 Downvote
That's it!! Thanks..It works!

**Quiquid latine dictum sit altum viditur.**
 
Upvote 0 Downvote
That's it!! Thanks..It works!

**Quiquid latine dictum sit altum viditur.**
 
Upvote 0 Downvote
The onclick is part of a script that colors the field for the user so they know where they are on the form.
Click to expand...
You don't need a script to do that, at least not on modern browsers. This CSS should do the same thing:
Code: 
input:focus, select:focus {
   background: #FFC;  /* or whatever colour you prefer */
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
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.**
 
Upvote 0 Downvote
Hi

You may paste it directly in the page source between [tt]style[/tt] tags :
Code: 
<!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 :
Code: 
<!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.
 
Upvote 0 Downvote
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.**
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

angemaths
  • Locked
  • Question Question
updating WordPress and Plugin?
Replies
1
Views
667
jackm01
jackm01
kjv1611
  • Locked
  • Helpful tip Helpful tip
Possibly Best (or One of Best) Media Players for Drupal 7
Replies
1
Views
289
kjv1611
kjv1611
ChrisHunt
  • Locked
  • Helpful tip Helpful tip
The Current State of HTML5 Forms
Replies
3
Views
316
aich69
aich69
dkemas
  • Locked
  • Question Question
IE6 on wamp server making IE8 behave strangely
Replies
5
Views
422
darryncooke
darryncooke
BitZero
  • Locked
  • Question Question
HR forms entry
Replies
3
Views
225
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top