Cómo ocultar/mostrar div según 3 botones "radio" dentro de un formulario html/php

Como puedo mostrar u ocultar los div dentro de un formulario según su input "radio" correspondiente.. Es decir que a cada div le correspondería un input.

Si tuviera algún ejemplo práctico sería de mucha ayuda..

Respuesta
1

La verdad, no entiendo tu pregunta, ¿puedes ser más explicito?

Buen dia Sires..

Lo que necesito es que dependiendo de button radio se muestre un  div u otro.. ejemplo:

Opción 1: muestre un input de nombre y oculte la opción 2 y 3;

Opinión 2: muestre un input de apellidos y oculte la opción 1 y 3;

Opinión 3: muestre un input de edades y oculte la opción 1 y 2.

Dentro de un formulario. .

Muchas gracias 

Lo que necesitas es un "combox"

visita este enlace: http://www.nebaris.com/ejemplos/0029/combos.html 

Allí encuentras un tutorial completo de hacer "combox"

Si no es la idea, me dices para ver que hacemos...

SiREZ

Vamos a generar las tablas necesarias para el ejemplo.
--
-- Estructura tabla `paises`
--
CREATE TABLE IF NOT EXISTS `paises` (
  `idpais` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(50) NOT NULL,
  PRIMARY KEY (`idpais`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
--
-- Datos para la tabla `paises`
--
INSERT INTO `paises` (`idpais`, `nombre`) VALUES
(1, 'Argentina'),
(2, 'España'),
(3, 'México'),
(4, 'Colombia');
--
-- Estructura tabla `ciudades`
--
CREATE TABLE IF NOT EXISTS `ciudades` (
  `idciudad` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(50) NOT NULL,
  `idpais` int(11) NOT NULL,
  PRIMARY KEY (`idciudad`),
  KEY `idpais` (`idpais`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=13 ;
--
-- Datos para la tabla `ciudades`
--
INSERT INTO `ciudades` (`idciudad`, `nombre`, `idpais`) VALUES
(1, 'Buenos Aires', 1),
(2, 'Rosario', 1),
(3, 'Mendoza', 1),
(4, 'Madrid', 2),
(5, 'Barcelona', 2),
(6, 'Valencia', 2),
(7, 'Puebla', 3),
(8, 'Guadalajara', 3),
(9, 'Monterrey', 3),
(10, 'Barranquilla', 4),
(12, 'Cali', 4);
--
-- Restricción para la tabla `ciudades`
--
ALTER TABLE `ciudades`
  ADD CONSTRAINT `paises_ciudades` FOREIGN KEY (`idpais`) REFERENCES `paises` (`idpais`);
Conexión con base de datos
Vamos a crear un archivo que nos administre la conexión con la base de datos, de esta forma se encargará de obtener la conexión, cerrarla cuando ya no sea necesaria y de ejecutar las consultas.
// archivo db.php
<?php
    function obtenerConexion() {
        $db = new mysqli('host', 'usuario', 'password', 'base de datos');
        if($db->connect_errno > 0){
            die('Unable to connect to database [' . $db->connect_error . ']');
        }
        return $db; 
    }
    function cerrarConexion($db, $query) {
        $query->free();
        $db->close();
    }
    function ejecutarQuery($db, $sql) {
        if(!$resultado = $db->query($sql)){
            die('There was an error running the query [' . $db->error . ']');
        }
        return $resultado;
    }
?>
Países y ciudades
Ahora creamos dos archivos, uno para los países:
// pais.php
<?php
    include("db.php");
    // esta función se va a llamar al cargar el primer combo
    function obtenerTodosLosPaises() {
        $paises = array();
        $sql = "SELECT idpais, nombre 
                FROM paises"; 
        $db = obtenerConexion();
        // obtenemos todos los países
        $result = ejecutarQuery($db, $sql);
        // creamos objetos de la clase país y los agregamos al arreglo
        while($row = $result->fetch_assoc()){
            $row['nombre'] = mb_convert_encoding($row['nombre'], 'UTF-8', mysqli_character_set_name($db));          
            $pais = new pais($row['idpais'], $row['nombre']);
            array_push($paises, $pais);
        }
        cerrarConexion($db, $result);
        // devolvemos el arreglo
        return $paises;
    }
    class pais {
        public $id;
        public $nombre;
        function __construct($id, $nombre) {
            $this->id = $id;
            $this->nombre = $nombre;
        }
    }
?>
Y uno para las ciudades:
// ciudad.php
<?php
    include("db.php");
    // si se está enviando por POST el id del país
    // significa que intentamos acceder desde jQuery
    if(isset($_POST['idPais'])) {
        $ciudades = array();
        $sql = "SELECT idciudad, nombre 
                FROM ciudades 
                WHERE idpais = ".$_POST['idPais']; 
        $db = obtenerConexion();
        // obtenemos todas las ciudades
        $result = ejecutarQuery($db, $sql);
        // creamos objetos de la clase ciudad y los agregamos al arreglo
        while($row = $result->fetch_assoc()){
            $row['nombre'] = mb_convert_encoding($row['nombre'], 'UTF-8', mysqli_character_set_name($db));
            $ciudad = new ciudad($row['idciudad'], $row['nombre']);
            array_push($ciudades, $ciudad);
        }
        cerrarConexion($db, $result);
        // devolvemos el arreglo de ciudades, en formato JSON
        echo json_encode($ciudades);
    }
    class ciudad {
        public $id;
        public $nombre;
        function __construct($id, $nombre) {
            $this->id = $id;
            $this->nombre = $nombre;
        }
    }
?>
Hay que tener en cuenta, que para evitar complejidad en el ejemplo, no estamos ni utilizando stored procedures (procedimientos almacenados), ni validando los campos contra XSS.
Estructura
En la estructura de nuestro ejemplo, tenemos una llamada para incluir el archivo de países; con esto cargamos el primer combo iterando el arreglo de países. Al segundo combo, sólo le agregamos una opción que indica que se debe elegir un país.
// combos.php
<?php
    include("pais.php");
?>
<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Nebaris - Combos en cascada</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="divContenedor">
        <h2>Combos de selección anidados</h2>
        <div class="divLabels">
            <label for="cboPaises">Paises</label>
        </div>
        <div class="divSelects">
            <select id="cboPaises">
                <option value="0">Seleccione un país</option>
                <?php
                    $paises = obtenerTodosLosPaises();
                    foreach ($paises as $pais) { 
                        echo '<option value="'.$pais->id.'">'.$pais->nombre.'</option>';        
                    }
                ?>
            </select>
        </div>
        <div class="divLabels">
            <label for="cboCiudades">Ciudades</label>
        </div>
        <div class="divSelects">
            <select id="cboCiudades">
                <option value="0">Seleccione un país</option>
            </select>
        </div>
    </div>  
</body>
</html>
jQuery
Mediante jQuery, cada vez que se modifique el valor del combo, debemos obtener el valor de la opción seleccionada. Si este valor es mayor a 0, utilizamos la función post, para llamar al archivo PHP y que nos devuelva un arreglo de ciudades.
$(document).ready(function(){
    // cada vez que se cambia el valor del combo
    $("#cboPaises").change(function() {
        // obtenemos el valor seleccionado
        var pais = $(this).val();
        // si es 0, no es un país
        if(pais > 0)
        {
            //creamos un objeto JSON
            var datos = {
                idPais : $(this).val()  
            };
            // utilizamos la función post, para hacer una llamada AJAX
            $.post("ciudad.php", datos, function(ciudades) {
                // obtenemos el combo de ciudades
                var $comboCiudades = $("#cboCiudades");
                // lo vaciamos
                $comboCiudades.empty();
                // iteramos a través del arreglo de ciudades
                $.each(ciudades, function(index, cuidad) {
                    // agregamos opciones al combo
                    $comboCiudades.append("<option>" + cuidad.nombre + "</option>");
                });
            }, 'json');
        }
        else
        {
            // limpiamos el combo e indicamos que se seleccione un país
            var $comboCiudades = $("#cboCiudades");
            $comboCiudades.empty();
            $comboCiudades.append("<option>Seleccione un país</option>");
        }
    });
}); 

1 respuesta más de otro experto

Respuesta
2

Utiliza javascript.

He aquí un ejemplo:

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mostrar div al seleccionar una opcion</title>
    <script>
    function mostrar(dato){
        if(dato=="1"){
            document.getElementById("nombre").style.display = "block";
            document.getElementById("apellidos").style.display = "none";
            document.getElementById("edad").style.display = "none";
        }
        if(dato=="2"){
            document.getElementById("nombre").style.display = "none";
            document.getElementById("apellidos").style.display = "block";
            document.getElementById("edad").style.display = "none";
        }
        if(dato=="3"){
            document.getElementById("nombre").style.display = "none";
            document.getElementById("apellidos").style.display = "none";
            document.getElementById("edad").style.display = "block";
        }
    }
    </script>
</head>
<body>
    <div class="row">
            <div class="col-md-5 col-md-offset-3">
<form action="" method="POST"  enctype="multipart/form-data" >
                <div class="form-group" id="opciones" >
                    <label for="">Opciones:</label>
                    <input type="radio" name="opc" value="1" onchange="mostrar(this.value);">Solo nombre
                    <input type="radio" name="opc" value="2"  onchange="mostrar(this.value);">Solo apellidos 
                    <input type="radio" name="opc" value="3"  onchange="mostrar(this.value);">Solo edad
                </div>
                <div class="form-group" id="nombre" style="display:none;">
                    <label for="">Nombre:</label>
                    <input type="text" class="form-control" name="nombre"  >
                </div>
                <div class="form-group" id="apellidos" style="display:none;">
                    <label for="">Apellidos:</label>
                    <input type="text" class="form-control" name="apellidos"  >
                </div>
                <div class="form-group" id="edad" style="display:none;">
                    <label for="">Edad:</label>
                    <input type="text" class="form-control" name="edad"  >
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas