Sending variable from ajax on form submit

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.