How do I make a .clic event depend on an onclick?

Question

How do I make a .clic event depend on an onclick?

Navigation

#1 by (2 votes)

1

I would like to know how I can break a control statement IF . The problem is that I have two actions that are executed when I click on one of my buttons an action I call it with the onclick and the other with the function .clic .

Onclick code

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;
}

}

Code of the .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'
    });
});

Both events are necessary and apply within the same button, but I would like my code sequence to be broken if my form is empty so that it does not advance with the following form.

Button code:

  <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>

jquery if

asked by David 08.07.2017 в 09:27

source

1 answer

How to create a DataFrame from an array of listings? Problems in narrowing MySQL query

score 2 · Accepted Answer

If the execution of one of the functions depends on the result of the other, the logical thing is to have a single event handler that executes this logic:

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>