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