drop down box not working in FireFox when on DIV

T

tpaulson

I have a couple of DIV's that I hide/display based on radio buttons.
On the DIV's, I have multiple drop down boxes. The source shows that
they are populated, but I can't make them drop down. Only click on the
Unplatted Radio button, the rest isn't functional, yet. Any ideas how
to make these drop down in FF. This works in IE. Here is the code:

<HTML>
<HEAD>
<TITLE>Door County Register of Deeds - Tract Inquiry</TITLE>

<script>
var ifsdir='/rerv10f';

function goList(btnName,hdnName,hdnValue)
{
if (hdnName!='') {
var hdnVar=eval('document.forms[0].'+hdnName);
hdnVar.value=hdnValue;
}
document.forms[0].BUTTON.value=btnName;
document.forms[0].submit();
}
</script>

<script type="text/javascript">
<!--

// function switchDiv()
// this function takes the id of a div
// and calls the other functions required
// to show that div
//
function switchDiv(div_id)
{
var style_sheet = getStyleObject(div_id);
if (style_sheet)
{
hideAll();
changeObjectDisplay(div_id,"inline");
}
else
{
alert("sorry, this only works in browsers that do Dynamic HTML");
}
}

// function hideAll()
// hides a bunch of divs
//
function hideAll()
{
changeObjectDisplay("unplat","none");
changeObjectDisplay("plat","none");
changeObjectDisplay("condo","none");
changeObjectDisplay("map","none");
}

// function getStyleObject(string) -> returns style object
// given a string containing the id of an object
// the function returns the stylesheet of that object
// or false if it can't find a stylesheet. Handles
// cross-browser compatibility issues.
//
function getStyleObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4.
//
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
}
else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}

function changeObjectDisplay(objectId, newVisibility) {
// first get a reference to the cross-browser style object
// and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.display = newVisibility;
return true;
} else {
// we couldn't find the object, so we can't change its visibility
return false;
}
}
// -->
</script>

</HEAD>

<BODY bgproperties="fixed" onload="hideAll();"
topmargin="0" marginwidth="0" marginheight="0" leftmargin="0"
rightmargin="0" margintop="0" bgcolor="white">

<script type='text/javascript' src='/rerv10f/menu_var.js'></script>
<script type='text/javascript' src='/rerv10f/menu_com.js'></script>
<script>
var
Arrws=['/rerv10f/images/tri.gif',5,10,'/rerv10f/images/tridown.gif',10,5,'/rerv10f/images/trileft.gif',5,10];
// Arrow source, width and height

function Go(){return}

Menu1=new Array("","","/rerv10f/images/left.jpg",0,20,50);

Menu2=new Array("Grantor/Grantee
Inquiry","javascript:goList('TABSEL','tabnbr','1');","/rerv10f/images/button.jpg",0,20,150);

Menu3=new Array("Volume/Page OR Document #
Inquiry","javascript:goList('TABSEL','tabnbr','2');","/rerv10f/images/button.jpg",0,20,225);

Menu4=new Array("Tract
Inquiry","javascript:goList('TABSEL','tabnbr','3');","/rerv10f/images/button_alt.jpg",0,20,95);

Menu5=new Array("Assessment Roll
Inquiry","javascript:goList('TABSEL','tabnbr','4');","/rerv10f/images/button.jpg",0,20,150);

Menu6=new Array("","","/rerv10f/images/right.jpg",0,20,50);

var NoOffFirstLineMenus=6; // Number of first level items


document.write('<table border="0" cellpadding="0" cellspacing="0"
width="100%" height="85" bordercolor="white">');
document.write('<tr>');
document.write('<td width="15%">&nbsp;</td>');
document.write('<td align="center" width="70%">');
document.write('<img src="/rerv10f/images/header.jpg" border="0">');
document.write('</td>');
document.write('<td width="15%" valign="top" align="right"><a href="#"
Onclick="window.open(\'/RERV10O/rer001?form=admin&encusr=7A7BF76DA6CB6728E0C2424580A7491C&time=13411812152005\',\'ADMIN\');">Administration</a></td>');
document.write('</tr>');
document.write('<TR><TD COLSPAN="3" BGCOLOR="#FFFFFF"');
document.write('VALIGN="TOP" HEIGHT="20"><div id="MenuPos"
style="position:relative;width:80;height:20;"></DIV></TD>');
document.write('</TR>');
document.write('</TABLE>');
</script>
<script type='text/javascript' src='/rerv10f/footer.js'></script>
<noscript>Your browser does not support script</noscript>

<FORM METHOD="POST" ACTION="/RERV10O/RER001">
<table width="100%" border="0">
<tr>
<td align="center"><br><font color="#003399" face="arial"
size="4"><b>Tract Inquiry</b>

</td>
</tr>
</table>
<center><font color="red"><B></B></font></center>
<table align="center">
<tr align="right">
<td><br><font face="arial" size="2" color="#003399"><b>Include From
Date:</b>
</td>
<td align="left"><br>
<input type="text" name="FullMonth" size="2" maxlength="2"
tabindex="1" value="0"><font face="arial" size="2" color="#003399"> /
<input type="text" name="FullDay" size="2" maxlength="2" tabindex="2"
value="0"> /
<input type="text" name="FullYear" size="4" maxlength="4" tabindex="3"
value="0"> MM/DD/YYYY
</td>

</tr>
<tr>
<td align="right"><font color="#003399" face="arial"><b>- OR -</b>
</td>
</tr>
<tr align="right">
<td><font color="#003399" face="arial" size="2"><b>Include From
Year:</b>
</td>

<td align="left"><font color="#003399" face="arial" size="2"><input
type="text" name="Year" size="4" maxlength="4" tabindex="6" value="0">
YYYY
</td>
</tr>
<tr>
<td valign="top" align="right">
<font size="2" face="arial" color="#003399"><b>Type:</b>
</td>
<td>

<input type="radio" name="form_type" value="unplat"
onClick="switchDiv('unplat');" tabindex="4"><font face="arial"
size="2"><b>Unplatted Detail</b>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="form_type" value="plat"
onClick="switchDiv('plat');" tabindex="5"><font face="arial"
size="2"><b>Platted Detail</b>
<br>
<input type="radio" name="form_type" value="condo"
onClick="switchDiv('condo');" tabindex="6"><font face="arial"
size="2"><b>Condominium Detail</b>
&nbsp;&nbsp;
<input type="radio" name="form_type" value="map"
onClick="switchDiv('map');" tabindex="7"><font face="arial"
size="2"><b>Certified Survey Map Detail</b>

</td>
</tr>
</table>
<!-- Start Unplatted -->
<div id="unplat" style="position:relative;display:none;">
<table width="100%" border="0">
<tr>
<td width="30%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Section:</b></td>
<td align="left">

<select name="sectnbr"><option value="0"> </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>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>

<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>

<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>

<option value="36">36</option>
</select></td>
<td width="30%"></td>
<tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Town:</b></td>
<td align="left">
<select name="townnbr"><option value="0"> </option><option
value="26">26</option>

<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
</select></td>

<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Range:</b></td>
<td align="left">
<select name="rangenbr"><option value="0"> </option><option
value="23">23</option>
<option value="24">24</option>

<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select></td>
<td width="20%"></td>
</tr>

<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Quarter:</b></td>
<td align="left"><select name="qtrnbra"><option value="">
</option><option value="NE">NE</option><option
value="SE">SE</option><option value="SW">SW</option><option
value="NW">NW</option></select><font face="arial" size="2"
color="#003399"> / <select name="qtrnbrb"><option value="">
</option><option value="NE">NE</option><option
value="SE">SE</option><option value="SW">SW</option><option
value="NW">NW</option></select></td>

<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Government Lot:</b></td>
<td align="left"><input type="text" name="GovNbr" size="3"
maxlength="3" tabindex="13" value=""></td>
<td width="20%"></td>
</tr>

<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2" color="#003399"><b>Out
Lot:</b></td>
<td align="left"><input type="text" name="OutNbr" size="2"
maxlength="2" tabindex="14" value=""></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>

<td align="right"><font face="arial" size="2"
color="#003399"><b>Misc Code:</b></td>
<td align="left"><input type="text" name="MisCode" size="3"
maxlength="3" tabindex="15" value="">&nbsp;&nbsp;&nbsp;&nbsp;<input
type="button" name="miscode" value="Lookup Misc Code"
onclick="window.open('miscode.htm','code','toolbars=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=430,height=313');"
tabindex="16"></td>
<td width="20%"></td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>
<font face="arial" size="2" color="#003399"><b>**Note: Tract Through
Document #: &nbsp;</b>

</td>
<td>
<font face="arial" size="2">
</td>
<td>
<font face="arial" size="2" color="#003399"><b>&nbsp;&nbsp;On Date:
&nbsp;</b>
</td>
<td>

<font face="arial" size="2">
</td>
</tr>
</table>
</div>
<!-- End Unplatted -->

<!-- Start Platted -->
<div id="plat" style="position:relative;display:none;">
<table width="100%" border="0">
<tr>
<td width="30%"></td>

<td align="right"><font face="arial" size="2"
color="#003399"><b>Plat Number:</b></td>
<td align="left"><input type="text" name="PlatNbr" size="4"
maxlength="4" tabindex="8" value="**Missing Data**">
&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="platnum"
value="Lookup Plat Number"
onclick="window.open('platnum.htm','code','toolbars=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=430,height=313');"
tabindex="9"></td>
<td width="20%"></td>
<tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2" color="#003399"><b>Lot
Number:</b></td>

<td align="left"><input type="text" name="LotNbr" size="3"
maxlength="3" tabindex="10" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Block Number:</b></td>
<td align="left"><input type="text" name="BlkNbr" size="3"
maxlength="3" tabindex="11" value="**Missing Data**"></td>
<td width="20%"></td>

</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Subdivision:</b></td>
<td align="left"><input type="text" name="SubNbrA" size="3"
maxlength="3" tabindex="12" value="**Missing Data**"><font face="arial"
size="2" color="#003399"><b> . </b>
<input type="text" name="SubNbrB" size="1" maxlength="1" tabindex="13"
value="**Missing Data**"></td>
<td width="20%"></td>

</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2" color="#003399"><b>Out
Lot:</b></td>
<td align="left"><input type="text" name="OutNbr" size="2"
maxlength="2" tabindex="15" value=""></td>
<td width="20%"></td>
</tr>
<tr>

<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Misc Code:</b></td>
<td align="left"><input type="text" name="MisCode" size="3"
maxlength="3" tabindex="16" value="">&nbsp;&nbsp;&nbsp;&nbsp;<input
type="button" name="miscode" value="Lookup Misc Code"
onclick="window.open('miscode.htm','code','toolbars=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=430,height=313');"
tabindex="17"></td>
<td width="20%"></td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>

<font face="arial" size="2" color="#003399"><b>**Note: Tract Through
Document #: &nbsp;</b>
</td>
<td>
<font face="arial" size="2">
</td>
<td>
<font face="arial" size="2" color="#003399"><b>&nbsp;&nbsp;On Date:
&nbsp;</b>
</td>

<td>
<font face="arial" size="2">
</td>
</tr>
</table>
</div>
<!-- End Platted -->

<!--Start Condominium -->
<div id="condo" style="position:relative;display:none;">
<table width="100%" border="0">
<tr>

<td width="30%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Condominium Number:</b></td>
<td align="left"><input type="text" name="CondoNbr" size="4"
maxlength="4" tabindex="8" value="**Missing
Data**">&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" name="condocode"
value="Lookup Condominium Code"
onclick="window.open('condocode.htm','code','toolbars=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=430,height=313');"
tabindex="9"></td>
<td width="20%"></td>
<tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Building:</b></td>

<td align="left"><input type="text" name="BldgNbr" size="20"
maxlength="20" tabindex="11" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Unit:</b></td>
<td align="left"><input type="text" name="UnitNbr" size="8"
maxlength="8" tabindex="12" value="**Missing Data**"></td>
<td width="20%"></td>

</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Garage:</b></td>
<td align="left"><input type="text" name="GarageNbr" size="8"
maxlength="8" tabindex="13" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
<tr>

<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Dock/Slip:</b></td>
<td align="left"><input type="text" name="DockSlip" size="8"
maxlength="8" tabindex="14" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>Storage Building:</b></td>

<td align="left"><input type="text" name="StorBldg" size="8"
maxlength="8" tabindex="15" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>
<font face="arial" size="2" color="#003399"><b>**Note: Tract Through
Document #: &nbsp;</b>
</td>

<td>
<font face="arial" size="2">
</td>
<td>
<font face="arial" size="2" color="#003399"><b>&nbsp;&nbsp;On Date:
&nbsp;</b>
</td>
<td>
<font face="arial" size="2">

</td>
</tr>
</table>
</div>
<!-- End Condominium -->

<!-- Start CSM -->
<div id="map" style="position:relative;display:none;">
<table width="100%" border="0">
<tr>
<td width="30%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>CSM Volume/Jacket:</b></td>

<td align="left"><input type="text" name="VolJack" size="4"
maxlength="4" tabindex="8" value="**Missing Data**"></td>
<td width="40%"></td>
<tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2" color="#003399"><b>CSM
Page/Image:</b></td>
<td align="left"><input type="text" name="PageImg" size="3"
maxlength="3" tabindex="9" value="**Missing Data**"></td>
<td width="20%"></td>

</tr>
<tr>
<td width="20%"></td>
<td align="right"><font face="arial" size="2"
color="#003399"><b>CSM Number:</b></td>
<td align="left"><input type="text" name="CSMNbr" size="4"
maxlength="4" tabindex="10" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
<tr>

<td width="20%"></td>
<td align="right"><font face="arial" size="2" color="#003399"><b>CSM
Lot Number:</b></td>
<td align="left"><input type="text" name="LotNbr" size="4"
maxlength="4" tabindex="11" value="**Missing Data**"></td>
<td width="20%"></td>
</tr>
</table>
<br>
<table align="center">
<tr>
<td>

<font face="arial" size="2" color="#003399"><b>**Note: Tract Through
Document #: &nbsp;</b>
</td>
<td>
<font face="arial" size="2">
</td>
<td>
<font face="arial" size="2" color="#003399"><b>&nbsp;&nbsp;On Date:
&nbsp;</b>
</td>

<td>
<font face="arial" size="2">
</td>
</tr>
</table>
</div>
<!-- End CSM -->

<br>
<table align="center">
<tr>
<td><input type="submit" value="Search" name="button"
tabindex="17">

</td>
<td valign="top">
<input type="reset" value="Reset" name="reset" tabindex="18">
</td>
</tr>
</table>

<script>CrtFooter('foot');</script>

<input type="hidden" name="form" value="tractsrch">
<input type="hidden" name="BUTTON" value="">

<input type="hidden" name="tabnbr" value="3">
<input type="hidden" name="encusr"
value="7A7BF76DA6CB6728E0C2424580A7491C">
<input type="hidden" name="time" value="13411812152005">

</form>
</body>
</html>
 
R

RobG

I have a couple of DIV's that I hide/display based on radio buttons.
On the DIV's, I have multiple drop down boxes. The source shows that
they are populated, but I can't make them drop down. Only click on the
Unplatted Radio button, the rest isn't functional, yet. Any ideas how
to make these drop down in FF. This works in IE.

Use valid HTML and don't depend on error correction (see below).

Please indent code using 2 or 4 spaces and manually wrap lines at
about 70 characters. That will prevent auto-wrapping which nearly
always introduces more errors that not only make helping you more
difficult, buy may mask your problem.

<HTML>
<HEAD>
<TITLE>Door County Register of Deeds - Tract Inquiry</TITLE>

<script>

The type attribute is required.

var ifsdir='/rerv10f';

function goList(btnName,hdnName,hdnValue)
{
if (hdnName!='') {
var hdnVar=eval('document.forms[0].'+hdnName);
hdnVar.value=hdnValue;
}
document.forms[0].BUTTON.value=btnName;
document.forms[0].submit();
}
</script>

<script type="text/javascript">
<!--

Using comment delimiters inside script elements is pointless and
potentially harmful.

// function switchDiv()
// this function takes the id of a div
// and calls the other functions required
// to show that div
//
function switchDiv(div_id)
{
var style_sheet = getStyleObject(div_id);
if (style_sheet)
{
hideAll();
changeObjectDisplay(div_id,"inline");
}
else
{
alert("sorry, this only works in browsers that do Dynamic HTML");

Whether or not a browser supports your 'getStyleObject' function is
not a sufficient test to determine whether it supports 'Dynamic HTML'

A better statement would be;

'Sorry, my script does not support your browser'.

}
}

[...]



document.write('<table border="0" cellpadding="0" cellspacing="0"
width="100%" height="85" bordercolor="white">');
document.write('<tr>');
document.write('<td width="15%">&nbsp;</td>');
document.write('<td align="center" width="70%">');
document.write('<img src="/rerv10f/images/header.jpg" border="0">');
document.write('</td>');
document.write('<td width="15%" valign="top" align="right"><a href="#"
Onclick="window.open(\'/RERV10O/rer001?form=admin&encusr=7A7BF76DA6CB6728E0C2424580A7491C&time=13411812152005\',\'ADMIN\');">Administration</a></td>');
document.write('</tr>');
document.write('<TR><TD COLSPAN="3" BGCOLOR="#FFFFFF"');
document.write('VALIGN="TOP" HEIGHT="20"><div id="MenuPos"
style="position:relative;width:80;height:20;"></DIV></TD>');
document.write('</TR>');
document.write('</TABLE>');

A single call to document.write would be far more efficient,
particularly when you are writing bits of a table in different statements:

document.write(
'<table border="0" cellpadding="0" cellspacing="0"',
' width="100%" height="85" bordercolor="white">',
'<tr><td width="15%">&nbsp;</td>',

...

'</TR></TABLE>'
);


[...]
<!-- Start Unplatted -->
<div id="unplat" style="position:relative;display:none;">
<table width="100%" border="0">
[...]

<option value="36">36</option>
</select></td>
<td width="30%"></td>
<tr>

Missing closing tag on TR.

As always, start by validating your HTML. There may be other errors.


[...]
 
T

Thomas 'PointedEars' Lahn

RobG said:
A single call to document.write would be far more efficient,
particularly when you are writing bits of a table in different statements:

Full ACK
document.write(
'<table border="0" cellpadding="0" cellspacing="0"',
' width="100%" height="85" bordercolor="white">',
'<tr><td width="15%">&nbsp;</td>',

...

'</TR></TABLE>'
);

Hmmm. W3C DOM Level 2 HTML does not define an unlimited number of
arguments for the HTMLDocument::write() method, only one. A UA may
or may not implement more. From past experience, I recommend to use
only one argument. And, of course, ETAGO delimiters MUST be escaped
within CDATA content.

document.write([
'<table border="0" cellpadding="0" cellspacing="0"',
' width="100%" height="85" style="border-color:white">',
'<tr><td width="15%">&nbsp;<\/td>',
...,
'<\/tr><\/table>'
].join("\n"));

(I like .join("\n") instead of .join("") because it makes generated
code easier legible when retrieved.)


Regards,
PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,818
Messages
2,569,736
Members
45,709
Latest member
DRISenaida

Latest Threads

Top