Ocultar y mostrar campos de un formulario

Posted by On septiembre 17, 2017 0 Comment

Actualmente me encuentro trabajando en una empresa de eventos, y es muy normal que en las webs de los mismos nos encontremos con una situación que aunque en principio puede parecer compleja en realidad es muy sencilla y es la de ocultar y mostrar campos de un formulario según las opciones que se pueden ir seleccionando en el mismo.

Aunque el ejemplo que vamos a ver no tiene ningún estilo ni nada parecido, la razón ha sido que lo he hecho así para que podáis modificarlo a vuestro gusto y necesidades, bueno sin más vamos al turrón.

La situación sería la siguiente, un usuario que va a acudir a un evento tiene que marcar si puede llegar por si mismo a la sede del mismo, o si por el contrario necesita que lo recojan, pero debemos de tener en cuenta que cuando el asistente marque que quiere que lo recojan tiene que marcar sí o sí el lugar de recogida sin posibilidad de enviar el formulario a menos que marque la opción necesaria o bien que vuelva a marcar no para que desaparezca esa sección del formulario.

Para este suceso vamos a crear el siguiente html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<form method="" actio="" name="fregistro">
		<label for="">¿Quiere que le recojamos?</label>
		<input type="radio" name="recoger" value="si" id="si" onclick="recoger_usuario()" required />Sí
		<input type="radio" name="recoger" value="no" id="no" onclick="recoger_usuario()" />No
		<div id="recojanme" style="display:none">
			<hr>
			<input type="radio" name="metodo" value="aeropuerto" id="recogiendo"/>Aeropuerto<br>
			<input type="radio" name="metodo" value="puerto" />Puerto<br>
			<input type="radio" name="metodo" value="estacion" />Estacion<br>
		</div>
		<input type="submit" value="Enviar"/>
	</form>
</body>
</html>

y le añadiremos el siguiente script de js:

function recoger_usuario(){
	if(document.fregistro.recoger[0].checked == true){
		document.getElementById('recojanme').style.display='block';
		document.getElementById('recogiendo').required = true;
	}else{
		document.getElementById('recojanme').style.display='none';
		document.getElementById('recogiendo').required = false;
		var ele = document.getElementsByName("metodo");
	   	for(var i=0;i<ele.length;i++){
	      ele[i].checked = false;
	    }
	}
}

Recogiendo los datos

<?php
$metodo ='';
$recoger = $_POST['recoger'];
if(isset($_POST['metodo'])){
	$metodo = $_POST['metodo'];
}


echo $recoger . " " . $metodo;



Analicemos cómo funciona

El código html

  • Lo primero que vemos es un formulario con un nombre, algo necesario para llegar al valor del campo recoger.
  • Tras esto lo siguiente de interés son los campos radio recoger que mantienen un evento, recoger_usuario(), una función que se ejecuta en nuestro script cada vez que hacemos click en cada una de las opciones.
  • Naturalmente nuestros radios deben de ser requeridos.
  • Siguiendo en el código html, se observa que hay un div con un display:none por defecto que lo oculta de la interpretación del navegador.

El script js

Cómo vemos nuestro script es muy corto pero realiza una serie de funciones muy importantes:

  • tomar el campo del radio, buscando por el DOM el campo requerido y cambiando el display del div oculto según la opción elegida
  • en caso de cambiar de opción para cerrar el nuevo campo lo que hace es recorrer todo el radio eliminando la opcion marcada con el fin de que no se quede información residual
  • Añadir o eliminar el atributo required de la parte opcional según los que elijamos

Lo único a tener en cuenta en este script es que el formulario debe de tener un nombre así como el input y que debemos de recordar que los inputs radio con el mismo nombre se establecen como un array y por lo tanto se empiezan a contar desde cero.

Al recoger los datos
Para recoger los datos se hace de forma normal, pero teniendo en cuenta que el campo metodo, se ha posio enviar o no, por lo que debemos de comprobarlo por medio isset y guardarlo solo si existe.

Espero que os haya servido y ya sabeis no dudeis en compartir y en comentar…