Ajax not working in submit button - php

Question

I am creating this wordpress plugin it works well but the issue here in subimt data using ajax. I already created the ajax code but it doesn't work.
Please help to figure it out
Thank You
Here is the code
<script>
var data = {
action: 'join_mailinglist',
email: email
};
jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data,
function(response){
jQuery(".ajaxsave").hide();
jQuery("#mailinglistsubmit").show();
});
return false;
</script>
<?php
/*
Plugin Name: MyFirst
Plugin URI: http://zachis.it
Description: ajax form.
Version: 1.0
Author: Zachary Smith
Author URI: http://zachis.it
License: GPL2
*/
?>
<?php
/* What to do when the plugin is activated? */
register_activation_hook(__FILE__,'my_first_plugin_install');
/* What to do when the plugin is deactivated? */
register_deactivation_hook( __FILE__, 'my_first_plugin_remove' );
function my_first_plugin_install() {
/* Create a new database field */
add_option("my_first_data", 'Testing !! My Plugin is Working Fine.', 'This is my first plugin panel data.', 'yes');
}
function my_first_plugin_remove() {
/* Delete the database field */
delete_option('my_first_data');
}
add_action('admin_menu', 'my_first_admin_menu');
function my_first_admin_menu() {
add_options_page('Plugin Admin Options', 'My Plugin Settings', 'manage_options',
'my-first', 'plugin_admin_options_page');
}
?>
<?php
function plugin_admin_options_page() {
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>Plugin Options Admin Page</h2>
</div>
<div class="content">
<div class="output"><p><?php echo get_option('my_first_data'); ?></p></div>
<p>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); ?>
<h2>Enter Text: </h2>
<textarea name="my_first_data" id="my_first_data" cols="200" rows="20"></textarea>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="my_first_data" /><br />
<input style="position: fixed; left: 40%;" id="mailinglistsubmit" type="submit" value="Save Changes" /><img src="<?php admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" />
</form>
</p>
</div>
<?php
}
?>
<?php add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');
?>
<?php function join_mailinglist_callback() {
$email = $_POST['email'];
if(!empty($email)) {
$yourEmail = 'c#bavotasan.com';
$subject = 'Add me to your mailing list';
$success = mail($yourEmail, $subject, $email);
if(!empty($success)) {
echo 'Your email is subscribed to our mailing list.';
} else {
echo 'There was a problem. Please try again.';
}
}
die();
} ?>
<style>
.content { padding-left:150px;}
.output p {width:700px; height:auto;}
</style>

Answer 1

I see several things wrong with this plugin of yours.
Firstly, why is your JavaScript code appended to the top of the plugin? The right way to include JS in WordPress is to have it in a separate .js file and loaded by enqueing it using wp_enqueue_script(). Same for your styles at the bottom.
An example is as follows:
function my_scripts_method() {
wp_enqueue_script(
'your-script-name',
plugins_url( 'js/your-script.js' , __FILE__ ),
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
Secondly, your PHP plugin file MUST NOT be outputting any content and that means you shouldn't see any ?> tags after the headers as that would output a few linebreaks.
Next, in order to get the admin-ajax-url in your static JS file, you should use this function:
wp_localize_script( 'ajax_get_permalink', 'ajax_get_permalink', array(
ajax_url => admin_url( 'admin-ajax.php' )
));
In your JS file, you should wrap your main code in a function that is called when the form submits.
function mailingListSubmit() {
var data = {
action: 'join_mailinglist',
email: jQuery('#mailingListEmail')
};
jQuery("#mailinglistsubmit").hide();
jQuery(".ajaxsave").show();
jQuery.post(ajax_get_permalink.ajax_url, data,
function(response){
jQuery(".ajaxsave").hide();
jQuery("#mailinglistsubmit").show();
});
}
And finally, your action hooks are wrong too. You copied it from the codex (or who knows where) but didn't even bother to read the docs.
add_action('wp_ajax_my_action', 'my_action_callback');
You need to change my_action_callback to reflect your function name join_mailinglist_callback and wp_ajax_my_action to wp_ajax_join_mailinglist -- the action you defined in your JS file.
The above codes aren't tested for syntax errors but should point you in the right direction. You shouldn't expect your plugin to magically work even if you copy and paste these code in.
Read more about AJAX in WordPress plugins here: http://codex.wordpress.org/AJAX_in_Plugins