Here is a example of the custom ajax code in the wodpress CMS. We can use this without creating our custom new files we just add your jquery script and php script in the existing wordpress theme. This example is good use of the standard wordpress ajax feature. In this example we have a form that have some fields with the values and also have tow different buttons to do different actions. In this example we get the form data via ajax and then send the two different mails to the admin according to the button press. On button use to send the mails for change requests and second button use to send the mail request to cancel the subscription. You can put your jquery code in common files like header of footer of the theme just make sure the ID or identifier should be very unique for the buttons not to match with any other elements in the website. Or you can put this jquery code in your template if which this form exist. In these given scripts there are some commented code can be use for different purposes not removed can be more helpful some other actions.
HERE IS THE JQUERY CODE TO USE IN TEMPLATE FILE OR HEADER OR FOOTER FILE
<script type="text/javascript">
// AJAX FOR THE CHANGE PACKAGE PAGE
jQuery( document ).on( 'click', '#change_request_pack, #cancel_request_pack', function() {
alert('You order is currently under review. We will email when we have made requested changes!');
jQuery('#change_request_message').css('display','block');
// var lib_data_id = $(this).prev(':input').val();
// var data = jQuery('.variations_form').serialize() + "&action=change_request_pack";
var data = "action=change_request_pack";
data += "&type="+jQuery(this).val();
data += "&adults="+jQuery('#adults').val();
data += "&kids="+jQuery('#kids').val();
data += "&design-package-1="+jQuery('#design-package-1').val();
data += "&design-package-2="+jQuery('#design-package-2').val();
data += "&design-package-3="+jQuery('#design-package-3').val();
data += "&design-package-4="+jQuery('#design-package-4').val();
data += "&your-price="+jQuery('#your-price').val();
data += "&subscription-id="+jQuery('#subscription-id').val();
jQuery.ajax({
url : '<?php echo admin_url( 'admin-ajax.php' );?>',
type : 'get',
data : data,
success : function( response ) {
// response = jQuery.parseJSON(response);
// alert(response);
jQuery('#main').animate({
scrollTop: jQuery("#change_request_message").offset().top
}, 1000);
/*response = $.parseJSON(response);
if(response.status=='added'){
$("#addBtn"+response.lib_data_id).val('Remove from request folder');
$("#addBtn"+response.lib_data_id).addClass('remove');
}else{
$("#addBtn"+response.lib_data_id).val('Add to request folder');
$("#addBtn"+response.lib_data_id).removeClass('remove');
}
*/
}
});
});
</script>
HERE BELOW THE PHP SCRIPT USE IN THE FUNCTIONS FILE OF THE THEME
<?php
add_action( 'wp_ajax_nopriv_change_request_pack', 'change_request_pack' );
add_action( 'wp_ajax_change_request_pack', 'change_request_pack' );
function change_request_pack() {
global $wpdb;
$return['Type'] = $_GET['type'];
$return['Adults'] = $_GET['adults'];
$return['Kids'] = $_GET['kids'];
$return['Subscription ID'] = $_GET['subscription-id'];
$return['Design Package 1'] = $_GET['design-package-1'];
$return['Design Package 2'] = $_GET['design-package-2'];
$return['Design Package 3'] = $_GET['design-package-3'];
$return['Design Package 4'] = $_GET['design-package-4'];
$return['Package'] = $_GET['your-price'];
$to = get_option('admin_email');
if($return['Type']=="Submit Changes")
{
$subject = "Package Change Request for Subscription ID #".$return['Subscription ID'];
$message = "<p>Package Change Request for Subscription ID #".$return['Subscription ID']."</p>";
$message .= "<b>Adults: </b> ".$return['Adults'];
$message .= "<br/><b>Kids: </b> ".$return['Adults'];
$message .= "<br/><b>Subscription ID: </b> ".$return['Subscription ID'];
$message .= "<br/><b>Design Package 1: </b> ".$return['Design Package 1'];
$message .= "<br/><b>Design Package 1: </b> ".$return['Design Package 2'];
$message .= "<br/><b>Design Package 1: </b> ".$return['Design Package 3'];
$message .= "<br/><b>Design Package 1: </b> ".$return['Design Package 4'];
$message .= "<br/><b>Package: </b> ".$return['Package'];
}
else if($return['Type']=="Cancel Subscription")
{
$subject = "Cancelation request for Subscription ID #".$return['Subscription ID'];
$message = "<b>Cancelation request for Subscription ID #".$return['Subscription ID']."</b>";
}
$headers[] = "From: Admin <admin@toothbrush-39739797453324098.com>";
$headers[] = "Content-type: text/html";
wp_mail( $to, $subject, $message, $headers );
echo json_encode($return);
exit();
die;
}
?>