Chained selects in Wordpress via AJAX

485 views Asked by At

I need to make two chained select inputs (country, city) in WP. (all is in locations taxonomy, country is a main category and city is a subcategory)

in first select i listed all countries:

$locations = get_terms( ‘locations’, array(
‘hide_empty’ => false,
‘parent’ => 0 ) );

In second select i need only the cities depend on selected country (without page refresh/submit, so with AJAX)

I need passing selected value from first select to php variable:

$whichCountry = AJAX RESPONSE HERE

Listing second select:

$locations = get_terms( ‘locations’, array(
‘hide_empty’ => false,
‘parent’ => $whichCounty) );

Please help me how to achieve this i make same code but its not enough:

JS:

(function ($) {
$(document).ready(function () {
$(‘#first_select’).on(‘change’, function(){
$.post(
PT_Ajax.ajaxurl,
{
// wp ajax action
action: ‘ajax-inputtitleSubmit’,

// vars
data: $(‘#first-select’).val(),

// send the nonce along with the request
nextNonce: PT_Ajax.nextNonce
},
function (response) {
console.log(response.data);
}
);
return false;
});

});
})(jQuery);

PHP:

add_action( ‘wp_enqueue_scripts’, ‘inputtitle_submit_scripts’ );
add_action( ‘wp_ajax_ajax-inputtitleSubmit’, ‘myajax_inputtitleSubmit_func’ );
add_action( ‘wp_ajax_nopriv_ajax-inputtitleSubmit’, ‘myajax_inputtitleSubmit_func’ );

function inputtitle_submit_scripts() {

wp_enqueue_script( ‘inputtitle_submit’, get_template_directory_uri() . ‘/assets/js/inputtitle_submit.js’, array( ‘jquery’ ) );
wp_localize_script( ‘inputtitle_submit’, ‘PT_Ajax’, array(
‘ajaxurl’ => admin_url( ‘admin-ajax.php’ ),
‘nextNonce’ => wp_create_nonce( ‘myajax-next-nonce’ )
)
);

}

function myajax_inputtitleSubmit_func() {
// check nonce
$nonce = $_POST[‘nextNonce’];
if ( ! wp_verify_nonce( $nonce, ‘myajax-next-nonce’ ) ) {
die ( ‘Busted!’ );
}

// generate the response
$response = json_encode( $_POST );

// response output
header( “Content-Type: application/json” );
$whichCountry = $response;

// IMPORTANT: don’t forget to “exit”
exit;

}

Functions.php

include_once(‘inputtitle_submit_inc.php’)
0

There are 0 answers