3

Estoy haciendo un registro con fieldsets y me di cuenta de que la segunda pantalla no funciona, no muestra la tercera pantalla. Esto esta basado en un código que dejo mi compañero de trabajo inconcluso

Lo que tengo en index.tpl El problema empieza en el segundo fieldset, el boton de <input type="button" name="next" id="next2" class="next action-button" value="Siguiente"/> hace la animación de esconder el fieldset pero no la concluye nunca ni muestra el fieldset

<!DOCTYPE html>
<html lang="es">
    <head>
<meta name="viewport" content="width=device-width, user-scalable=no">
        {include file="require/cssRequire.tpl"}
        {include file="signup/css2.tpl"}
    </head>
    <body>
        <!--  GLobal -->
        <input type="hidden" value="{{$urlApi}}" id="api"/>
        <input type="hidden" value="{{$urlImg}}" id="img"/>
        {include file="layout/menu3.tpl"}
        <!-- MultiStep Form -->
        <div class="row">
            <div class="col-md-12 col-md-offset-3">
                <form id="msform" autocomplete="off" id="formSignUp">
                <h1 class="fs-title">Registro de cliente</h2>
                    <!-- progressbar -->
              <!--      <ul id="progressbar">
                        <li class="active">Datos Personales</li>
                        <li>Datos Contacto</li> 
                        <li>Datos administrativos</li> 
                        <li>Datos Contactos</li> -->
                    </ul>
                    <!-- fieldsets -->
                    <fieldset>  <!-- Primer fieldset -->
                    <h2 class="fs-title">Crear usuario</h2>
                    <div id="subtitle1" style="display: inline-block; padding:40px;">
                        <h3 class="fs-subtitle">eMail *</h3>
                        <input type="email" style="width: 110%;" autocomplete="new-Email_principal" id="Email_principal" name="Email_principal" required placeholder="Email Principal">
                    </div>
                    <div id="subtitle2" style="display: inline-block; padding:20px;">
                        <h3 class="fs-subtitle">Contraseña *</h3>
                        <input type="password" style="width: 110%;" name="Password" id="Password" placeholder="Contraseña" require/>
                    </div>
                    <br>
                    </br>
                        <input type="button" name="next" id="next1" class="next action-button" value="Siguiente"/>
                    </fieldset>

                    <fieldset>  <!-- Segundo fieldset -->
                        <h2 class="fs-title">Datos Personales</h2>
                        <br></br>

                        <center>
                        <table>
                            <tr>
                            <td style="padding:20px;"><h3 class="fs-subtitle">Nombre *</h3></td>
                            <td style="padding:20px;"><h3 class="fs-subtitle">Primer Apellido *</h3></td>
                            </tr>

                            <tr>
                            <td><input type="text" style="width: 90%;" name="Primer_nombre" id="Primer_nombre" required placeholder="Primer Nombre"/></td>
                            <td><input type="text" style="width: 90%;" name="Primer_apellido" id="Primer_apellido" required placeholder="Primer Apellido"/></td>
                            </tr>
                        </table>
                        </center>

                        <br></br>

                        <center>
                        <table>
                            <tr>
                            <td style="padding:20px;"><h3 class="fs-subtitle">Segundo Apellido *</h3></td>
                            </tr>

                            <tr>
                            <td><input type="text" style="width: 90%;" name="Segundo_apellido" id="Segundo_apellido"  placeholder="Segundo Apellido"/></td>
                            </tr>
                        </table>
                        </center>

                        <br></br>

                        <center>
                        <table>
                            <tr>
                            <td style="padding:20px;"><h3 class="fs-subtitle">Sexo *</h3></td>
                            <td style="padding:20px;"><h3 class="fs-subtitle">Fecha *</h3></td>
                            </tr>
                            
                            <tr>
                            <td style="padding:5px;"><input type="radio" name="sexo" id="Id_hombre" value="1" onclick="getResults();">Hombre
                            <input type="radio" name="sexo" id="Id_mujer" value="2" onclick="getResults();">Mujer</td>
                            <td><input
                            autocomplete="off"
                            type="text"
                            name="Fecha_nacimiento"
                            id="Fecha_nacimiento"
                            placeholder="Seleccione una fecha de nacimiento"
                            value="01/01/1970" style="width: 90%;"
                            /></td>
                            </tr>
                        
                        <input type="hidden" id="Id_sexo" name="Id_sexo" value=""/>
                        </table>
                        <center>

                        <br></br>
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                        <input type="button" name="next" id="next2" class="next action-button" value="Siguiente"/>
                    </fieldset>

                    <fieldset>  <!-- Tercer fieldset -->
                     <h3 class="fs-subtitle">Datos de contacto</h3>
                    <select
                        class="form-control form-control-dropdown form-control-dropdown-bb mb-2"
                        id="Id_pais"
                        name="Id_pais"
                        required="required"
                        onchange="seleccionarCiudadPais()">
                            <option
                            value=""
                            selected
                            style="display: none;">Pais del Centro
                            </option>
                            {foreach from=$paisesList item=result}
                            <option
                            value="{$result['id_pais']}">
                                {$result['nombre_pais']}
                            </option>
                            {/foreach}
                        </select> 
                        <select class="form-control form-control-dropdown form-control-dropdown-bb mb-2"
                            id="Id_ciudad" name="Id_ciudad" required="required" onchange="seleccionarZonaCiudad()">
                            <option
                            value=""
                            selected
                            style="display: none;">Ciudad del Centro
                            </option>
                        </select>  -->
                        <select class="form-control form-control-dropdown form-control-dropdown-bb mb-2"
                            id="Id_zona" name="Id_zona" required="required" onchange="seleccionarCentro('Zona')">
                            <option
                            value=""
                            selected
                            style="display: none;">Zona del Centro
                            </option>
                        </select>
                        <textarea name="Direccion"  placeholder="Dirección"></textarea>
                        <input type="number" name="Movil" id="Movil" required="required"  placeholder="Movil"/>
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
                        <input type="button" name="next" id="next3" class="next action-button" value="Siguiente"/>
                    </fieldset>

                    <fieldset>
                     <strong><p style="text-align:left;">Otros datos</p></strong>
                        <input type="text" name="Fisico" id="Fisico" placeholder="Patologia o dolencia"/>

                         <strong><p style="text-align:left;">¿Cómo se entero de nosotros?</p></strong>
                         <select onChange="scheduleA(value)"
                         class="form-control form-control-dropdown form-control-dropdown-bb" 
                         name="Id_referido_tipo" 
                         id="Id_referido_tipo">

                        {foreach from=$infoReferidoTipo item=resultadoReferidoTipo}
                        <option
                        value="{$resultadoReferidoTipo['id_referido_tipo']}">
                        {$resultadoReferidoTipo['tipo_referencia']}
                        </option>
                        {/foreach}
                        </select>

                        <div id="Referencia">
                        <strong><p style="text-align:left;">Referido por (Nombre o Código)</p></strong>
                        <input type="text" name="Referido" id="Referido"  autocomplete="off" value="{$token2}" placeholder="Codigo de referido"/>
                        </div>

                    <input type="button" name="submit" id="next4" class="next action-button" value="Registrar"/>
                    </fieldset>
                </form>
            </div>
        </div>
        <!-- /.MultiStep Form -->
        {include file="require/jsRequire.tpl"}
        {include file="signup/js2.tpl"}
    </body>
</html

Esto es lo que tengo en js2.tpl y el problema empieza en $("#next2").click(function(){, la validacion del registro lo hace perfecto pero cuando llega el momento de animar que es en current_fs = $(this).parent(); el cual no termina la animación

    {literal}
<script>
  //DatePicker
  $('#Fecha_nacimiento').bootstrapMaterialDatePicker({
    weekStart: 0,
    time: false,
    format: 'DD/MM/YYYY',
  });
  //DatePicker
  //jQuery time
  var current_fs, next_fs, previous_fs; //fieldsets
  var left, opacity, scale; //fieldset properties which we will animate
  var animating; //flag to prevent quick multi-click glitches

  function scheduleA(value) {
    var element = document.getElementById('Referencia');
    if (value == '1' || value == '4' || value == '5') {
      element.style.display = 'block';
      document.getElementById('Referido').value = ''; //Borrar el referido
      document.getElementById('Referido').innerHTML = '';
    } else {
      element.style.display = 'none';
    }
  }

  function getResults() {
    var testVar;
    var radios = document.getElementsByName("sexo");
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) {
        testVar = (radios[i].value);
        document.getElementById("Id_sexo").value = testVar;
        break;
      }
    }
  }

  $("#next1").click(function () {
    if (!document.getElementById("Email_principal").value.trim()) return swal("¡Error!", "El campo de email es requerido", "error");
    if (!document.getElementById("Password").value.trim()) return swal("¡Error!", "El campo de contraseña es requerido", "error");
    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
      step: function (now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50) + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({
          'transform': 'scale(' + scale + ')',
          'position': 'absolute'
        });
        next_fs.css({ 'left': left, 'opacity': opacity });
      },
      duration: 800,
      complete: function () {
        current_fs.hide();
        animating = false;
      },
      //this comes from the custom easing plugin
      easing: 'easeInOutBack'
    });
  });

  $("#next2").click(function () {
    if (!document.getElementById("Primer_nombre").value.trim()) return swal("¡Error!", "El campo de primer nombre es requerido", "error");
    if (!document.getElementById("Primer_apellido").value.trim()) return swal("¡Error!", "El campo Primer Apellido es requerido", "error");
    if (!document.getElementById("Id_sexo").value.trim()) return swal("¡Error!", "El campo sexo es requerido", "error");
    if (!document.getElementById("Fecha_nacimiento").value.trim()) return swal("¡Error!", "El campo de fecha de nacimiento es requerido", "error");
    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
      step: function (now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50) + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({
          'transform': 'scale(' + scale + ')',
          'position': 'absolute'
        });
        next_fs.css({ 'left': left, 'opacity': opacity });
      },
      duration: 800,
      complete: function () {
        current_fs.hide();
        animating = false;
      },
      //this comes from the custom easing plugin
      easing: 'easeInOutBack'
    });
  });


  $("#next3").click(function () {
    if (!document.getElementById("Id_pais").value.trim()) return swal("¡Error!", "El campo pais es requerido", "error");
    if (!document.getElementById("Id_ciudad").value.trim()) return swal("¡Error!", "El campo de ciudad es requerido", "error");
    if (!document.getElementById("Movil").value.trim()) return swal("¡Error!", "El campo de teléfono es requerido", "error");
    if (!document.getElementById("Id_centro").value.trim()) return swal("¡Error!", "El campo de centro es requerido", "error");
    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
      step: function (now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50) + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({
          'transform': 'scale(' + scale + ')',
          'position': 'absolute'
        });
        next_fs.css({ 'left': left, 'opacity': opacity });
      },
      duration: 800,
      complete: function () {
        current_fs.hide();
        animating = false;
      },
      //this comes from the custom easing plugin
      easing: 'easeInOutBack'
    });
  });

  $(".previous").click(function () {


    if (animating) return false;
    animating = true;

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show();
    //hide the current fieldset with style
    current_fs.animate({ opacity: 0 }, {
      step: function (now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale previous_fs from 80% to 100%
        scale = 0.8 + (1 - now) * 0.2;
        //2. take current_fs to the right(50%) - from 0%
        left = ((1 - now) * 50) + "%";
        //3. increase opacity of previous_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({ 'left': left });
        previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity });
      },
      duration: 800,
      complete: function () {
        current_fs.hide();
        animating = false;
      },
      //this comes from the custom easing plugin
      easing: 'easeInOutBack'
    });
  });

  //Formulario SignUp
  $("#next4").click(function () {
    if (!document.getElementById("Fisico").value.trim()) return swal("¡Error!", "El campo de Perfil Fisico es requerido", "error");

    datos = $("form").serializeArray();
    datos.push({ name: "opcion", value: "addCliente" });

    jQuery
      .ajax({
        url: "../controllers/usuarioController.php",
        type: "POST",
        data: datos,
      })
      .done(function (data) {
        let success = JSON.parse(data).success;
        let msj = JSON.parse(data).msj;
        let result = JSON.parse(data).result;
        if (success) {
          swal("¡Realizado!", "Se ha registrado satisfactoriamente", "success").then((value) => {
            location.href = "login.php";
          });
        } else {
          swal("¡Error!", msj, "error");
        }
      });
  });

</script>

{/literal}

Así es la animación si preguntan

introducir la descripción de la imagen aquí

La segunda pantalla hace ésto en vez de eso

introducir la descripción de la imagen aquí

5
  • Te reporta algún error el javascript? Commented el 6 ago. 2020 a las 10:56
  • No arroja ningún error en la consola, el evento de darle click corre como debe
    – Shredder
    Commented el 6 ago. 2020 a las 13:36
  • Es posible saber que nos digas que te dice el console.log de "next_fs" justo despues de cuando haces "next_fs = $(this).parent().next();" ?
    – Srsole
    Commented el 10 ago. 2020 a las 8:17
  • Dice: k.fn.init [prevObject: k.fn.init(1)] length: 0 prevObject: k.fn.init [center, prevObject: k.fn.init(1)] proto: Object(0)
    – Shredder
    Commented el 10 ago. 2020 a las 13:27
  • como puedes ver, el 'parent().next()' no esta funcionando bien. dejame que lo mire y te pongo una respuesta
    – Srsole
    Commented el 11 ago. 2020 a las 7:26

1 respuesta 1

1
+50

Estoy convencido que los $(this).parent().next(); son lo que falla, para solucionarlo de forma rapida haremos lo siguiente:


  1. En cada <fieldset> le vas a poner una id unica, por ejemplo fs1, fs2, fs3 ...
  2. En lugar de current_fs = $(this).parent(); pondras: current_fs = $(#fs1);
  3. En lugar de next_fs = $(this).parent().next(); pondras: next_fs = $(#fs2);

En el caso de que sea click en el boton next2 seria: current_fs = $(#fs2); y next_fs = $(#fs3);

Y así sucesivamente

He visto que tienes una variable que se llama previous_fs esta funcionara al reves que como hemos visto, si estas en el bloque de codigo del boton next2, la variable previous_fs sera $(#fs1)

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.