skip to Main Content

I have a simple function that appends the shipping details, to billing details in my woocommerce checkout. However I want this function to stop firing once a class has ben added to a div.

function billingclick() {
    $('#billing_first_name').val($('#shipping_first_name').val());
    $('#billing_last_name').val($('#shipping_last_name').val());    
};

$('.wpmc-ripple.wpmc-billing').on('click', function(e) {
    billingclick();
}); 

I can’t use the one click function, as validation breaks this.

Is there a way I can stop the function if the div class is added?

e.g if .wpmc-step-shipping has the class current, stop the billingclick() function.

    if (!$(".wpmc-step-shipping").hasClass("current")) {
        // function here
    }

Thank you

3

Answers


  1. Your code should look like this :

    function billingclick() {
      if (!$(".wpmc-step-shipping").hasClass("current")) {
        $('#billing_first_name').val($('#shipping_first_name').val());
        $('#billing_last_name').val($('#shipping_last_name').val());  
      }  
    };
    
    $('.wpmc-ripple.wpmc-billing').on('click', function(e) {
        billingclick();
    }); 
    

    Perform the if condition first inside your function.

    Login or Signup to reply.
  2. It seems like you’re trying to remove the click handler. While this is possible, you need to know exactly when the class is added to the relevant element, which is not always possible, nor simple.

    A easier solution is to instead place your if condition within the billingclick() function and only update the val() of the required elements when the class is not present. Try this:

    function billingclick() {
      if (!$(".wpmc-step-shipping").hasClass("current")) {
        $('#billing_first_name').val($('#shipping_first_name').val());
        $('#billing_last_name').val($('#shipping_last_name').val());
      }
    };
    
    $('.wpmc-ripple.wpmc-billing').on('click', billingclick);
    Login or Signup to reply.
  3. As the other answers said, you can perform that check in your click handler:

    //this should probably be renamed to be updateBillingWithShipping
    function billingclick() {
        $('#billing_first_name').val($('#shipping_first_name').val());
        $('#billing_last_name').val($('#shipping_last_name').val());    
    };
    
    $('.wpmc-ripple.wpmc-billing').on('click', function(e) {
        if (!$(".wpmc-step-shipping").hasClass("current")) {
            billingclick();
        }
    }); 
    

    You could also remove the event handler on $('.wpmc-ripple.wpmc-billing')

    You could also disable the ‘.wpmc-ripple.wpmc-billing’ control.

    • This is typically something you would describe on your component view since it is control state that reflects on state of another control (represented as a class).
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search