How to change PHP variables with AJAX request in WordPress

Question

I have a html form with select boxes and I want to display different data depending on what the users select.

All I really need to do is change 1 variable in php based on the selection.

I make an external API call that returns data and displays it in an html table. I want to to change 1 small part of the api call (an id in the get uri) depending on the users choice.

Is there a simple way to do this?

I've got as far as making the jquery and enqueuing it with wordpress, and I'm getting a 200 response when changing the select box value. But I just can't seem to be able to change the PHP.

To avoid bombarding with code, I've changed the callback function to give an examlple of what I'd like to happen. Greatly appreciate any feedback. Thanks.

HTML

    <form class="choose-site" action="" method="post">
      <select id="choose-site" name="site-choice">
        <option value="site1"><?php echo $primary_site ?></option>
        <option value="site2"><?php echo $site_2 ?></option>
      </select>
    </form>

<div id="test123">
    <p><?php echo $msg; ?></p>
    </div>

JQUERY

(function($) {
    $(document).ready(function() {
        
        $("#choose-site").on("change",function() {
            const val = this.value;
             if (val) {
                 $.ajax({
                    type : "post",
                    dataType : "JSON",
                    url: my_ajax_object.ajax_url,
                    data : { 
                        action: "my_ajax_action"
                },
                success: function(data) {
        $("#test123").html(data);
      }
            });
        }});
    });
})(jQuery);

PHP in Functions.php

<?php

add_action( 'wp_ajax_my_ajax_action', 'users_details_callback' );
add_action( 'wp_ajax_nopriv_my_ajax_action', 'users_details_callback' );

function users_details_callback() {

 if (isset($_POST['site-choice']) && $_POST['site-choice'] == 'site1') {

$msg = "hi";
    
}

if (isset($_POST['site-choice']) && $_POST['site-choice'] == 'site2') {
$msg = "bye";
}

wp_die();
return $msg;

}
?>

Is there a way to change the value of $msg and send it back to the HTML?

Answer 1

Is there a way to change the value of $msg and send it back to the HTML?

Your code is basically already doing that, but there are a few issues:

1. Your AJAX JS (jQuery.ajax()) is not sending the POST data named site-choice to your AJAX PHP callback (users_details_callback()) which reads the data via $_POST['site-choice'].

2. Your AJAX PHP callback would result in WordPress echoing a zero (0) because you're calling wp_die() before returning any output and even if you returned it before wp_die() is called, you should actually echo the output and not return it.

3. Your AJAX JS is expecting a JSON data back from the server (because you set dataType to JSON — dataType : "JSON"), so your AJAX PHP callback should return a valid JSON response.

So to fix the issues:

• In your PHP function (users_details_callback()), you can use wp_send_json_success() to send a JSON response without having to call wp_die(): (note that I also optimized the if condition)

  function users_details_callback() {
      if ( isset( $_POST['site-choice'] ) ) {
          $msg = '';
  
          if ( $_POST['site-choice'] == 'site1' ) {
              $msg = 'hi';
          } elseif ( $_POST['site-choice'] == 'site2' ) {
              $msg = 'bye';
          }
  
          wp_send_json_success( $msg );
      }
  
      // Send an error if we receive an invalid data.
      wp_send_json_error( 'your error' );
  }
  

• In your jQuery.ajax() (or $.ajax()) call:

  $.ajax( {
      ...
      data: {
          action: 'my_ajax_action',
          // Send the site-choice data.
          'site-choice': $( '#choose-site' ).val(),
      },
      success: function( data ) {
          // 'data' is now an object and the $msg value from the server is put in
          // data.data, so use that instead of just 'data'.
          $( '#test123' ).html( data.data );
      },
  } );