Javascript visibility help please...

KamikaziRunner

09-25-2005, 05:29 PM

Well, im not new to programming but javascript is starting to piss me off :).

I love php to death, but if course it cant preform some things javascript can, right at the moment i have a select dropdown that has an "onchange" command to a javascript function. Now this function, if the value of select equals something, *displays* another input text that they can enter info into. But its only for this one value, heres the form..

<?
echo '<TR><TD><select name="HitM1" onchange="javascript:Ringer(HitM1)">';
echo '<option value="none">Nobody</option>';
$result = mysql_query($query) or die (mysql_error());
while ($dmi=mysql_fetch_array($result)) {
echo "<option value='".$dmi['CShandle']."'>".$dmi['CShandle']."</option>";
}
echo '<option value="ringer">Ringer</option></select></TD></TR>';

echo '<TR style="display:none" id="HitM11"><TD>';
echo '<input type="text" name="HitM11" maxlength=20 size=20 value="asshole">';
echo '</TD></TR>';
?>

if you cant read php real well, heres it in basic html

<TR><TD><select name="HitM1" onchange="javascript:Ringer(HitM1)">

<option value="none">Nobody</option>';

//Just a database query to create the dropdown menu

$result = mysql_query($query) or die (mysql_error());
while ($dmi=mysql_fetch_array($result)) {
//creates the options
<option value='".$dmi['CShandle']."'>".$dmi['CShandle']."</option>";
}
//adds one more option
<option value="ringer">Ringer</option></select></TD></TR>
//part that i want displayed if "ringer" is selected

<TR style="display:none" id="HitM11">
<TD>
<input type="text" name="HitM11" maxlength=20 size=20>
</TD>
</TR>

and heres the function ive been trying to do, its kinda screwed up because ive been trying tihs serveral ways...

<script language="Javascript">
function Ringer(item) {
var what = item.value;
var target = item.name+"1";
if (what =="ringer") {
target.style.display="";
}
}
</script>

HELP ME PLEASE!

rm-f

09-25-2005, 06:01 PM

... basic html ....
CODE

this is not HTML, copy page sorce (browser) to see how processed PHP looks like, and post the one here.

KamikaziRunner

09-25-2005, 07:58 PM

<select name="HitM1" onchange="javascript:Ringer(HitM1)"><option value="none">Nobody</option><option value='KamikaziRunner'>KamikaziRunner</option><option value='Akira'>Akira</option><option value='Dark'>Dark</option><option value='Mauler'>Mauler</option><option value='ice'>ice</option><option value='SniperWolf'>SniperWolf</option><option value='!cOn'>!cOn</option><option value='Cypher'>Cypher</option><option value='GD'>GD</option><option value='baller'>baller</option><option value='fatmatt'>fatmatt</option><option value="ringer">Ringer</option></select>

<TR style="display:none" id="HitM11">
<TD>
<input type="text" name="HitM11" maxlength=20 size=20>
</TD>
</TR>

Theres the html coding, tho it doesnt affect my javascript, i can only make the field invisible but when i try to do the function, it doesnt make it visible.

help me please?

gph

09-25-2005, 11:16 PM

Something like this (not tested)

<select name="HitM1" onchange="Ringer(this)">

function Ringer(item){
if(item.options[item.selectedIndex].value =='ringer')
document.getElementById(item.name+'1').style.display='block'
}

rm-f

09-25-2005, 11:54 PM

<html>
<head>
<script language="Javascript">
function Ringer(item) {
var what = item.value;
var target = item.name + "1";
if (what == "ringer") {
document.getElementById(target).style.display = ""; //target.style.display = "";
}
}
</script>
</head>
<body>
<select name="HitM1" onchange="javascript:Ringer(this)"> 
<option value="none">Nobody</option>
<option value='KamikaziRunner'>KamikaziRunner</option>
<option value='Akira'>Akira</option>
<option value='Dark'>Dark</option>
<option value='Mauler'>Mauler</option>
<option value='ice'>ice</option>
<option value='SniperWolf'>SniperWolf</option>
<option value='!cOn'>!cOn</option>
<option value='Cypher'>Cypher</option>
<option value='GD'>GD</option>
<option value='baller'>baller</option>
<option value='fatmatt'>fatmatt</option>
<option value="ringer">Ringer</option>
</select>
<table>
<TR style="display:none" id="HitM11">
<TD>
<input type="text" name="HitM11" maxlength=20 size=20>
</TD>
</TR>
</table>
</body>
</html>

gph

09-26-2005, 02:06 AM

Hi rm-f, just FYI

Although item.value works in modern browsers it's not actually correct because a select element doesn't have a value attribute.

Option elements have a value attribute so a selected option should be referenced using the (long-winded) options array/collection

item.options[item.selectedIndex].value

likewise

item.options[item.selectedIndex].text

On another topic, I tried your test page and was surprised to see that style.display = "" works. I was under the (obviously false) impression that "" only returns a style to the state that it was first set. Learn something every day :)

KamikaziRunner

09-26-2005, 02:09 PM

lol thanx im going to go try it now, im really good at php and im trying to learn javascript because they are both excellent programs to know, but at the moment learning javascript is proving more difficult then php. Bah lol.