show/hide input based on selection 1

[ttuser4]

Hi, I have one selection (R4) and want to hide input (color1other) unless selected "other"
so far the input stays on all the the time
any help how to make it work, please?

<style type="text/css">
.hidden {
display: none;
}
</style>

<script type="text/javascript">

function enableOther()
{
if (!document.getElementById) return;
var s = document.getElementById('R4');
if (!s) return;
if (s.options[s.selectedIndex].value != 'yes') return;
var t = document.getElementById('color1other');
if (!t) return;
t.disabled = false;
t.className = '';
}

function init()
{
if (!document.getElementById) return;
var s = document.getElementById('R4');
if (!s) return;
s.onchange = enableOther;
var t = document.getElementById('color1other');
if (!t) return;
t.disabled = true;
t.className = 'hidden';
}

window.onload = init;
</script>
...
<td width="*"><select size="1" id="R4" name="R4" onchange="enableOther(this);">
<option selected value="noSS">Sand Stone (Ral 1019)</option>
<option value="noEW">Euro White (Ral 9010)</option>
<option value="noQG">Quartz Grey (Ral 8014)</option>
<option value="noJB">Java Brown (Ral 8014)</option>
<option value="yes">other</option>
<input type="text" id="color1other" name="color1other" Size=15>
</td>

 

[ggriffit]

I've used some similar code on my site -

http://www.greggriffiths.org/webdev/links.html

which should provide what you need.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006

http://www.greggriffiths.org/livelink/

 

[feherke]

Hi

I would use only this JavaScript ( with the same HTML ) :

function enableOther(s)
{
  if (!document.getElementById) return;
  var t = document.getElementById('color1other');
  if (!t) return;
  t.disabled = s.options[s.selectedIndex].value != 'yes'
  t.className = t.disabled ? 'hidden' : '';
}

window.onload = function() { enableOther(document.getElementById('R4')) }

Feherke.

http://rootshell.be/~feherke/

 

[ttuser4]

to feherke - I tried your code but it didn't make any difference

to ggriffit - under what category?

 

[feherke]

Hi

I tried your code but it didn't make any difference

How ? Show us.

Feherke.

http://rootshell.be/~feherke/

 

[ttuser4]

used code:

<script type="text/javascript">

function enableOther(s)
{
if (!document.getElementById) return;
var t = document.getElementById('color1other');
if (!t) return;
t.disabled = s.options[s.selectedIndex].value != 'yes'
t.className = t.disabled ? 'hidden' : '';
}

window.onload = function() { enableOther(document.getElementById('R4')) }

</script>
...
<td width="*"><select size="1" name="R4" id="R4" onchange="enableOther(this);">
<option selected value="noSS">Sand Stone (Ral 1019)</option>
<option value="noEW">Euro White (Ral 9010)</option>
<option value="noQG">Quartz Grey (Ral 8014)</option>
<option value="noJB">Java Brown (Ral 8014)</option>
<option value="yes">other</option>
<input type="text" id="color1other" name="color1other" Size=15>
</td>

 

[feherke]

Hi

That is correct. So when the "other" item is selected, the color1other [tt]input[/tt] appears, otherwise disappears.

Is not that what you want ?

Feherke.

http://rootshell.be/~feherke/

 

[ttuser4]

yes, this is what I want, but the problem is that the color1other input is showed/visible all the time, regardless of the selection.

 

[feherke]

Hi

You had a [tt]style[/tt] in your original code. Do you have it ? That is still needed.

Or do it without that [tt]style[/tt] :

function enableOther(s)
{
  if (!document.getElementById) return;
  var t = document.getElementById('color1other');
  if (!t) return;
  t.disabled = s.options[s.selectedIndex].value != 'yes'
  t.[red]style.display[/red] = t.disabled ? '[red]none[/red]' : '[red]inline[/red]';
}

window.onload = function() { enableOther(document.getElementById('R4')) }

Feherke.

http://rootshell.be/~feherke/

 

[ttuser4]

yes, I still had that style.

thanks, this your new code works, except the color1other input is there on load (it works when selection changes)

 

[feherke]

Hi

Well, it hides the [tt]input[/tt] [tt]onload[/tt] too, to me.

Do you have other JavaScript code, which could interfere with that [tt]onload[/tt] ?

Feherke.

http://rootshell.be/~feherke/

 

[ttuser4]

not sure, there might be. i don't have all the code. just want modify one form.

 

[ttuser4]

yes, I found it and added:

<body onload="stripe('info'); stripe('spec'); stripe('meas'); stripe('gable'); stripe('acc'); stripe('extra'); stripe('distax'); stripe('serv'); enableOther(document.getElementById('R4');">

now it works ok. thank you!

 

[ttuser4]

now the other script, stripe(), doesn't work (onload event)

 

[feherke]

Hi

There is a syntax error :

<body onload="stripe('info'); stripe('spec'); stripe('meas'); stripe('gable'); stripe('acc'); stripe('extra'); stripe('distax'); stripe('serv'); enableOther(document.getElementById('R4')[COLOR=red pink])[/color];">

I suppose that you kept the [tt]window.onload = function() { enableOther(document.getElementById('R4')) }[/tt] in place. Until now, that was overwritten by the [tt]body[/tt] tag's [tt]onload[/tt] attribute, so never existed anymore when the time of its execution arrived. But now you made a syntax error in the [tt]body[/tt] tag's [tt]onload[/tt] attribute, and the [tt]window.onload[/tt] [tt]function[/tt] was not replaced anymore with the now invalid code.

Hmm... If the above explanation was unclear, just add the missing closing parenthesis ( ) ). (-:

Feherke.

http://rootshell.be/~feherke/