0

Tengo este código y todo funciona bien.
Pero me pidieron que al seleccionar el sexo, por ejemplo, sí selecciono "HEMBRA", el select de 'CASTRADO' se debe de ocultar y sí al seleccionar "MACHO" se debe habilitar el select de 'CASTRADO' y poder guardar.

Aquí les dejo el código de envió de datos de php a mysql y el HTMAqui esta la estructura de la tabla con la que trabajo este formulario
Aquí esta la estructura de la tabla con la que trabajo este formulario.

<?php
//sesion de roles
session_start();
if ($_SESSION['rol'] != 1) 
{	

	header("location: ./");
}
		include "../conexion.php";
		//validar que no vallan vacios los campos
		if(!empty($_POST))
	{
		$alert='';
		if(empty($_POST['sexo']) || empty($_POST['tipo']) || empty($_POST['raza']) || empty($_POST['raza_pater']) || empty($_POST['raza_mater']) || empty($_POST['castrado']) 
			|| empty($_POST['vacunas']) || empty($_POST['fecha_n']) || empty($_POST['peso']) || empty($_POST['fecha_i']))
		{
			$alert='<p class="mgs_error">Todos los campos son obligatorios.</p>';
		}else{

			
			$sexo  = $_POST['sexo'];
			$tipo   = $_POST['tipo'];
			$raza  = $_POST['raza'];
			$raza_pater = $_POST['raza_pater'];
			$raza_mater = $_POST['raza_mater'];
			$castrado = $_POST['castrado'];
			$vacunas = $_POST['vacunas'];
			$fecha_n = $_POST['fecha_n'];
			$peso = $_POST['peso'];
			$fecha_i = $_POST['fecha_i'];

			$result = 0;

				include "../conexion.php";
				$query_insert = mysqli_query($conection,"INSERT INTO cerdo (cod_sexo, cod_tipo, cod_raza, cod_raza_paterna, cod_raza_matern, castrado, cod_vacuna,
														 fecha_nacimiento, peso_inicial, fecha_ingreso_granja) 
														Values('$sexo','$tipo', '$raza','$raza_pater', '$raza_mater', '$castrado', '$vacunas', '$fecha_n','$peso','$fecha_i' )");
				if ($query_insert) {
						$alert = '<p class="mgs_save">Cerdo registrado correctamente.</p>';
				}else{
					$alert = '<p class="mgs_error">Error al registrar el cerdo.</p>';
				}	

			}
		}
			
			mysqli_close($conection);	
  ?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <title>Registro Cerdo</title>
  <!-- Favicon -->
  <link rel="icon" href="img/cerdo.png">


</head>




<body class="fondo">
  <?php include "includes/header.php"; ?>
  <section id="container">
    <div class="from_register">
      <h1><i class="fas fa-user-plus"></i> Registrar Cerdo</h1>

      <hr>

      <div class="alert">
        <?php echo isset($alert) ? $alert : ''; ?>
      </div>
      <!--mensajes -->
      <form action="" method="post">


        <!-- datos de la tabla sexo -->
        <label for="sexo">Sexo</label>

        <?php
							include "../conexion.php";
						$query_sexo = mysqli_query($conection, "SELECT * FROM sexo");
						mysqli_close($conection);
						$result_sexo = mysqli_num_rows($query_sexo);
					 ?>

          <select name="sexo" id="sexo">
            <option disabled selected>Selecciona el sexo</option>
            <?php 
							if ($result_sexo > 0) 
							{
								while ($sexo = mysqli_fetch_array($query_sexo)) {
						?>
            <option value="<?php echo $sexo[" cod_sexo "]; ?>">
              <?php echo $sexo["descripcion_sexo"];?>
            </option>

            <?php 				
								}
							}

						?>
          </select>


          <div id="un_div">

            <!-- datos de la tabla tipo -->
            <label for="tipo">Tipo</label>
            <?php
						include "../conexion.php";
						$query_tipo = mysqli_query($conection, "SELECT * FROM tipo");
						mysqli_close($conection);
						$result_tipo = mysqli_num_rows($query_tipo);
					 ?>

              <select name="tipo" id="tipo">
                <option disabled selected>Selecciona el tipo</option>
                <?php 
							if ($result_tipo > 0) 
							{
								while ($tipo = mysqli_fetch_array($query_tipo)) {
						?>
                <option value="<?php echo $tipo[" cod_tipo "]; ?>">
                  <?php echo $tipo["descripcion_tipo"];?>
                </option>

                <?php 				
								}
							}

						?>
              </select>

              <!-- datos de la tabla raza -->

              <label for="raza">Raza</label>
              <?php
							include "../conexion.php";
						$query_raza = mysqli_query($conection, "SELECT * FROM raza");
					    mysqli_close($conection);
						$result_raza = mysqli_num_rows($query_raza);
					 ?>

                <select name="raza" id="raza">
                  <option disabled selected>Seleciona la raza</option>
                  <?php 
							if ($result_raza > 0) 
							{
								while ($raza = mysqli_fetch_array($query_raza)) {
						?>
                  <option value="<?php echo $raza[" cod_raza "]; ?>">
                    <?php echo $raza["descripcion_raza"];?>
                  </option>

                  <?php 				
								}
							}

						?>
                </select>

                <!-- datos raza paterna -->
                <div id="razas" class="wd41">

                  <div class="wd31">
                    <label for="raza_pater">Raza Paterna</label>
                    <?php
							include "../conexion.php";
						$query_raza = mysqli_query($conection, "SELECT * FROM raza");
					    mysqli_close($conection);
						$result_raza = mysqli_num_rows($query_raza);
					 ?>

                      <select name="raza_pater" id="raza">
                        <option disabled selected>Selecciona raza paterna</option>
                        <?php 
							if ($result_raza > 0) 
							{
								while ($raza = mysqli_fetch_array($query_raza)) {
						?>
                        <option value="<?php echo $raza[" cod_raza "]; ?>">
                          <?php echo $raza["descripcion_raza"];?>
                        </option>

                        <?php 				
								}
							}

						?>
                      </select>
                  </div>


                  <!-- datos raza materna -->
                  <div class="wd31" style="margin-left: 10px">


                    <label for="raza_mater">Raza Materna</label>
                    <?php
							include "../conexion.php";
						$query_raza = mysqli_query($conection, "SELECT * FROM raza");
					    mysqli_close($conection);
						$result_raza = mysqli_num_rows($query_raza);
					 ?>

                      <select name="raza_mater" id="raza">
                        <option disabled selected>Selecciona raza materna</option>
                        <?php 
							if ($result_raza > 0) 
							{
								while ($raza = mysqli_fetch_array($query_raza)) {
						?>
                        <option value="<?php echo $raza[" cod_raza "]; ?>">
                          <?php echo $raza["descripcion_raza"];?>
                        </option>

                        <?php 				
								}
							}

						?>
                      </select>
                  </div>
                </div>

                <!-- datos de la tabla CASTRADO -->

                <div id="castrados">
                  <label for="castrado">Catrado</label>
                  <select name="castrado" id="castrado" disabled required>
                    <option disabled selected>Selecciona una opción</option>
                    <option value="si">SI</option>
                    <option value="no">NO</option>
                  </select>
                </div>


                <!-- datos de la tabla VACUNA -->
                <label for="vacunas">Vacunas</label>

                <?php
							include "../conexion.php";
						$query_vacunas = mysqli_query($conection, "SELECT * FROM vacuna");
						mysqli_close($conection);
						$result_vacunas = mysqli_num_rows($query_vacunas);
					 ?>

                  <select name="vacunas" id="vacunas">
                    <option disabled selected>Selecciona las vacunas</option>
                    <?php 
							if ($result_vacunas > 0) 
							{
								while ($vacunas = mysqli_fetch_array($query_vacunas)) {
						?>
                    <option value="<?php echo $vacunas[" cod_vacuna "]; ?>">
                      <?php echo $vacunas["descrpcion_vacuna"];?>
                    </option>

                    <?php 				
								}
							}

						?>

                  </select>

                  <label for="fecha_nacimiento">Fecha Nacimiento</label>
                  <input type="date" name="fecha_n">

                  <label for="peso">Peso Inical (Kg)</label>
                  <input type="text" style="width: 120px" name="peso" id="peso" placeholder="Peso Inical (Kg)">

                  <label for="fecha_ingreso">Fecha Ingreso</label>
                  <input type="date" name="fecha_i">

          </div>
          <button type="submit" class="btn_save" id="boton"><i class="far fa-save"></i> Registrar Cerdo</button>
      </form>
    </div>

  </section>
</body>

</html>

1
  • Puedes usar JS para poner un display: 'block' para mostrar y display:'none'; para ocultar. Commented el 20 mar. 2019 a las 17:53

2 respuestas 2

0

Puedes hacer una función de JS, cualquier duda no dudes en preguntar, espero te funcione.

    <select name="sexo" id="sexo" onchange="mostrar()"><!--agregamos la función al atributo onchange para que se ejecute cada que cambies el valor.-->
                <option disabled selected>Selecciona el sexo</option>
                <?php 
                                if ($result_sexo > 0) 
                                {
                                    while ($sexo = mysqli_fetch_array($query_sexo)) {
                            ?>
                <option value="<?php echo $sexo[" cod_sexo "]; ?>">
                  <?php echo $sexo["descripcion_sexo"];?>
                </option>

                <?php               
                                    }
                                }

                            ?>
              </select>

    <script>
            function mostrar(){

            var sexo = document.getElementById('sexo').value;
            var divCastrado = document.getElementById('castrados');
            var selectCastrado = document.getElementById('castrado');

            if(sexo == 'HEMBRA'){

            selectCastrado.removeAttribute('required',''); // removemos el atributo required ya que estamos ocultando pero al dar submit el campo estará vació y te marcará error 
selectCastrado.disabled= 'true';

            }else{

            selectCastrado.setAttribute('required','');//Agregamos el atributo required para que no se pase por alto el campo
            selectCastrado.disabled='false'; //cambiamos el atributo disabled por false para que pueda seleccionar
            }

        }

    </script>
4
  • Muchas gracias amig@!! Fijate que probé el código, pero no se que pasa que al elegir tanto Hembra o Macho se bloquean... es decir, si elijo "HEMBRA" se bloquea el select; si elijo "MACHO" se bloquea igual....
    – a_bane
    Commented el 20 mar. 2019 a las 20:03
  • Ya edite la respuesta si solo quieres que se habilite o deshabilete es con disabled = 'false'; o disables = 'true'; Commented el 20 mar. 2019 a las 20:09
  • Amigo mil gracias ya me funciono!! Con la respuesta anterior, no me funcionaba porque en el IF en vez de 'HEMBRA' era el código '1', ya que SEXO lo tengo en una tabla de la base de datos en que estoy trabajando!!! SE TE AGRADECE!!
    – a_bane
    Commented el 20 mar. 2019 a las 20:51
  • Como en la descripción de tu pregunta lo estableces como 'MACHO' Y 'HEMBRA', supuse esos eran los valores XD, que bueno que te funcionó y no hay de qué, para eso es la comunidad :) Commented el 20 mar. 2019 a las 21:11
0

Para lo que pides puedes usar JS y el atributo disabled de HTML.

Para ello se crea un listener en el select del sexo y se analiza la opción que elige. Si es 'Macho' se le quita el atributo disabled al select de castrado, y te permite seleccionarlo

let sexo = document.getElementById('sexo');
sexo.addEventListener("change", function(){
	if (sexo.value.toUpperCase() == 'MACHO') {
		document.getElementById('castrado').disabled = false;
	}else {
		document.getElementById('castrado').disabled = true;
	}
});
<label for="sexo">Sexo</label>
<select class="sexo" id="sexo" name="sexo">
	<option disabled selected value="0"> Seleccione sexo</option>
	<option value="macho">Macho</option>
	<option value="hembra">Hembra</option>
</select>
<label for="castrado">Castrado</label>
<select class="castrado" id="castrado" name="castrado" disabled>
	<option selected value="0"></option>
	<option value="si">Si</option>
	<option value="no">No</option>
</select>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.