Pulling my hair out with IE and an onClick toggle Box

[iannorton]

Hi,

I've made a simple drop down toggle switch that switches a text box
from one to another.

The script runs fine in IE, but refuses to work in IE, not even
pointing me at an error.

Wondered if anyone could help?

<script type="text/javascript">
function toggleBox(szDivID)
{
if(document.getElementById) // Only Gen 5 browsers +
{
var obj = document.getElementById(szDivID);
if (obj.name == 'nameForm')
{
var obj1 = document.getElementById('jobForm')
obj1.style.display = "none";
var obj2 = document.getElementById('nameForm')
obj2.style.display = "block";
}

if (obj.name == 'jobForm')
{
var obj1 = document.getElementById('nameForm')
obj1.style.display = "none";
var obj2 = document.getElementById('jobForm')
obj2.style.display = "block";
}
}
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#jobForm
{
display: none;
}

#nameForm
{
display: block;
}
</style>
</head>
</body>
<form action="" method="get" name="trentws">
<select id="searchtype" style="width:200px">
<option value="By name" onClick="toggleBox('nameForm');"
selected="selected">Search by name</option>
<option value="By job title" onClick="toggleBox('jobForm');">Search
by job title</option>
</select>
<input type="text" autocomplete="off" name="nameForm" value="name"
id="nameForm" style="width:200px" />
<input type="text" autocomplete="off" name="jobForm" value="job"
id="jobForm" style="width:200px" />
</form>

Any help would be greatly appreciated, it should all be running in
standards compliance mode.

Ian

 

[Jeff North]

| Hi,
|
| I've made a simple drop down toggle switch that switches a text box
| from one to another.
|
| The script runs fine in IE, but refuses to work in IE, not even
| pointing me at an error.
|
| Wondered if anyone could help?
|
| <script type="text/javascript">
| function toggleBox(szDivID)
| {
| if(document.getElementById) // Only Gen 5 browsers +
| {
| var obj = document.getElementById(szDivID);
| if (obj.name == 'nameForm')
| {
| var obj1 = document.getElementById('jobForm')
| obj1.style.display = "none";
| var obj2 = document.getElementById('nameForm')
| obj2.style.display = "block";
| }
|
| if (obj.name == 'jobForm')
| {
| var obj1 = document.getElementById('nameForm')
| obj1.style.display = "none";
| var obj2 = document.getElementById('jobForm')
| obj2.style.display = "block";
| }
| }
| }
| </script>
| <style>
| ul {
| list-style-type: none;
| margin: 0;
| padding: 0;
| }
|
| #jobForm
| {
| display: none;
| }
|
| #nameForm
| {
| display: block;
| }
| </style>
| </head>
| </body>
| <form action="" method="get" name="trentws">
| <select id="searchtype" style="width:200px">
| <option value="By name" onClick="toggleBox('nameForm');"
| selected="selected">Search by name</option>
| <option value="By job title" onClick="toggleBox('jobForm');">Search
| by job title</option>
| </select>
| <input type="text" autocomplete="off" name="nameForm" value="name"
| id="nameForm" style="width:200px" />
| <input type="text" autocomplete="off" name="jobForm" value="job"
| id="jobForm" style="width:200px" />
| </form>
|
| Any help would be greatly appreciated, it should all be running in
| standards compliance mode.

include the display:block or display:none within your style
statements.

 

[iannorton]

include the display:block or display:none within your style
statements.

They are present in both the jobForm and nameForm styles?

Did you mean elsewhere?

Ian

 

[web.dev]

<form action="" method="get" name="trentws">
<select id="searchtype" style="width:200px">
<option value="By name" onClick="toggleBox('nameForm');"
selected="selected">Search by name</option>
<option value="By job title" onClick="toggleBox('jobForm');">Search
by job title</option>
</select>

An option element does not have an onclick event handler. Instead, you
can place an onchange event handler on the select element. Then you
can check to see which option was selected and execute appropriately.

<input type="text" autocomplete="off" name="nameForm" value="name"
id="nameForm" style="width:200px" />
<input type="text" autocomplete="off" name="jobForm" value="job"
id="jobForm" style="width:200px" />

Also I don't recall the input element ever having an autocomplete
attribute. At least not in the w3c standard. Perhaps a propietary
attribute?

 

[Jeff North]

| Jeff North wrote:
| > On 24 Aug 2006 06:19:05 -0700, in comp.lang.javascript
| > (e-mail address removed)
| >
| > >| Hi,
| > >|
| > >| I've made a simple drop down toggle switch that switches a text box
| > >| from one to another.
| > >|
| > >| The script runs fine in IE, but refuses to work in IE, not even
| > >| pointing me at an error.
| > >|
| > >| Wondered if anyone could help?
| > >|
[snip]

| > >| <input type="text" autocomplete="off" name="nameForm" value="name"
| > >| id="nameForm" style="width:200px" />
| > >| <input type="text" autocomplete="off" name="jobForm" value="job"
| > >| id="jobForm" style="width:200px" />
| > >| </form>
| > >|
| > >| Any help would be greatly appreciated, it should all be running in
| > >| standards compliance mode.
| >
| > include the display:block or display:none within your style
| > statements.
|
| They are present in both the jobForm and nameForm styles?
|
| Did you mean elsewhere?

Place the display:etc inline (with the necessary control) i.e.
<input type="text" autocomplete="off" name="jobForm" value="job"
id="jobForm" style="width:200px; display:block;" />

 

[iannorton]

| Jeff North wrote:
| > On 24 Aug 2006 06:19:05 -0700, in comp.lang.javascript
| > (e-mail address removed)
| >
| > >| Hi,
| > >|
| > >| I've made a simple drop down toggle switch that switches a text box
| > >| from one to another.
| > >|
| > >| The script runs fine in IE, but refuses to work in IE, not even
| > >| pointing me at an error.
| > >|
| > >| Wondered if anyone could help?
| > >|
[snip]

| > >| <input type="text" autocomplete="off" name="nameForm" value="name"
| > >| id="nameForm" style="width:200px" />
| > >| <input type="text" autocomplete="off" name="jobForm" value="job"
| > >| id="jobForm" style="width:200px" />
| > >| </form>
| > >|
| > >| Any help would be greatly appreciated, it should all be running in
| > >| standards compliance mode.
| >
| > include the display:block or display:none within your style
| > statements.
|
| They are present in both the jobForm and nameForm styles?
|
| Did you mean elsewhere?

Place the display:etc inline (with the necessary control) i.e.
<input type="text" autocomplete="off" name="jobForm" value="job"
id="jobForm" style="width:200px; display:block;" />

Hi,

Thanks for your help with this, i changed the select statement as
suggested.

It now reads: -

<select id="searchtype"
onChange="toggleBox(options[selectedIndex].value)">
<option value="nameForm" selected="selected">Search by name</option>
<option value="jobForm">Search by job title</option>
</select>

Works a treat.

The Autocomplete is an IE only attribute, pretty much all of our users
use IE and it's for an AJAX autocomplete box, so disabling it is quite
important.

Cheers for the advice.

Ian