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â)