problemas con un formulario y (getElementById)

jvhector21 · #1 (**permalink**) 06/04/2011, 14:28

que tal, tengo un problema y no he podido resolverlo por eso pido ayuda a los foreros, tengo este codigo, pero no puedo ejecutarlo bien.

<html>
<head>
<script type="text/javascript">
function setButton(el_id){
document.getElementById("cero_tr").style.display ="none";
document.getElementById("uno").style.display ="none";

document.getElementById("dos").style.display ="none";
document.getElementById("tres").style.display ="none";
document.getElementById("cuatro").style.display ="none";
document.getElementById(el_id).style.display ="";
}
</script>

</head>
<body>
<form name="form1" method="post" action="ejemplo.php">
<input type="radio" name="opcion" value="cero" onClick='setButton(cero_tr);'>cero<br/>
<input type="radio" name="opcion" value="uno" onClick='setButton(uno_tr);'>uno<br/>
<input type="radio" name="opcion" value="dos" onClick='setButton(dos_tr);'>dos<br/>
<input type="radio" name="opcion" value="tres" onClick='setButton(tres_tr);'>tres<br/>
<input type="radio" name="opcion" value="cuatro" onClick='setButton(cuatro_tr);'>cuatro<br/>
<input type="submit"value="ok" />
</form>
<tr id="cero_tr" bgcolor="#000000" style=" display:none; width:100px; height:100px;"><td>uno</td></tr>
<tr id="uno_tr" bgcolor="#333333" style=" display:none; width:100px; height:100px;"><td>dos</td></tr>
<tr id="dos_tr" bgcolor="#666666" style=" display:none; width:100px; height:100px;"><td></td>tres</tr>
<tr id="tres_tr" bgcolor="#222222" style=" display:none; width:100px; height:100px;"><td></td><td>cuatro</td></tr>
<tr id="cuatro_tr" bgcolor="#444444" style=" display:none; width:100px; height:100px;"><td>cinco</td></tr>

</body>
</html>

lo que quiero hacer es que cuando yo presione alguna de las opciones me aparesca la informacion en la tabla con el mismo nombre. estaria muy agradecido de recibir su ayuda

laratik · #2 (**permalink**) 06/04/2011, 14:49

Código HTML:

<html>
<head>
<script type="text/javascript">
function setButton(el_id){
document.getElementById("cero_tr").style.display ="none";
document.getElementById("uno_tr").style.display ="none";

document.getElementById("dos_tr").style.display ="none";
document.getElementById("tres_tr").style.display ="none";
document.getElementById("cuatro_tr").style.display ="none";
document.getElementById(el_id).style.display ="block";
}
</script>

</head>
<body>
<form name="form1" method="post" action="ejemplo.php">
<input type="radio" name="opcion" value="cero" onClick='setButton("cero_tr");'>cero<br/>
<input type="radio" name="opcion" value="uno" onClick='setButton("uno_tr");'>uno<br/>
<input type="radio" name="opcion" value="dos" onClick='setButton("dos_tr");'>dos<br/>
<input type="radio" name="opcion" value="tres" onClick='setButton("tres_tr");'>tres<br/>
<input type="radio" name="opcion" value="cuatro" onClick='setButton("cuatro_tr");'>cuatro<br/>
<input type="submit"value="ok" />
</form>
<table>
<tr id="cero_tr" bgcolor="#000000" style=" display:none; width:100px; height:100px;"><td>uno</td></tr>
<tr id="uno_tr" bgcolor="#333333" style=" display:none; width:100px; height:100px;"><td>dos</td></tr>
<tr id="dos_tr" bgcolor="#666666" style=" display:none; width:100px; height:100px;"><td>tres</td></tr>
<tr id="tres_tr" bgcolor="#222222" style=" display:none; width:100px; height:100px;"><td></td><td>cuatro</td></tr>
<tr id="cuatro_tr" bgcolor="#444444" style=" display:none; width:100px; height:100px;"><td>cinco</td></tr>
</table>
</body>
</html>

ERRORES
1. Falta la etiqueta table
2. los valores enviados no estaban entre comillas
3. tres estaba fuera de las etiquetas <td></td>

jvhector21 · #3 (**permalink**) 06/04/2011, 16:30

gracias amigo; )