How to pass values from one function to the other using an array variable

Question

Hello I have a function that passes values to other functions using javascript without reloading page.

The first action of the javascript below gets values from a form and sends to php via a call back function formbuilder_ajax_call. In my php script i return these form values as an array so i can call it in other functions. Below is my code:

Javascript

       jQuery("#button_to_load_data").click(function() {
       var email = $("#email").val();
       var other_email = $("#other_email").val();
       var subject = $("#subject").val();
       var sender = $("#sender").val();
       var message = $("#message").val();
       var form_name = $("#form_name").val();
       var content = getPlainHtml();
 //    alert(content);
     var data = {
        'action'   : 'formbuilder_ajax_call', // the name of your PHP function!
        'form_content' : content,           // another random value we'd like to pass
        'email' : email,
        'other_email' : other_email,
        'subject' : subject,
        'sender' : sender,
        'message' : message,
        'form_name' : form_name,
        
        };
        
        
       var data1 = {
        'action'   : 'make_short_code'
        }; 
   
     jQuery.post(ajaxurl, data, function(response) {
        jQuery("#receiving_div_id").html(response);
     });
  
  
  jQuery.post(ajaxurl, data1, function(response) {
        jQuery("#receiving_div_id").html(response);
     });
  
  });

PHP

function formbuilder_ajax_call(){

  $form_content = trim($_POST['form_content']); // these values are from a form
  $email = trim($_POST['email']);
  $other_email = trim($_POST['other_email']);
  $subject = trim($_POST['subject']);
  $sender = trim($_POST['sender']);
  $message = trim($_POST['message']);
  $form_name = trim($_POST['form_name']);

  $form_array = array(); 

  $form_array = array(

  "form_content" => $form_content,
  "email" => $email,
  "other_email" => $other_email,
  "subject" => $subject,
  "sender" => $sender,
  "message" => $message,
  "form_name" => $form_name,

   );  


   return  $form_array;
  }


 function make_short_code() { 

 $get_mailinfo = formbuilder_ajax_call();

 
 var_dump($get_mailinfo);

  }

I am using var_dump to see the content being passed in make_short_code but its only the array key values from formbuilder_ajax_call() that are passed and not the content values that was stored in the array. However the values are passed in the

Answer 1

The question is off-topic. If you are using WordPress, then it can be used this way.

You need to use the Ajax functionality of WordPress. You have to register the action with WordPress in order to be able to receive data on the backend.

Here is the AJAX code you must use with WordPress

add_action( "wp_ajax_formbuilder_ajax_call", 'formbuilder_ajax_call' );
add_action( "wp_ajax_nopriv_formbuilder_ajax_call", 'formbuilder_ajax_call' );

function formbuilder_ajax_call(){

    global $form_array;
    // Sanitize data, after all we all are not white hat hackers
    $form_content = trim(sanitize_text_field($_POST['form_content'])); // these values are from a form
    $email = trim($_POST['email']);
    $other_email = trim($_POST['other_email']);
    $subject = trim($_POST['subject']);
    $sender = trim($_POST['sender']);
    $message = trim($_POST['message']);
    $form_name = trim($_POST['form_name']);

    $form_array = array(); 

    $form_array = array(
        "form_content" => $form_content,
        "email" => $email,
        "other_email" => $other_email,
        "subject" => $subject,
        "sender" => $sender,
        "message" => $message,
        "form_name" => $form_name,

    );  

    return  $form_array;
}


function make_short_code() { 
    global $form_array;

    $get_mailinfo = $form_array;

    var_dump($get_mailinfo);

}

I hope this helps. Also, you should use jquery like this in order to make code easier to read and maintain.

Here is the modified version of your Jquery,

jQuery("#button_to_load_data").click(function() {
    var email = function() {
        return $("#email").val();
    }

    var other_email = function() {
        return $("#other_email").val();
    }

    var subject = function() {
        return $("#subject").val();
    }   

    var sender = function() {
        return $("#sender").val();
    }   

    var message = function() {
        return $("#message").val();
    }   

    var form_name = function() {
        return $("#form_name").val();
    }   

    var content = getPlainHtml();

 //    alert(content);     
       var data1 = {
        'action'   : 'make_short_code'
        };

       $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            'action'   : 'formbuilder_ajax_call', // the name of your PHP function!
            'form_content' : content,           // another random value we'd like to pass
            'email' : email(),
            'other_email' : other_email(),
            'subject' : subject(),
            'sender' : sender(),
            'message' : message(),
            'form_name' : form_name()
        },
       })
       .done(function(data) {
            console.log(data);
       })
       .fail(function(data) {
        console.log(data);
       });
  
  });

I hope it helps.

Update: I assume that you have localized the necessary variables. If don't please use read this documentation for Ajax in WordPress