Mostrar un campo luego de una seleccion

[xalupeao]

Bueno lo que pasa es que necesito hacer lo siguiente, al selecionar un campo en este caso medal of honor automaticamente salga otro campo a la vista que se llame sv_password, les ejemplifico.

Código PHP:

  <form name="form1" method="post" enctype="multipart/form-data"> 
          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
      <td colspan="2" class="titlemedium"><div align="center">Datos del Servidor </div></td> 
    </tr> 
 
    <tr> 
 
      <td width="48%" class="tdrow1"><strong>Nombre </strong></td> 
 
      <td width="52%" class="tdrow2"><div align="left"> 
        <input name="nombre" type="text"  class="textinput" id="nombre"> 
      </div></td> 
    </tr> 
 
    <tr> 
 
      <td width="48%" class="tdrow1"><strong>Tag </strong></td> 
 
      <td width="52%" class="tdrow2"><div align="left"> 
        '.$titulo.' | <input name="tag" type="text"  class="textinput" id="tag"> 
      </div></td> 
    </tr> 
 
    <tr> 
 
      <td class="tdrow1"><strong>Juego</strong></td> 
 
      <td class="tdrow2"><div align="left"> 
        <label> 
        <select name="juego" id="juego"> 
          <option value="Medal Of Honor" selected>Medal Of Honor</option> 
          <option value="Counter Strike 1.6">Counter Strike 1.6</option> 
          <option value="Call Of Duty 2">Call Of Duty 2</option> 
          <option value="Tactical Ops">Tactical Ops</option> 
        </select> 
        </label> 
      </div></td> 
    </tr> 
 
    <tr> 
 
      <td class="tdrow1"><strong>Rcon Password </strong></td> 
 
      <td class="tdrow2"><div align="left"> 
        <input name="rcon" type="text"  class="textinput" id="rcon"> 
      </div></td> 
    </tr> 
 
    <tr> 
 
      <td class="tdrow1"><strong>Password</strong></td> 
 
      <td class="tdrow2"><div align="left"> 
        <input name="pass" type="text"  class="textinput" id="pass"> 
      </div></td> 
    </tr> 
 
// este campo que soolo se muestre si fue selecionaod Medal Of Honor     
    <tr> 
      <td class="tdrow1"><strong>Private Password </strong></td> 
      <td class="tdrow2"><div align="left"> 
          <input name="ppass" type="text"  class="textinput" id="ppass"> 
      </div></td> 
    </tr> 
 
    print<tr> 
 
      <td class="tdrow1"><strong>Config</strong></td> 
 
      <td class="tdrow2"><div align="left"> 
        <input name="cfg" type="text"  class="textinput" id="cfg"> 
      .cfg</div></td> 
    </tr> 
 
    <tr> 
 
      <td class="tdrow1"><strong>IP Servidor </strong></td> 
 
      <td class="tdrow2"><div align="left"> 
        <select name="ip" id="ip"> 
          <option value="200.27.124.130" selected>200.27.124.130</option> 
          <option value="200.27.124.131">200.27.124.131</option> 
          <option value="200.27.124.132">200.27.124.132</option> 
          <option value="200.27.124.133">200.27.124.133</option> 
          <option value="200.27.124.134">200.27.124.134</option> 
          <option value="200.27.124.135">200.27.124.135</option> 
          <option value="200.27.124.136">200.27.124.136</option> 
          <option value="200.27.124.137">200.27.124.137</option> 
          <option value="200.27.124.138">200.27.124.138</option> 
          <option value="200.27.124.139">200.27.124.139</option> 
                        </select> 
      </div></td> 
    </tr> 
 
    <tr> 
 
      <td class="tdrow1"><strong>Puerto</strong></td> 
 
      <td class="tdrow2"><div align="left"> 
        <input name="puerto" type="text" class="input" id="puerto" /> 
      </div></td> 
    </tr> 
 
 
    <tr> 
 
      <td colspan="2" class="tdrow1"><div align="center"> 
 
          <input type="submit" name="submit" value="Enviar"  id="button"> 
 
      <input type="button" name="cancelar" value="Cancelar"  onClick=history.go(-1);> 
 
        </div>        </td> 
    </tr> 
  </table> 
</form>  
   

La idea es simple pero no tengo ni la menor idea de como hacerlo, gracias espero que me puedan ayudar.

[KarenFerreira]

Le podrías poner un id al tr donde está el campo del password y dejarlo oculto, algo asi:

<tr id="password" style="display:none">

y en el select asignar una función javascript que lo muestre cuando se seleccione la opción deseada, algo asi:

<select name="juego" id="juego" onChange="muestrapass()">

y la función javascript quedaría asi:

function muestrapass()
{
if(document.getElementById("juego").value == "Medal of Honor")
document.getElementById("password").style.display = "";
else
document.getElementById("password").style.display = "none";
}

Si quieres que la opción de medal of honor aparezca seleccionada por defecto, entonces el campo del password aparecería por defecto, por lo que quedaría asi:

<tr id="password">

[xalupeao]

Disculpa peo se pueden añadir más de un value ?

Código PHP:

  function muestrapass() 
{ 
if(document.getElementById("juego").value == "Medal Of Honor") 
document.getElementById("ppass").style.display = ""; 
else 
document.getElementById("ppass").style.display = "none"; 
}  
   

Dejarlo algo como

Código PHP:

  function muestrapass() 
{ 
if(document.getElementById("juego").value == "Medal Of Honor" "Call Of Duty 2") 
document.getElementById("ppass").style.display = ""; 
else 
document.getElementById("ppass").style.display = "none"; 
}  
   

Gracias.

[David]

No, creo que no se puede. Debes poner dos condiciones. Así:

Código PHP:

  valor = document.getElementById("juego").value;
if(valor == "Medal Of Honor" || valor == "Call Of Duty 2")  
   

[xalupeao]

podrias añadirlo a este codigo que asi suelto no capto mucho.

<script language="javascript">

function muestrapass()
{
if(document.getElementById("juego").value == "Medal Of Honor")
document.getElementById("ppass").style.display = "";
else
document.getElementById("ppass").style.display = "none";
}
</script>

[David]

Reemplaza esto:

Código PHP:

  if(document.getElementById("juego").value == "Medal Of Honor")  
   

por el código.

[xalupeao]

Funciono 100% Gracias :D

[GatorV]

Tema trasladado a Javascript.

[xalupeao]

tengo una pregunta

quiero ocultar mas campos

pongo

<script type="text/javascript" language="JavaScript">
function test()
{
if(document.getElementById("ts_modalidad").value == "Servidor")
document.getElementById("ts_s_n").style.display = "";
else
document.getElementById("ts_s_n").style.display = "none";
}
</script>

funciona

pero

<script type="text/javascript" language="JavaScript">
function test()
{
if(document.getElementById("ts_modalidad").value == "Servidor")
document.getElementById("ts_s_n").style.display = "";
document.getElementById("ts_s_m").style.display = "";
else
document.getElementById("ts_s_n").style.display = "none";
document.getElementById("ts_s_m").style.display = "none";
}
</script>

pero nada >.<!!! plz