MySQL query in WordPress with AJAX

Question

I would need to see your trigger function but it sounds like you just need to add event.preventdefault to the submit. This will block the page load while still executing AJAX.

$("form.searchCV_form").submit(function(event){
    event.preventDefault();

    alert( "We're not going anywhere now..." );
    // j$.post...
});

or

$("form.searchCV_form").submit(function(e){
    alert( "We're not going anywhere now..." );
    // j$.post...

    return false;
});

More info at event.preventDefault() vs. return false.

Here are some mods to get it working how you expected — sans actual searching.

FORM

<form class="searchCV_form" role="form" action="">
     <div>
         <input type="text" id="search_text" name="search_text" class="cv__text">
         <span class="input-group-btn">
             <button type="submit" class="btn btn-default btn-primary cv__button search--form-btn">SUBMIT</button>
         </span>
     </div>
 </form>
 <div id="search_results"></div>

JQUERY

<script>
// wrap everything in a closure
(function($){

  // get our references
  var $form = $('form.searchCV_form'),
      $search_field = $('#search_text'),
      $results = $('#search_results');

  // AJAX search call
  function do_search() {

    // grab the query value from the search field
    var search_text = $search_field.val();

    // do a POST ajax call
    $.ajax({
      type: "POST",
      url: '<?php echo admin_url('admin-ajax.php'); ?>',
      data: ({
        action: "search_cv",
        search_text: search_text
      }),
      success: function (response){
        console.log(response);
        $results.html(response);
      }
    });
  }

  // on submit, do the search but return false to stop page refresh
  $form.submit(function(e) {
    do_search();
    return false;
  });

})(jQuery);
</script>

WP AJAX

function search_cv()
{
    // get the search query
    $search_text = ucfirst($_POST["search_text"]);

    // clean it up
    $search_text = sanitize_text_field( $search_text);

    // ... do stuff with it

    // output the HTML which will be consumed by $.html()
    ?><div>You searched for <?php echo $search_text; ?> and we found... </div><?php

    // stop doing stuff
    die();
}

add_action( 'wp_ajax_search_cv', 'search_cv' );
add_action( 'wp_ajax_nopriv_search_cv', 'search_cv' );

Related Posts: