1

Tengo este formulario, al seleccionar alguna opción del dropdown, este despliega los formularios correctamente la primera vez, pero si yo vuelvo a seleccionar una opción que haya desplegado anteriormente, ya no despliega nada, básicamente cada opción solo se despliega una vez necesito ayuda, no se que estoy haciendo mal o porque solo puedo mostrar solo una vez cada formulario, es urgente!!!!

 <div class="container my-4 text-light" id="contenerdor" style="background-color:#C40053">

            <ul class="nav nav-tabs text-light" role="tablist">



          <li class="dropdown open">
          <a class="dropdown-toggle text-light px-3" data-toggle="dropdown" href="#">Alumnos
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
            <li><a class="text-dark px-3"  href="#veralumnos" role="tab" data-toggle="tab">Mostrar alumnos</a></li>
            <li><a class="text-dark px-3"  href="#registraralumno" role="tab" data-toggle="tab">Registrar alumno</a></li>
            </ul>
          </li>


          <li class="dropdown open">
          <a class="dropdown-toggle text-light px-3" data-toggle="dropdown" href="#">Profesores
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
            <li><a class="text-dark px-3"  href="#verprofesores" role="tab" data-toggle="tab">Mostrar profesores</a></li>
            <li><a class="text-dark px-3"  href="#registrarprofesor" role="tab" data-toggle="tab">Registrar profesor</a></li>
            </ul>
          </li>



          <li><a class="text-light px-3" data-toggle="tab" href="#menu2">Grupos</a></li>
        </ul>


        <div class="tab-content">


          <div id="registraralumno" class="tab-pane fade">
            <h3>Registrar un nuevo alumno</h3>

            <div class="container my-5 w-75 text-light">


             <!--   <form action="registraralumno.php" method="POST" id="formalumno"class="form"> -->

                        <label for="nombre" class="sr-only">Nombre</label>
                        <input type="text" name="nombreAl" id="nombreAl" class="form-control my-3" placeholder="Nombre" required>
                        <label for="apep" class="sr-only">Apellido Paterno</label>
                        <input type="text" name="apepAl" id="apepAl" class="form-control my-3" placeholder="Apellido Paterno" required>
                        <label for="apem" class="sr-only">Apellido Materno</label>
                        <input type="text" name="apemAl" id="apemAl" class="form-control my-3" placeholder="Apellido Materno" required>
                        <label for="telefono" class="sr-only">Telefono</label>
                        <input type="text" name="telefonoAl" id="telefonoAl" class="form-control my-3" placeholder="Telefono" required>
                        <label for="direccion" class="sr-only">Direccion</label>
                        <input type="text" name="direccionAl" id="direccionAl" class="form-control my-3" placeholder="Direccion" required>
                        <label for="tutor" class="sr-only">Contacto del tutor</label>
                        <input type="text" name="tutorAl" id="tutorAl" class="form-control my-3" placeholder="Telefono del tutor" required>

                      <!-- <input type="submit" value="Registrar" class="btn btn-primary mb-3">  -->

                        <button class="btn btn-primary mb-3" onclick="validar('1')">Registrar</button>


               <!-- </form> -->

          </div>

        </div>



        <div id="registrarprofesor" class="tab-pane fade">
            <h3>Registrar un nuevo profesor</h3>

            <div class="container my-5 w-75 text-light field-wrap">


                <form action="registrarprofe.php" method="POST" id="formprofe"class="form">

                        <label for="nombre" class="sr-only">Nombre</label>
                        <input type="text" name="nombre" class="form-control my-3" placeholder="Nombre" required>
                        <label for="apep" class="sr-only">Apellido Paterno</label>
                        <input type="text" name="apep" class="form-control my-3" placeholder="Apellido Paterno" required>
                        <label for="apem" class="sr-only">Apellido Materno</label>


                        <input type="submit" value="Registrar" class="btn btn-primary button-block mb-3">


                </form>

          </div>

        </div>


          <div id="menu1" class="tab-pane fade">
            <h3>Profesores</h3>
            <h1 class="h3 mt-5 font-weight-normal">Inicia sesión</h1>

                        <input type="submit" value="Entrar" class="btn btn-primary mb-3"> 
          </div>


          <div id="menu2" class="tab-pane fade">
            <h3>Grupos</h3>
            <p>Nada alv.</p>
          </div>

          <div id="veralumnos" class="tab-pane fade">
            <h3>Ver los alumnos</h3>

        <table class="table table-striped table-dark mb-5" id="tablaAl">
          <thead class="thead-light">
            <tr>
              <th scope="col">#</th>
              <th scope="col">Nombre</th>
              <th scope="col">Telefono</th>
              <th scope="col">Direccion</th>
              <th scope="col">Telefono del tutor</th>
            </tr>
          </thead>
          <tbody class="tbody-dark">

        </tbody>

        </table>

          </div>
          <div id="verprofesores" class="tab-pane fade">
            <h3>Ver los profesores</h3>
            <p>Pos aqui se ven.</p>
          </div>

          <div id="nada" class="tab-pane fade">

            <p>Nada</p>
          </div>
        </div>

        </div>

1 respuesta 1

0

lo que puedo observar es que estas utilizando dos procedimientos distintos, me explico, colocas role="tab" data-toggle="tab" en cada etiqueta "" para mostrar los formularios, nunca se me hubiera ocurrido, combinar atributos data de esa manera, pero lo que te recomiendo es que trabajes con jquery para mostrar y ocultar elementos.

te pogo un ejemplo:

$("#BtnAddCliente").click(function(e){
		e.preventDefault();
		// alert("es una alerta");
			AbrirFormAdd();
	});

    function AbrirFormAdd()
	{
		$("#FormAlumno")[0].reset();/*Limpiar Formulario*/
        $("#FormAlumno").slideToggle("slow");/*MOSTRAR FORM*/
	}

Espero que te sirva!

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.