Wordpress Ajex select
Thu Jul 06 2023 11:49:24 GMT+0000 (Coordinated Universal Time)
Saved by @gshailesh27
//Html select box //Selection box <li> <select name="enquiryCountry" required id="enquiryCountry"> <option value="" selected disabled>Country*</option> <?php $loop = new WP_Query( array( 'post_type' => 'international_county', 'posts_per_page' => -1 ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <option value="<?php echo get_the_ID(); ?>"><?php the_title(); ?></option> <?php endwhile; ?> </select> </li> //On select result field <li> <select name="enquiryCountryIsd" required id="enquiryCountryIsd"> <option value="" selected disabled>ISD Code*</option> </select> </li> //Step 2: after select goes to ajex call to footer.php $('#enquiryCountry').change(function(){ var postID = $(this).val(); $.ajax({ url: '/wp-admin/admin-ajax.php', type: 'post', dataType: 'json', data: { action: 'data_fetch', postID: postID, }, success: function(data) { //console.log("chcek117771"); //console.log(data.countryshortcode); //return false; //var $countryshortcode = '<option value="" selected>'.(data.countryshortcode).'</option>' $('#enquiryCountryIsd').html(data.countryshortcode); $('#enquiryCenter').html(data.counterycenter); $('#countryPhoneNoLenght').html(data.countrylenth); //console.log(data); //alert(data); } }); }); //Step 3: ajax call to function on function.php file ( multiple value return ) function data_fetch(){ //print_r($_POST); //exit; $countryCode = $_POST; $ID = $countryCode; $postIds = $ID['postID']; $loop = new WP_Query( array( 'post_type' => 'international_county', 'posts_per_page' => -1, 'p' => $postIds ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <?php $countryisds = get_field('country_prefix_mobile_number'); $countryshortCode = get_field('country_short_code'); $countrycenter = get_field('international_center'); $countryNoLenght = get_field('country_mobile_number_length'); $postidno = $postIds; $output = ''; // $output1 = ''; $output = '<option value="'.$postidno.'" selected>('.$countryshortCode.') '.$countryisds.'</option>'; $output1 = '<option value="'.$postidno.'" selected>'.$countrycenter.'</option>'; $output2 = '<option value="'.$postidno.'" selected>'.$countryNoLenght.'</option>'; $array = array("countryids"=>$countryisds, "countryshortcode"=>$output, "counterycenter"=>$output1, "countrylenth"=>$output2); // echo $array; endwhile; wp_reset_postdata(); echo json_encode($array); exit; } // the ajax function add_action('wp_ajax_data_fetch' , 'data_fetch'); add_action('wp_ajax_nopriv_data_fetch','data_fetch'); //Step 3: ajax call to function on function.php file ( single value return ) function data_fetch(){ //print_r($_POST); //exit; $countryCode = $_POST; $ID = $countryCode; $postIds = $ID['postID']; $loop = new WP_Query( array( 'post_type' => 'international_county', 'posts_per_page' => -1, 'p' => $postIds ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <?php <option value="<?php echo get_the_ID(); ?>"><?php the_field('country_short_code'); ?> (<?php the_field('country_prefix_mobile_number'); ?>)</option> endwhile; wp_reset_postdata(); exit; } // the ajax function add_action('wp_ajax_data_fetch' , 'data_fetch'); add_action('wp_ajax_nopriv_data_fetch','data_fetch');
Comments