Not able to get JS variable to PHP using AJAX

Question

I have a requirement in a wordpress website (PHP) where on select of a dropdown, two radio buttons show up and depending on the radio button selected a select dropdown will be made available.

I reached the stage where I have the radio buttons are made available. I use jQuery ON event to identify which radio button is checked and have the respective value in a javascript variable. I am trying to pass this JS variable to my php using ajax. Success attribute of ajax works fine but $_POST['name'] does not show the value. I tried to use .html() inside the success attribute of ajax but that just replaces my div element with the value of javascript variable. I need this JS variable value in my PHP code so that I can run a condition based on which I decide which dropdown I need to display on the website.

I have been trying a solution since few days but not able to find a solution. Request some guidance

Edit: Based on the suggestion received I tried the following changes. I see the value in my input type=hidden elements but only if I use Inspect in Chrome. However using View Source does not show me these values.. What am I missing? Can someone please give some guidance..

Ajx-script.js

$.ajax({
  type : "POST",
  url : myAjaxData.ajaxurl,
  data : {
  action : "sProdOrRegion_ajax_action",
  selectedProdReg : selectedProdReg                     
  },
  success : function(data) {
   $("#radioValueHidd1").val(selectedProdReg);                  
   // $('#stakeholderParentData').load( urlValue + " " +"#stakeholderData");
   //$("input[id=radioValueHidd3][value="+ selectedProdReg +"]").html();
   $("input[id=radioValueHidd2]").val(selectedProdReg);
 }
});

functions.php

add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('my-ajax', get_template_directory_uri() . '/library/js/ajx-script.js', array('jquery') );
wp_localize_script(
'my-ajax',
'myAjaxData',
array( 'ajaxurl' => admin_url('admin-ajax.php') )
);
});

add_action( 'wp_ajax_singleIdeaProdOrRegion_ajax_action', 'callback_singleIdeaProdOrRegion' );
add_action('wp_ajax_singleIdeaProdOrRegion_ajax_action', 'callback_singleIdeaProdOrRegion');

function callback_singleIdeaProdOrRegion() {
    if(isset($_POST['selectedProdReg'])) {
        $selectedProdReg =  $_POST['selectedProdReg'];
        $selectedProdReg1 =  $_POST['selectedProdReg'];
        die();
    }

}

single-car.php

<div id="stakeholderParentData" class="stakeholderParentData">
                                <div id="stakeholderData" class="stakeholderData">
                                <?php $selectedProdReg = $wpdb->escape($_POST['selectedProdReg']); ?>



                            <?php


                                if (isset ( $selProdReg )) {
                                    if ($selProdReg === "custom_post_prod_company") {

Answer 1

Using Ajax in WordPress is usually done in the following manners:

1- You have to submit your ajax data to the admin-ajax.php. Sometimes you can use the global js variable ajaxurl, predefined by WordPress for that URL. But more reliably I'd use the output of admin_url( 'admin-ajax.php' ).

2- Your data object must contain an action value that have a unique string to represent this ajax submission. I'll use AJAX_ACTION here: data = { action: 'AJAX_ACTION', your_var: 'your_val' };

3- Receive the data by using hooks that contain the action name that you've specified:

add_action( 'wp_ajax_AJAX_ACTION', 'callback_function' );
add_action( 'wp_ajax_nopriv_AJAX_ACTION', 'callback_function' ); 

4- Use your callback_function to receive the data:

function callback_function() {
    // $_POST['your_var'] is accessible here
}

By the way, using echo inside the callback_function would result in the response being sent to the success function.

wp_ajax_nopriv_AJAX_ACTION is for submission for visitors that do not have the WordPress account or are not logged in, while wp_ajax_AJAX_ACTION is for logged in users.

Please check: WordPress Codex

Answer 2

I am not sure if these will help you but I have 2 ideas. First is you might be getting the value of radio button false. Second is maybe you should write your data like this.

data: { "selRegProd" : selRegProd },