Mostrar Tabla A Partir De Un Radio

lrunge · #1 (**permalink**) 08/02/2007, 15:43

Hola a todos, esto me esta volviendo loco.

tengo esto:

<input name="pago" type="radio" value="tdc">
<input name="pago" type="radio" value="retiro">

Necesito que al seleccionar el primero (TDC) me aparezca esta tabla

Código HTML:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="tdc">
  <tr>
    <td><input name="campo1" type="text" id="campo1"></td>
  </tr>
</table>

Y al seleccionar (RETIRO) aparezca esta otra

Código HTML:

<table width="100%" border="0" cellpadding="0" cellspacing="0" id="retiro">
  <tr>
    <td><input name="campo2" type="text" id="campo2"></td>
  </tr>
</table>

Cabe destacar que en esas tablas tengo textbox diferentes en cada una de ellas, las cuales tengo que llenar a mano despues

Espero que me puedan ayudar, salu2

Nano_ · #2 (**permalink**) 08/02/2007, 16:10

Saludos, se me ocurre que lo podrias realizar de la siguiente forma:

Código HTML:

<input name="pago" type="radio" value="tdc"  onClick="validate_radio1()">
<input name="pago" type="radio" value="retiro" onClick="validate_radio2()">

luego creas dos funciones javascript para que controles, cuando hagas click sobre una de ellas se te active la funcion

Código HTML:

function validate_radio1() 
	{
    habilita_aprobado();
   
    }
function deshabilita_aprobado()
	{
          document.getElementById('tdc').style.display='none';
	}
	
function habilita_aprobado()
	{
          document.getElementById('tdc').style.display='block';
	}

function validate_radio2() 
	{
    habilita_aprobado2();
  
    }
function deshabilita_aprobado2()
	{
          document.getElementById('retiro').style.display='none';
	}
	
function habilita_aprobado2()
	{
          document.getElementById('retiro').style.display='block';
	}

y por ultimo tus tablas con un id

TDC

Código HTML:

<table id="tdc" width="100%" border="0" cellpadding="0" cellspacing="0" id="tdc"> <tr> <td><input name="campo1" type="text" id="campo1"></td> </tr> 
</table>

Retiro

Código HTML:

<table id="retiro" width="100%" border="0" cellpadding="0" cellspacing="0" id="retiro"> <tr> <td><input name="campo2" type="text" id="campo2"></td> </tr> </table>

Y por ultimo en el body activas las funciones para que no aparezca la tabla y solamente aparecera cuando oprimas sobre el radio

Código HTML:

<body onload="deshabilita_aprobado(),deshabilita_aprobado2()" >

Bueno espero que esto te sirva o sino que por lo menos te de una idea de como podrias solucionarlo.

Hasta Pronto

lrunge · #3 (**permalink**) 09/02/2007, 07:45

Esta bien!!! Funciona PARCIALMENTE, cuando selecciono la primera opcion, me aparece la primera tabla, o cuando selecciono la segunda, me aparece la segunda tabla... hasta ahi esta bien...

Pero, cuando primero selecciono una opcion aparece una tabla y despues cuando selecciono la otra opcion aparece la otra tabla y se quedan las 2 tablas y la idea es que al seleccionar una, aparezca una tabla, y al seleccionar la otra, aparezca la otra tabla sin que se quede la tabla anterior.

Espero que me puedan entender, lo que sucede es que mis conocimientos en javascript son muy vagos... saludos

JavierB · #4 (**permalink**) 09/02/2007, 09:06

Hola lrunge

Prueba este ejemplo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function mostrar(num) {
  document.getElementById('tabla1').style.display = (num==1) ? 'block' : 'none';
  document.getElementById('tabla2').style.display = (num==2) ? 'block' : 'none';
}
</script>
</head>
<body>
<input type="radio" name="rad" checked="checked" onclick="mostrar(1)" />
<input type="radio" name="rad" onclick="mostrar(2)" />
<table id="tabla1">
<tr><td>Texto 1</td></tr>
</table>
<table id="tabla2" style="display:none">
<tr><td>Texto 2</td></tr>
</table>
</body>
</html>

Saludos,