Using Ajax in WordPress to send mail

4 comments

1. At first you need to add two actions, one for the non-logged in user explicitly required to make it working, for example something like this (Basically in your functions.php file):

   add_action( 'wp_ajax_siteWideMessage', 'wpse_sendmail' );
   add_action( 'wp_ajax_nopriv_siteWideMessage', 'wpse_sendmail' );
   

   Then, you need to make the request to the admin-ajax.php so in the jQuery function, you may use something like this:

   $("#contact-send").click(function(e){
   
       e.preventDefault(); // if the clicked element is a link
   
       //...
   
       var data = { 'action':'siteWideMessage', 'more':'values' };
   
       $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
           console.log(response);
       });
   
   });
   

   Make sure you put exit/die at the end of your handler in server side, for example:

   function wpse_sendmail()
   {
       // Process the post data...
       
       if(wp_mail(...)) {
           echo 'success';
       }
       else {
           echo 'failed';
       }
   
       die();
   }
   

   In your success callback, the response variable will get the response sent from the server side, i.e. success/failed. There are better ways to do this (Using wp_localize_script etc). Read this detailed article. Also, if you want to return a json response then you may use $.json('url', data, func).

   If you are confused then let me tell you that, you should make the request to admin-ajax.php and pass the action with the request and in this case it is siteWideMessage, so WordPress will call the handler that’s registered using add_action hook and in your case it’s wpse_sendmail.Eid Mubarak 🙂

   Log in to Reply

2. I had to do something slightly differently to get this to work.

   First I added a hidden input on my template page and gave it the value of the ajax url like this:

   <input type="hidden" id="ajax_url" value="<?php echo admin_url('admin-ajax.php'); ?>"/>
   

   Then I had this in my functions.php

   add_action( 'wp_ajax_siteWideMessage', 'wpse_sendmail' );
   add_action( 'wp_ajax_nopriv_siteWideMessage', 'wpse_sendmail' );
   
   function wpse_sendmail() {
     echo "hewwo world";
   
     die();
   }
   

   And my js in a seperate js file as such:

   $("#submit-form").click(function(e){
   
     e.preventDefault(); // if the clicked element is a link
   
     $.post($("#ajax_url").val(), {
         action: 'siteWideMessage',
         // and the rest
     }, function(response) {
         // handle a successful response
         console.log(response)
     });
   
   });
   

   This works for me.

   Log in to Reply

3. Looking at the documentation for wp_ajax_(action), it looks like you simply need to set the action parameter to “siteWideMessage”. For example…

   $.post(<?= json_encode(admin_url('admin-ajax.php')) ?>, {
       action: 'siteWideMessage',
       // and the rest
   }, function(response) {
       // handle a successful response
   });
   

   Log in to Reply

4. You can do this the wordpress way, or you can do this the easy way. I would make a plugin to hold AJAX-handling code.

   <?php
   /*
   Plugin Name: AJAX Receiver
   */
   
   
   add_action('admin_menu', 'ajax_receiver_menu');
   function ajax_receiver_menu() {
       $parent_slug = null; // Child of null, so this menu item has no link to it in the dashboard.
       $menu_title  = "AJAX Receiver menu"; // This menu title will not be visible.
       $page_title  = "AJAX_Receiver"; // No one will visit this page.
       $menu_slug   = 'ajax_receiver'; // This is the last part of the URL you post to.
       $callback    = 'ajax_receiver_menu_content';
       add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $callback);
   }
   
   
   
   function ajax_receiver_menu_content() {
       // check request variables, do other logic.
       echo "This is the response to your AJAX request.";
   }
   

   Then, you can send a normal post request.

   $.post( "/wp-admin/admin.php?page=ajax_receiver", { siteWideMessage:"null", forwhat: forwhat, name: name, email:email }, function(data){
           console.log(data); // You should see "This is the response to your AJAX request." in your console.
   });
   

   This is definitely not how you’re “supposed” to do it, but I’ve found this to be much easier to work with. The critical part is that the submenu doesn’t know if it’s echoing “This is the response to your AJAX request” in response to an AJAX request, or a normal page request. In fact, you could point your browser to "/wp-admin/admin.php?page=ajax_receiver" and you would just see “This is the response to your AJAX request” in unstyled text at the top of your screen.

   Log in to Reply