Most of your code looks ok to me. Is your script loaded? (Verify by viewing page source). Per Milo’s suggestion, this is how to properly enqueue your plugin’s scripts:
// Enqueue your scripts
function load_my_scripts(){
wp_enqueue_script( 'my-ajax-handle', plugin_dir_url( __FILE__ ) . 'myajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-handle', 'the_ajax_script', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
I don’t know if it is causing problems, but I would probably switch from using an onclick call and trigger the ajax via form submit. Switching your JS file to the following:
jQuery(document).ready(function($){
$('#theForm').submit(function(e){
$.ajax({
data: jQuery("#theForm").serialize(),
type: 'post',
url: the_ajax_script.ajaxurl,
success: function(response_from_the_action_function) {
$("#response_area").html(response_from_the_action_function);
}
});
});
});