Ajax Form Success Data is always empty

Question

I am trying to run a wordpress wpdb->get_results select query and I want to get the search criteria from a textbox. I want to do it form and with ajax without refreshing the page. No matter what I do the textbox value that I enter into search textbox is always empty. if I modify my query and return all the results the select query works and the result is shown. So your help is required in this as to why I am not able to get textbox value in my search query. Below is all the code ... thanks

PHP Main Function (the $_POST['secretcode'] value never get back to the wpdb select query it is always empty ... query works if I show all results)

function wp_hello()
{

$secretcode=$_POST['secretcode'];

//main logic
global $wpdb;
//echo jsonencode($secretcode);

$sql = "SELECT * FROM wp_store_locator WHERE sl_description = '$secretcode' ";
$results = $wpdb->get_results($sql) or die(mysql_error());
$takeit = array();
foreach( $results as $result ) {

 $takeit[]= $result->sl_description;

    }
echo json_encode($takeit);
die();

}

html

<form action="" method="get" id="myform">
<input type="text" name="secretcode" style="height:30px;" id="secret"/>
<button id="Submit" type="submit">SUBMIT </button>
</form>
<div id="result"></div>

JQuery

jQuery(document).ready(function() {  


  jQuery("#myform").submit(function(e){//form is intercepted
        e.preventDefault();
        var sentdata = jQuery(this).serialize();
var secretkey = jQuery('input[name="secretcode"]').val();
        alert(sentdata);

jQuery.post(yes.ajaxurl,{action : 'wp_hello'},
            function( response) {//start of funciton
        var rez = JSON.parse(response);
                jQuery("#result").append(rez);

                return false;
            } //end of function
        );
}); // submit end here
});

Other enqueue and localize code of php

add_action( 'init', 'add_myjavascript' ); 
function add_myjavascript(){  

add_action( 'wp_ajax_wp_hello', 'wp_hello' );
add_action( 'wp_ajax_nopriv_wp_hello', 'wp_hello');
// register & enqueue a javascript file called globals.js
wp_register_script( 'globals', get_stylesheet_directory_uri() . "/js/ajax-implementationn.js", array( 'jquery' ) ); 
wp_enqueue_script( 'globals' );

// use wp_localize_script to pass PHP variables into javascript
wp_localize_script( 'globals', 'yes', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );


}

Thanks everybody !

Arun P Johny Arun P Johny · Accepted Answer · 2015-02-23T03:26:33

You are not sending secretCode param, you are only sending a parameter called action.

jQuery(function ($) {
    $("#myform").submit(function (e) { //form is intercepted
        e.preventDefault();

        //serialize the form which contains secretcode
        var sentdata = $(this).serializeArray();

        //Add the additional param to the data        
        sentdata.push({
            name: 'action',
            value: 'wp_hello'
        })

        //set sentdata as the data to be sent
        $.post(yes.ajaxurl, sentdata, function (rez) { //start of funciton
            $("#result").append(rez);

            return false;
        } //end of function
        ,
        'json'); //set the dataType as json, so you will get the parsed data in the callback
    }); // submit end here
});

Ajax Form Success Data is always empty

1 Answers