Wordpress Ajex select

PHOTO EMBED

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');

content_copyCOPY