Need help reading all Select options for use in getElementByid

J

JCK

I have a drop down select form field and when a user makes a selection
it triggers a function that changes the style of a hidden div that
contains an id that matches the option value of the selected option.
So for example if one selected Optimize below in the drop down menu a
div with id Optimize would have its style changed from the default
none to inline.

function revealFormField(fieldname,value) {
document.getElementById(value).style.display = 'inline';
}

<select name="table" id="table" onchange="revealFormField
('table',this.options[this.selectedIndex].value);">
<option value="" selected="selected">Select One</option>
<option value="Check">Check</option>
<option value="Optimize">Optimize</option>
<option value="Repair">Repair</option>
</select>

This works but if someone subsequently changes the Select drop down to
something else the div from the previously selected option still shows
so I would like to add some code to the function to make sure all divs
containing an id that match any of the option values to be set to
hidden before changing the the one selected to inline. Below is my
attempt to modify the function to do so but it fails with "Object
required". I suspect it is because the option values are strings and
not objects but I don't know how to convert them or what else is wrong
with my function.

function revealFormField(fieldname,value) {
for(var i = 1; i <= document.getElementById(fieldname).length; i++) {
var option_name = document.getElementById(fieldname).options.value;
document.getElementById(option_name).style.display = 'none'; // LINE
THAT HAS ERROR
}
document.getElementById(value).style.display = 'inline';
}
 
S

SAM

Le 8/24/09 9:12 AM, JCK a écrit :
I have a drop down select form field and when a user makes a selection
it triggers a function that changes the style of a hidden div that
contains an id that matches the option value of the selected option.
So for example if one selected Optimize below in the drop down menu a
div with id Optimize would have its style changed from the default
none to inline.

function revealFormField(fieldname,value) {
document.getElementById(value).style.display = 'inline';
}

<select name="table" id="table" onchange="revealFormField
('table',this.options[this.selectedIndex].value);">
<option value="" selected="selected">Select One</option>
<option value="Check">Check</option>
<option value="Optimize">Optimize</option>
<option value="Repair">Repair</option>
</select>

This works but if someone subsequently changes the Select drop down to
something else the div from the previously selected option still shows
so I would like to add some code to the function to make sure all divs
containing an id that match any of the option values to be set to
hidden before changing the the one selected to inline. Below is my
attempt to modify the function to do so but it fails with "Object
required". I suspect it is because the option values are strings and
not objects but I don't know how to convert them or what else is wrong
with my function.

function revealFormField(fieldname,value) {
for(var i = 1; i <= document.getElementById(fieldname).length; i++) {
Click to expand...

i < document.getElementById(fieldname).length;
var option_name = document.getElementById(fieldname).options.value;
document.getElementById(option_name).style.display = 'none'; // LINE
THAT HAS ERROR
}
document.getElementById(value).style.display = 'inline';
}
Click to expand...


<script type="text/javascript">
function revealFormField(fieldname,value) {
fieldname = document.getElementById(fieldname);
for(var i = 1; i < fieldname.length; i++) {
var option_name = fieldname.options.value;
document.getElementById(option_name).style.display = '';
}
document.getElementById(value).style.display = 'inline';
}
</script>
<style type="text/css">
div { displa: none; }
</style>
</head>
<body>
<form action="#">
<select name="table" id="table" onchange="revealFormField
('table',this.options[this.selectedIndex].value);">
<option value="rien" selected="selected">Select One</option>
<option value="Check">Check</option>
<option value="Optimize">Optimize</option>
<option value="Repair">Repair</option>
</select>
</form>
<div id="Check">Check</div>
<div id="Optimize">Optimize</div>
<div id="Repair">Repair</div>
 
J

JCK

I tried the modified code but still get a script error "Object
Required" for the following line:

<script type="text/javascript">
function revealFormField(fieldname,value) {
fieldname = document.getElementById(fieldname);
for(var i = 1; i < fieldname.length; i++) {
var option_name = fieldname.options.value;
document.getElementById(option_name).style.display = ''; // LINE WITH
ERROR
}
document.getElementById(value).style.display = 'inline';
}
</script>
 
S

SAM

Le 8/24/09 10:50 PM, JCK a écrit :
I tried the modified code but still get a script error "Object
Required" for the following line:

<script type="text/javascript">
function revealFormField(fieldname,value) {
fieldname = document.getElementById(fieldname);
for(var i = 1; i < fieldname.length; i++) {
var option_name = fieldname.options.value;
document.getElementById(option_name).style.display = ''; // LINE WITH
ERROR
Click to expand...


Not me.

Didn't you forget in the head :

<style type="text/css">
div { display: none }
}
document.getElementById(value).style.display = 'inline';
}
</script>
Click to expand...

The divs of the given demo are stylled in none display
(by default they aren't displayed)
so :
aDiv.style.display = '';
is the same as
aDiv.style.display = 'none'
(in fact ... almost the same)
 
J

JCK

I did add that but still get that object required error. I am using
IE8 and the page I am testing on is http://www.phpinteractive.com/test.php

Are you sure one can insert a string value into getElementById like I
am doing with var option_name? I mean it seems like getElementById is
looking for divs named option_name which it will of course never find.
 
J

JCK

Ok I got it to work by changing the function to eval the option_name
variable. Don't know if this is the right way to do it but I can't get
it to work any other way.

Next problem is unlike my initial example some of the select options
do not have corresponding divs to hide and unhide so I need to add a
check in the function to see if the div by the same name exist before
trying to hide or unhide their style or I get an undefined error on
those divs that do not exist. Problem is when I try to add a line to
test those to hide it returns a undefined error on the div that is
undefined.

<script type="text/javascript">

function revealFormField(fieldname,value) {
fieldname = document.getElementById(fieldname);

for(var i = 1; i < fieldname.length; i++) {
var option_name = fieldname.options.value;
if(document.getElementById(eval(option_name)) != undefined){ // Error
on undefined divs
document.getElementById(eval(option_name)).style.display = '';
}
}

if(document.getElementById(value) != undefined){
document.getElementById(value).style.display = 'inline';
}

}

</script>
 
S

SAM

Le 8/25/09 4:13 AM, JCK a écrit :
I did add that but still get that object required error. I am using
IE8 and the page I am testing on is http://www.phpinteractive.com/test.php

Are you sure one can insert a string value into getElementById like I
am doing with var option_name? I mean it seems like getElementById is
looking for divs named option_name which it will of course never find.
Click to expand...


Of course, it is always better to test if the element exists :
(and, please, don't use eval() !)

if(document.getElementById(divId))
{
// do that
}
else
{
// do this
}

<script type="text/javascript">
function revealFormField(fieldname,value) {
fieldname = document.getElementById(fieldname);
if(fieldname) {
for(var i = 1; i < fieldname.length; i++) {
var option_name = fieldname.options.value;
if(document.getElementById(option_name)) {
document.getElementById(option_name).style.display = '';
}
}
if(document.getElementById(value)) {
document.getElementById(value).style.display = 'inline';
}
}
}
</script>


Variante :
==========

<script type="text/javascript">
function revealFormField(what) {
var option_name;
for(var i = 1, n = what.length; n>i; i++) {
option_name = what.options.value;
if(document.getElementById(option_name)) {
document.getElementById(option_name).style.display = '';
}
}
option_name = what.options[what.selectedIndex].value;
if(document.getElementById(option_name)) {
document.getElementById(option_name).style.display = 'inline';
}
}
</script>
<form action="#">
<select name="table" id="table" onchange="revealFormField(this);">
 
J

JCK

The object required error I got from your originally suggested code is
no longer occuring for me and is working fine so I must have messed
something up before. Appreciate the simpler example of how to add a
check if an element exists and your example functions.
 

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

Similar Threads

Multi select options in a menu 1
Add Image and label dynamically inside the dropdown 2
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
How to display input options only after selecting an option from the 'select class' tag JS? 6
Set value after clicking in field 11
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
I need help making a zooming function 11

Members online

Total: 23 (members: 3, guests: 20)
Robots: 386

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,020
Latest member
GenesisGai

Latest Threads

Top