0

espero puedan darme luces con este inconveniente:

He estado tratando de crear un formulario con multiples tabs usando bootstrap(nav nav-pills). Estoy usando EJS como motor de plantillas. He creado formularios en partials para luego solo llamarlos en la navegación de los nav-pills. Todo me funciona perfecto a excepción de cuando navegas en los tabs, lo que hace es que se muestra un formulario encima del otro(se sobrepone). introducir la descripción de la imagen aquí

<%- layout('layouts/main') %>

<div class="container">
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
    </li>
  </ul>
</div>

<div class="form-group">
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      <%- include('partials/datos_personales'); %>
    </div>  

    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> 
      <%- include('partials/datos_laboral'); %>
    </div>

  </div>
</div>

Espero me puedan asistir, muchas gracias.

1 respuesta 1

0

Encontré una posible solución. aún no logro ejecutarlo con la plantilla EJS, pero mas o menos sería de esa manera.

$("#pills-home-tab").click(function() {
    $("#datos_personales_form").show();
    $("#datos_laborales_form").hide(); })

    $("#pills-profile-tab").click(function() {
    $("#datos_laborales_form").show();
    $("#datos_personales_form").hide();
})
#datos_laborales_form{
  display: none;
}
<!-- CSS Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<div class="container">
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#personal_info" role="tab"
        aria-controls="pills-home" aria-selected="false">Datos Personales</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#laboral_info" role="tab"
        aria-controls="pills-profile" aria-selected="false">Datos Laborales</a>
    </li>
  </ul>
</div>

<form method="post" id="datos_personales_form">
                <div class="form-group mb-2">
                    <div class="form-group row">
                        <!-- 1ra fila -->
                        <div class="form-group col">
                            <input type="text" class="form-control" id="nombres" autofocus required>
                            <label for="nombres">Nombres</label>
                        </div>
                        <div class="form-group col">
                            <input type="text" class="form-control" id="apellidos" required>
                            <label for="apellidos">Apellidos</label>
                        </div>
                    </div>
                </div>
                </form>
                
<form method="post" id="datos_laborales_form">
                <div class="form-group mb-2">
                    <div class="form-group row">
                        <!-- 1ra fila -->
                        <div class="form-group col">
                            <input type="text" class="form-control" id="cargo" autofocus required>
                            <label for="cargo">Cargo</label>
                        </div>
                        <div class="form-group col">
                            <input type="text" class="form-control" id="Salario" required>
                            <label for="Salario">Salario</label>
                        </div>
                    </div>
                </div>
                </form>                

jsfiddle

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.