How to make a method universal

[Flic]

I have the following code which I made work for one item on my page,
now I've got more items and while it still works it takes affect on the
top item not the one that it should. What the code is doing is making a
text box visible and changing the value of something else.

I know what the problem is, and I know that it has to be made universal
to fix it, I just don't know how to do that. When I call the method I
have:
onchange="colourCheck(this.selectedIndex)"
as I need the value of the drop down box.

The method is:

function colourCheck(myForm){
if (myForm == 5){
document.getElementById('os1').style.display = "block";
document.getElementById('on1').value = "Other";
}
else {
document.getElementById('os1').style.display = "none";
}
}

Any help very much appreciated!

Thank you!

[RobG]

Flic said on 11/04/2006 9:38 AM AEST:

I have the following code which I made work for one item on my page,
now I've got more items and while it still works it takes affect on the
top item not the one that it should. What the code is doing is making a
text box visible and changing the value of something else.
By 'text box' do you mean an input element of type text? Or is it a div
or span with some text?

I know what the problem is, and I know that it has to be made universal
to fix it, I just don't know how to do that. When I call the method I
have:
onchange="colourCheck(this.selectedIndex)"
as I need the value of the drop down box.

The method is:

function colourCheck(myForm){
if (myForm == 5){
document.getElementById('os1').style.display = "block";

Unless you specifically want 'block', it is better to return the display
attribute to '' (empty string) to allow it to return to the default or
whatever it has been set to by CSS or inheritance.

document.getElementById('os1').style.display = "";
Search the archives for 'display block none'.

Setting an input to display: block is likely not appropriate - the
default CSS 2 display property for an input element is inline-block:

<URL:http://www.w3.org/TR/CSS21/sample.html>
Not all browsers might implement that, so use ''.
[...]

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

[Flic]

RobG wrote:

Flic said on 11/04/2006 9:38 AM AEST:

I have the following code which I made work for one item on my page,
now I've got more items and while it still works it takes affect on the
top item not the one that it should. What the code is doing is making a
text box visible and changing the value of something else.

By 'text box' do you mean an input element of type text? Or is it a div
or span with some text?

Sorry I wasn't very clear, I mean an input element of type text.

I know what the problem is, and I know that it has to be made universal
to fix it, I just don't know how to do that. When I call the method I
have:
onchange="colourCheck(this.selectedIndex)"
as I need the value of the drop down box.

The method is:

function colourCheck(myForm){
if (myForm == 5){
document.getElementById('os1').style.display = "block";

Unless you specifically want 'block', it is better to return the display
attribute to '' (empty string) to allow it to return to the default or
whatever it has been set to by CSS or inheritance.

document.getElementById('os1').style.display = "";
Search the archives for 'display block none'.

Setting an input to display: block is likely not appropriate - the
default CSS 2 display property for an input element is inline-block:

<URL:http://www.w3.org/TR/CSS21/sample.html>
Not all browsers might implement that, so use ''.

To be honest, I hadn't even thought of using that, changed now :-)

I realised that to get what I want I would probably need the id similar
to my this.SelectedIndex, but I wouldn't know how to do this as they
are only related to the drop down box with the onChange by being on the
same form.

[RobG]

Flic said on 11/04/2006 10:21 AM AEST:

RobG wrote:

[...]

Unless you specifically want 'block', it is better to return the display
attribute to '' (empty string) to allow it to return to the default or
whatever it has been set to by CSS or inheritance.

document.getElementById('os1').style.display = "";
Search the archives for 'display block none'.

Setting an input to display: block is likely not appropriate - the
default CSS 2 display property for an input element is inline-block:

<URL:http://www.w3.org/TR/CSS21/sample.html>
Not all browsers might implement that, so use ''.

To be honest, I hadn't even thought of using that, changed now :-)

I realised that to get what I want I would probably need the id similar
to my this.SelectedIndex, but I wouldn't know how to do this as they
are only related to the drop down box with the onChange by being on the
same form.

An option has a value and text, you can use both if you like, e.g. use
the value to determine which input to hide and the text to display
something to the user.

You can also use the form's elements collection rather than
getElementById. I have no idea what your form looks like or what you
are doing, but the following example may give you some ideas:
<script type="text/javascript">

function colourCheck(sel)
{
var form = sel.form;
if ( '5' == sel[sel.selectedIndex].value ){
form.os1.style.display = "";
form.on1.value = "Other";
} else {
form.os1.style.display = "none";
}
}
</script>

<form action="">
<select onchange="colourCheck(this);">
<option value="0">Select a value</option>
<option value="2">two</option>
<option value="5">five</option>
</select>
<input type="text" name="os1" value="os1">
<input type="text" name="on1" value="on1">
</form>

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

[Flic]

RobG wrote:

Flic said on 11/04/2006 10:21 AM AEST:

RobG wrote:

[...]

Unless you specifically want 'block', it is better to return the display
attribute to '' (empty string) to allow it to return to the default or
whatever it has been set to by CSS or inheritance.

document.getElementById('os1').style.display = "";
Search the archives for 'display block none'.

Setting an input to display: block is likely not appropriate - the
default CSS 2 display property for an input element is inline-block:

<URL:http://www.w3.org/TR/CSS21/sample.html>
Not all browsers might implement that, so use ''.

To be honest, I hadn't even thought of using that, changed now :-)

I realised that to get what I want I would probably need the id similar
to my this.SelectedIndex, but I wouldn't know how to do this as they
are only related to the drop down box with the onChange by being on the
same form.

An option has a value and text, you can use both if you like, e.g. use
the value to determine which input to hide and the text to display
something to the user.

You can also use the form's elements collection rather than
getElementById. I have no idea what your form looks like or what you
are doing, but the following example may give you some ideas:
<script type="text/javascript">

function colourCheck(sel)
{
var form = sel.form;
if ( '5' == sel[sel.selectedIndex].value ){
form.os1.style.display = "";
form.on1.value = "Other";
} else {
form.os1.style.display = "none";
}
}
</script>

<form action="">
<select onchange="colourCheck(this);">
<option value="0">Select a value</option>
<option value="2">two</option>
<option value="5">five</option>
</select>
<input type="text" name="os1" value="os1">
<input type="text" name="on1" value="on1">
</form>

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

The code did indeed give me ideas and I modified it to fit my code.
While it works for the first item it doesn't work for the ones after,
coming up as 'value' is null or not an object.

I've uploaded my code so you can see what I am trying to do, it can be
found at:
http://airraid.mancubus.net/flic/exp...necklaces.html
i didn't upload the pictures for the page hence them not displaying.

[[on]]

Flic wrote:
[snip ... old quotes]

The code did indeed give me ideas and I modified it to fit my code.
While it works for the first item it doesn't work for the ones after,
coming up as 'value' is null or not an object.

I've uploaded my code so you can see what I am trying to do, it can be
found at:
http://airraid.mancubus.net/flic/exp...necklaces.html
i didn't upload the pictures for the page hence them not displaying.

In your HTML you have 5 Forms.
Though they look the same, they aren't

The first one has (correct):
<select name="os0" onchange="colourCheck(this)">

The other 4 has (incorrect):
<select name="os0" onchange="colourCheck(this.selectedIndex)">

Make them the same and the script should basically work.

[Flic]

[on] wrote:

Flic wrote:
[snip ... old quotes]

The code did indeed give me ideas and I modified it to fit my code.
While it works for the first item it doesn't work for the ones after,
coming up as 'value' is null or not an object.

I've uploaded my code so you can see what I am trying to do, it can be
found at:
http://airraid.mancubus.net/flic/exp...necklaces.html
i didn't upload the pictures for the page hence them not displaying.

In your HTML you have 5 Forms.
Though they look the same, they aren't

The first one has (correct):
<select name="os0" onchange="colourCheck(this)">

The other 4 has (incorrect):
<select name="os0" onchange="colourCheck(this.selectedIndex)">

Make them the same and the script should basically work.

Thank you for pointing this out. I realised this earlier today along
with something else in the other four that I had to change, but as
quite often happens I couldn't get to the computer to fix it at the
time. It was a silly mistake I know!

Everything working now :-D