1

Me gustaría saber como puedo romper una sentencia de control IF. La problemática es que tengo dos acciones que se ejecutan al dar clic en uno de mis botones una acción la llamo mediante el onclick y la otra con la funcion .clic.

Código del onclick

function siguiente_1() {

  var nombre=$("#txtnombre_promotor").val();
  var apellidos=$("#txtapellidos_promotor").val();
  var correo=$("#txtcorreo_promotor").val();

if (nombre=="" || apellidos=="" || correo=="") {
    alert("entro");
return false;
}

}

Código del .clic

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



    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+')'});
            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'
    });
});

ambos eventos son necesarios y se aplican dentro del mismo botón, pero me gustaría que se rompiera mi secuencia de código si mi formulario esta vació para que no avance con el siguiente formulario.

Código del botón:

  <button type="button" name="next" class="next action-button" value="Siguiente" onclick="return siguiente_1();">
  Siguiente &nbsp <i class="fa fa-chevron-right"></i></button> 

1 respuesta 1

2

Si la ejecución de uno de las funciones depende del resultado de la otra lo lógico es tener un único controlador de evento que ejecute esta lógica:

function siguiente_1() {

  var nombre=$("#txtnombre_promotor").val();
  var apellidos=$("#txtapellidos_promotor").val();
  var correo=$("#txtcorreo_promotor").val();

  if (nombre=="" || apellidos=="" || correo=="") {
    console.log('No válido');
    return false;
  }

  return true;

}

$(function(){
  var animating = false;


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

    if (!siguiente_1()) { return false; }

    if(animating) return false;
    animating = true;

    console.log('Next');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Nombre: <input type="text" id="txtnombre_promotor" /><br />
Apellido: <input type="text" id="txtapellidos_promotor" /><br />
Correo: <input type="text" id="txtcorreo_promotor" /><br />

  <button type="button" name="next" class="next action-button" value="Siguiente">
  Siguiente &nbsp <i class="fa fa-chevron-right"></i></button> 

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.