0

I have a step form. I need to send email if i click next button. It works only if i click 2nd step next button. Here is my jquery:

let ajaxurl = 'admin-ajax.php';
let i=0;
jQuery( ".btn-next" ).each(function() {
    jQuery(this).on("click", function(){
       if(i === 0){
            console.log('First Button');
            jQuery.post(ajaxurl, {action: 'send_mail'}); 
        }
        else if(i === 1){
            console.log('Second Button');
            jQuery.post(ajaxurl, {action: 'send_mail'});
        }
        else{
            console.log('Third Button');
            jQuery.post(ajaxurl, {action: 'send_mail'});
        }
        i++; 
    });
        
});

PHP functions:

function send_mail() {
    
    global $wpdb;

    $results = $wpdb->get_results( "SELECT * FROM my_table"); 

    $step_complete = $results[0]->step_completed;

    $response = $results[0]->response;

    $response2 = json_decode($response);


    if(!empty($results)){
        //echo $step_complete;
        if($step_complete==1){
            wp_mail('test@mail.com', 'First Step', 'First Step Complete');          
        }
        if($step_complete==2){
            wp_mail('test@mail.com', 'Second Step', 'Second Step Complete');                
        }
    }
}
add_action('wp_ajax_send_mail', 'send_mail');
add_action('wp_ajax_nopriv_send_mail', 'send_mail');

It only send email when i click 2nd step next button( that means if second time function load it will work) then it will send step_complete == 1 conditions mail.

I need it will works every conditions properly.

Shawn
  • 1,232
  • 1
  • 14
  • 44

1 Answers1

0

This is a common problem, your i variable is always referring to 2 when click is executed because three is only one variable. To fix the issue you need to save the index in a variable that will be local inside the loop:

let ajaxurl = 'admin-ajax.php';
let i=0;
jQuery( ".btn-next" ).each(function() {
    var index = i++;
    jQuery(this).on("click", function(){
       if(index === 0){
            console.log('First Button');
            jQuery.post(ajaxurl, {action: 'send_mail'}); 
        }
        else if(index === 1){
            console.log('Second Button');
            jQuery.post(ajaxurl, {action: 'send_mail'});
        }
        else{
            console.log('Third Button');
            jQuery.post(ajaxurl, {action: 'send_mail'});
        }
    });
});

or even better just use index variable in each function:

let ajaxurl = 'admin-ajax.php';
jQuery( ".btn-next" ).each(function(i) {
    jQuery(this).on("click", function(){
       if(i === 0){
            console.log('First Button');
            jQuery.post(ajaxurl, {action: 'send_mail'}); 
        }
        else if(i === 1){
            console.log('Second Button');
            jQuery.post(ajaxurl, {action: 'send_mail'});
        }
        else{
            console.log('Third Button');
            jQuery.post(ajaxurl, {action: 'send_mail'});
        }
    });
});
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • @shawn but which console.log is executed in the browser. If the error is also in PHP you should ask with PHP tags. – jcubic Jun 21 '21 at 12:00
  • @shawn sorry I don't understand what you just said. You send AJAX request in each button that is exactly the same you don't save any state. If this is an issue with your PHP please create a question where you remove your JavaScript and use just PHP code. Your tags indicates that this is issue with Ajax and jQuery. This answer the issue with jQuery. I suggest to create another question where write what the issue is exactly. – jcubic Jun 21 '21 at 12:10
  • please check my live url above you will get the problem – Shawn Jun 21 '21 at 12:11
  • @shawn Sorry I've made mistake it should be `i++`. I've edited the answer. – jcubic Jun 21 '21 at 12:13