Sending variable from ajax on form submit

Question

I want to make filter with check boxes with ajax.

Here is the form with check boxes:

<form  method="post" id="filter">
    <input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
    <input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ($twitter=='1') {echo 'checked';}?>    
    <input type="hidden" value="myfilter"> 
</form>

Here is javascript:

jQuery(document).ready( function(){  
    jQuery('#content').on('submit', '#filter', function(e) {
    e.preventDefault();     
    var test = jQuery('#test-btn').data( 'id' );

    jQuery.ajax({           
        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        },
        success : function( response ) {
            alert (test);               
            jQuery('#result').html(response);

        }
    }); 
    });
 });

And function:

function test_function() {  
check_ajax_referer( 'rml-nonce', 'security' );  
$test_data = $_POST['test_data'];
echo $test_data; 
die();
}
add_action('wp_ajax_test_function', 'test_function'); 
add_action('wp_ajax_nopriv_test_function', 'test_function');

For now I'm just trying to test it. So when user clicks on checkbox in form that ajax is called. But I'm stuck. If I add this line to form action action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" , then on submit I'm stuck on ajax url: admin-ajax.php. If I remove action line from form then page simple reloads.

If anybody can tell me what I'm doing wrong, I will build on this and actually send checkbox values from the form and execute query in function for filtering the data.

Answer 1

in your html form add <input name="action" type="hidden" value="test_function"/> . here "value" is your "action_name". Your ajax call is incorect. Data should be url: "your php action script" data: $('form#filter).serialize(), About ajax first try to create ajax on your computer without wordpress. When you understand how ajax work try on Wordpress. if you want to stay on the same page use jQuery(document).ready(function($) { $('form#filter').on("submit",function(e){ e.preventDefault(); $.ajax({ ..... Beginners don't understand what ajax is. It's server response. So you first need server side script (using php) write in url where it is, then data is sent in that url file. Then executed and server make response.

/update/ ok I'll give an correct wordpress ajax axample and try to explain how it work.

html

<form  method="post" id="filter">
<input type="checkbox" name="f" value="1" onchange="this.form.submit()" <?php if  ($face =='1') {echo 'checked';}?>
<input type="checkbox" name="t" value="1" onchange="this.form.submit()" <?php if ($twitter=='1') {echo 'checked';}?>    
<input type="hidden" name="action" value="my_php_action"> 

Here is important <input type="hidden" name="action" value="my_php_action"> else it want work.

Javascript

jQuery(document).ready( function(){  
    $('#filter').on('submit', function(e) {
    e.preventDefault();     
     jQuery.ajax({
  /*here url is in your plugin directory created file to which you sent data*/   
        url : myPlugin/serverSidePHPscript.php, 
        type : 'post',
       /* data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : test
        }, incorrect. Should be folowing*/
        data:$('form#filter').serialize(), //server will unserialize automatic
        success : function( response ) {
        alert ('Server say :' + response ); //!important for url debuging purpose   
        }
    }); 
    });
 });

myPlugin/serverSidePHPscript.php file looks like Variation 1:

<?php 

echo "I fooled you!";

?>

Important to understand: if in javascript alert box you see only "Server say:" Then script failed. If you see in alert box "Server say: I fooled you" then is correct.

myPlugin/serverSidePHPscript.php file looks like Variation 2:

<?php
/**
 * Executing Ajax process.
 *
 * @since 2.1.0
 */
define( 'DOING_AJAX', true );
if ( ! defined( 'WP_ADMIN' ) ) {
    define( 'WP_ADMIN', true );
}

/** Load WordPress Bootstrap */
require_once('../../../../wp-load.php' );

/** Allow for cross-domain requests (from the front end). */
//send_origin_headers();

// Require an action parameter here is for debuging
if ( empty( $_REQUEST['action'] ) )
    wp_die( '0', 400 );

/** Load Ajax Handlers for WordPress Core */
require_once( ABSPATH . 'wp-admin/includes/ajax-actions.php' );

@header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
@header( 'X-Robots-Tag: noindex' );

send_nosniff_header();
nocache_headers();

add_action('I_fooled_you_again_wp_ajax', 'callback_function');
do_action( 'I_fooled_you_again_wp_ajax');


//callback function
function callback_function(){
  echo "I fooled you again!";
}
wp_die();


?>

Again if you see in alert box "Server say: I fooled you again!" then the script is correct. If you compare wordpress file admin-ajax.php with myPlugin/serverSidePHPscript.php then you see it is almost the same.

/ *update * / And aproach 3 the easiest way. In plugins dont use hooks wp_ajax_callback_fuction or wp_ajax_nopriv_callback_function hooks instead use admin_init hook, for frontend too. wp_ajax hook will never fire, because of if condition in admin-ajax.php file.

This is how ajax work on wordpress.