title: Wordpress Sending email through Ajax without page refresh hangs on admin_ajax.php
body: <p>I have this test page on a website - <a href="https://piclits.com/test-slideshow/" rel="nofollow noreferrer">https://piclits.com/test-slideshow/</a></p>
  <p>It displays a bunch of images/PICLITS and grabs them randomly from a folder 12 at a time into a slideshow.</p>
  <p><strong>I want to email the main image without refreshing the page</strong> (which would bring up 12 new images) from the email button which opens up a popup to add email addresses.</p>
  <p>All is good - I can grab the image and mail it but the script does something wacky where it flashes on the page and then hangs up at admin-ajax.php rather than just staying on the page and sending the email.</p>
  <p>My Form:</p>
  <pre><code>&lt;div class=&quot;ajax-form-container&quot; style=&quot;float: left&quot;&gt;
     &lt;form id=&quot;ajaxformid&quot; action=&quot;&quot; method=&quot;POST&quot;&gt;
         &lt;p&gt;Email this PIC-LIT to a friend.&lt;br /&gt;You may include multiple emails if you separate them with a comma.&lt;/p&gt;
         &lt;ul style=&quot;list-style-type: none;&quot;&gt;
             &lt;li&gt;Email: &lt;textarea name=&quot;piclit_email&quot; id=&quot;piclit_email&quot; rows=&quot;4&quot; cols=&quot;50&quot; autofocus=&quot;&quot;&gt;&lt;/textarea&gt;&lt;input type=&quot;hidden&quot; name=&quot;founder_piclit&quot; id=&quot;founder_piclit&quot; value=&quot;&quot;&gt;&lt;/li&gt;
             &lt;li&gt;&lt;input type=&quot;hidden&quot; name=&quot;piclit_bcc&quot; class=&quot;piclit_bcc&quot; value=&quot;0&quot;&gt;&lt;/li&gt;
             &lt;li&gt;bcc: &lt;input type=&quot;checkbox&quot; name=&quot;piclit_bcc&quot; class=&quot;piclit_bcc&quot; value=&quot;1&quot;&gt;
             &lt;?php wp_nonce_field( 'fiveb_ajax_nonce', 'fiveb_nonce_field' ); ?&gt;&lt;/li&gt;
             &lt;li&gt;&lt;input type=&quot;submit&quot; name=&quot;submit&quot; value=&quot;Send&quot;&gt;&lt;/li&gt; 
         &lt;/ul&gt;
     &lt;/form&gt;
     &lt;div id=&quot;ajax_success&quot; style=&quot;display: none&quot;&gt;Email sent.&lt;/div&gt;
     &lt;div id=&quot;ajax_error&quot; style=&quot;display: none&quot;&gt;There was an error. Sorry your email was not sent.&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Javascript</p>
  <pre><code>&lt;script&gt;  
      jQuery('#ajaxformid').submit(function(e) {
          e.preventDefault();
          var piclit_email = jQuery( &quot;#piclit_email&quot; ).val();
          if (piclit_email == '') 
              alert(&quot;Please fill in all fields to send an email.&quot;);
          else {
              var founder_piclit = jQuery( &quot;#founder_piclit&quot; ).val();
              // alert (founder_piclit);
              var piclit_bcc = jQuery('.piclit_bcc').val();
              var formData = {
                  piclit_email: piclit_email,
                  founder_piclit: founder_piclit,
                  piclit_bcc: piclit_bcc,
                  action: 'fiveb_ajax_mail',
              };
              jQuery.ajax({
                  type        : 'POST', 
                  url         : '&lt;?php echo admin_url( 'admin-ajax.php' ); ?&gt;',
                  dataType    : 'json',
                  data        : formData,
              }).done(function(data) {
                  console.log(data);
              }).fail(function(data) {
                  console.log(data);
              });
          }
      });
  &lt;/script&gt;
  </code></pre>
  <p>and php:</p>
  <pre><code>function fiveb_function() {
      $subject = 'View A Founder PIC-LIT from piclits.com';
      $piclit_email = strval($_REQUEST['piclit_email']);
      $founder_piclit = strval($_REQUEST['founder_piclit']);
      $piclit_bcc = strval($_REQUEST['piclit_bcc']);
      if ($piclit_bcc) {
          $headers[] = 'Bcc: '.$piclit_email;
      }
      $message = '&lt;html&gt;&lt;head&gt;&lt;title&gt;Founder PIC-LIT&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;table border=&quot;0&quot; cellspacing=&quot;2&quot; cellpadding=&quot;20&quot; bgcolor=&quot;#ffffff&quot; width=&quot;100%&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td width=&quot;600&quot;&gt;&lt;p style=&quot;text-align: center&quot;&gt;Hello!&lt;br /&gt;View A Founder PIC-LIT from &lt;a href=&quot;https://piclits.com&quot;&gt;piclits.com&lt;/a&gt;.&lt;/p&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;img src=&quot;'.$founder_piclit.'&quot; alt=&quot;Founder PIC-LIT&quot; width=&quot;600&quot; style=&quot;display:block;width:100%&quot; /&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;';
      $headers[] = 'From: PIC-LITS &lt;hello@piclits.com&gt;';
      $headers[] = 'Content-Type: text/html; charset=UTF-8';
      if ($bcc) $sent_mail = wp_mail( &quot;&quot;, &quot;$subject&quot;, $message, $headers );
      else $sent_mail = wp_mail( &quot;$piclit_email&quot;, &quot;$subject&quot;, $message, $headers );
      if ($sent_mail) {
          echo ('email sent');
          die();
      } else { 
          echo ('There was an error. Sorry your email was not sent.');
          die();
      } 
  }
  add_action(&quot;wp_ajax_fiveb_function&quot;, &quot;fiveb_function&quot;);
  add_action(&quot;wp_ajax_nopriv_fiveb_function&quot;, &quot;fiveb_function&quot;);
  </code></pre>
  <p>Seems like I am so close but I cannot get the script to stop hanging up on admin-ajax.php. <strong>Any help would be so appreciated!</strong> Maybe it has something to do with my popup? I am out of ideas</p>