Necesito una mano para un formulario html interactivo

chwilen · #1 (**permalink**) 08/03/2013, 08:59

Hola amigos/as,
tengo un problemilla con un formulario en html. La cuestión es que uno de los campos del formulario es una etiqueta select donde en función del valor seleccionado me gustaría que el formulario o pidiera un campos u otros, he estado mirando el evento onclick pero no lo acabo de ver claro
<html>
<head>
</head>
<form method="post">
<table>
<tr>
Escoja opcion<select name="tipo" size=1 >
<option value="opcion1">opcion 1</option>
<option value="opcion2">opcion 2</option>
</select>
</tr>
(...)

<tr>
Introduzca su edad:<input type="text" id="edad" name="edad"/>
</tr>

<tr>
Introduzca su nombre:<input type="text" id="nombre" name="nombre"/>
</tr>
</table>
</form>
</html>

¿Alguien sabe como hacerlo?
Gracias de antemano y saludos

pzin · #2 (**permalink**) 08/03/2013, 10:18

Con JavaScript puedes hacerlo. En las faqs relativas a formularios seguro que hay algo.

DoctorHTML · #3 (**permalink**) 08/03/2013, 11:26

Eso se podria hacer con jQuery, le tendrias que poner un id a los select y a los <tr> pero es fácil... Te paso el código:

Código Javascript:

Ver original$(document).ready(function() {
  $('.opcion2').click(function(){
    $('.tropcion1').css('display','none');
    $('.tropcion2').css('display', 'block');
});
 
  $('.opcion1').click(function(){
    $('.tropcion2').css('display','none');
    $('.tropcion1').css('display', 'block');
});
 
});

Y el html :

Código HTML:

Ver original<form method="post">
<table>
<tr>
Escoja opcion<select name="tipo" size=1 >
<option value="opcion1" class="opcion1">opcion 1</option>
<option value="opcion2" class="opcion2">opcion 2</option>
</select>
</tr>
<!-- Aqui es donde quiero que si se ha seleccionado la opcion1 del
select muestre esto -->
<tr class="tropcion1">
    <td>Introduzca su edad:<input type="text" id="edad" name="edad"/></td>
</tr>
<!-- O si se ha seleccionado la opcion2 del select muestre esto otro -->
<tr class="tropcion2">
    <td>Introduzca su nombre:<input type="text" id="nombre" name="nombre"/></td>
</tr>
</table>
</form>

Recuerda que para usar jQuery tienes que añadir el framework en el <head>

Un saludo

chwilen · #4 (**permalink**) 11/03/2013, 02:19

Muchas gracias Bonez echaré un vistazo a las fqs de formularios y también muchas gracias DoctorHTML probaré a hacerlo como me has dicho, un saludo a los dos y gracias de nuevo por la pronta respuesta.