0

How to use a form to send an ajax request to a php function in wordpress then send the return value of the function (a permalink to a post) back to my ajax function response to open a new tab to that particular post?

My php function in functions.php:

function zip_search($userZip){

    $args = array(
    'posts_per_page'    => -1,
    'post_type'         => 'Locations'
    );

$wp_query = new WP_Query($args); 

if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
      $zipField=get_field('zip_codes_services');

          $zipString = $zipField . ', ';        

          $array = explode(', ' , $zipString); //split string into array seperated by ', '

        foreach($array as $value) //loop over values
        {

            if($value==$userZip){
                $post_id = get_the_ID();
                $permalink=get_permalink($post_id);                 
               return ($permalink); //print 
           }    

        }
       endwhile; 
       wp_reset_postdata(); 
endif;
}

My form, on front page of my website:

<form id="zip_search_form" action="" method="post"><input class="form-control search-input" autocomplete="off" name="zipcode" type="text" value="" placeholder="Enter Zip Code" /></form><input type="submit" />

Javascript I tried:

$("form#zip_search_form").on("submit", function(event) {
    $('form#zip_search_form .clear-button').addClass('active');
    event.preventDefault();

    all_locations_map_ajax_filter();
    });

    //Our main ajax call 
        function zip_search_ajax_filter(){
            var filters = [];
            var zipcode = $('form#zip_search_form input[name="zip_search"]').val();


            //process the form
            $.ajax({
                type: "POST", // define the type of HTTP verb we want to use (POST for our form)
                dataType : "json",
                url: ajaxcall.ajaxurl,
                data: {
                    "action": "zip_search", //calls the function in the functions.php file
                    "zipcode": zipcode
                },
                success: function(response) {

                    if(response.length > 0){
                        //remove the current markers
    $(this).html(response)
                    }
                }
            })}

I tried changing the Javascript around a bit with no luck. I have this contained in a folder called js with a file name called scripts.js. I have tried reading the AJAX docs but I'm not really sure how it grabs the form data etc or where exactly I should put it in my file structure. Any advice is appreciated.

Blaise
  • 137
  • 11
  • What is your issue? Is it refreshing/redirecting before send AJAX request? – BadPiggie Oct 26 '18 at 17:54
  • So my first issue is I'm not even sure the AJAX request is being sent at all with my current code. – Blaise Oct 26 '18 at 17:56
  • Your question is currently far too broad. Please do some debugging to narrow down your problem. "I don't know how to use ajax" is not well-suited to being answered here. – Patrick Q Oct 26 '18 at 17:57
  • Doesn't matter, Check the Network tab in chrome.. You can find that AJAX call is working or not – BadPiggie Oct 26 '18 at 17:58
  • And please check your console for further error info, And also share with us – BadPiggie Oct 26 '18 at 17:59
  • @PatrickQ do you know of any simple examples of using a form to send an ajax request, calling a php function and sending the return value of the function back? – Blaise Oct 26 '18 at 18:00
  • 1
    Such things can be found by searching on Google (or even here on SO). Requesting links to tutorials is also off-topic. Please take some time to do your own research. There is plenty of information out there on this topic. – Patrick Q Oct 26 '18 at 18:02
  • 3
    I wrote a [simple example](http://jayblanchard.net/basics_of_jquery_ajax.html) many moons ago. It includes looking at the developer tools in your web browser. – Jay Blanchard Oct 26 '18 at 18:04
  • @DanielRogers It is bit annoying first with AJAX request firstly in WordPress but you will love the process. So kindly reach me at aliashiquemohammad@gmail.com so that we can communicate and help each other. – Mohammad Ashique Ali Oct 26 '18 at 20:08

0 Answers0