I am trying to implement a simple ajax form with WordPress However I am facing problems doing so any help would be greatly appreciated
HTML
<form class="form-inline" action="wp-admin/admin-ajax.php" id="footer-subs">
<input type="text" name="name" required placeholder="Your Name">
<input type="email" name="email" required placeholder="Email Address" />
<button type="submit" class="red-btn med-btn">Submit</button>
</form>
JQuery
jQuery('#footer-subs').submit(ajaxSubmit);
function ajaxSubmit(){
var data = jQuery(this).serialize();
//console.log(newSubsForm);
jQuery.post(jQuery("#footer-subs").attr("action"),data, function(info) {
jQuery('h3.subscbribe-box-text').fadeOut(500,function(){
jQuery('h3.subscribe-box-submit').html(info).fadeIn();
});
});
return false;
}
Functions.php
wp_localize_script( 'ajax-gravityFooterSubs', 'the_ajax_gravityFooterSubs', array( 'ajaxurl_gravityFooterSubs' => admin_url( 'admin-ajax.php' ) ) );
function gravityFooterSubs(){
var_dump("LOL")
die();
}
add_action('wp_ajax_gravityFooterSubs', 'gravityFooterSubs');
add_action('wp_ajax_nopriv_gravityFooterSubs', 'gravityFooterSubs');
EDIT:: I am getting a success message fade In as '0'
okay so I managed to fix the issue by sending an action method with the data variable.
jQuery('#footer-subs').submit(ajaxSubmit);
function ajaxSubmit(){
var values = jQuery(this).serializeArray();
var data = {'action' : 'gravityFooterSubs', 'values': values};
console.log(data);
jQuery.post(jQuery("#footer-subs").attr("action"),data, function(info) {
jQuery('h3.subscbribe-box-text').fadeOut(500,function(){
jQuery('h3.subscribe-box-submit').html(info).fadeIn();
});
});
return false;
}