I have this test page on a website – https://piclits.com/test-slideshow/
It displays a bunch of images/PICLITS and grabs them randomly from a folder 12 at a time into a slideshow.
I want to email the main image without refreshing the page (which would bring up 12 new images) from the email button which opens up a popup to add email addresses.
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.
My Form:
<form id="ajaxformid" action="<?php echo admin_url( 'admin-ajax.php' ); ?>" method="POST">
<p>Email this PIC-LIT to a friend.</p>
<p>You may include multiple emails if you separate them with a comma.</p>
<ul style="list-style-type: none;">
<li>Email: <textarea name="piclit_email" id="piclit_email" rows="4" cols="50" autocomplete="on" autofocus=""></textarea><input type="hidden" name="founder_piclit" id="founder_piclit" value=""></li>
<li><input type="hidden" name="piclit_bcc" class="piclit_bcc" value="0"></li>
<li>bcc: <input type="checkbox" name="piclit_bcc" class="piclit_bcc" value="1"><br></li>
<input type="hidden" name="action" value="fiveb_ajax_mail">
<?php wp_nonce_field( 'fiveb_ajax_nonce', 'fiveb_nonce_field' ); ?>
<li><input type="submit" name="submit" value="Send"></li>
</ul>
</form>
Javascript:
<script>
jQuery(document).ready(function(){
var frm = $('#ajaxformid');
frm.submit(function (e) {
jQuery('#piclits-popup').magnificPopup.close();
e.preventDefault();
var piclit_email = jQuery( "#piclit_email" ).val();
var founder_piclit = jQuery( "#founder_piclit" ).val();
var piclit_bcc = jQuery('.piclit_bcc').val(),
var formData = {
piclit_email: piclit_email,
founder_piclit: founder_piclit,
piclit_bcc: piclit_bcc,
action: 'fiveb_function'
};
$.ajax({
type : 'POST',
url : '<?php echo admin_url( 'admin-ajax.php' ); ?>',
dataType : 'json',
data : formData,
}).done(function(data) {
console.log(data);
}).fail(function(data) {
console.log(data);
});
});
});
</script>
and php:
function fiveb_function() {
if ( ! isset( $_REQUEST['fiveb_nonce_field'] ) || ! wp_verify_nonce( $_REQUEST['fiveb_nonce_field'], 'fiveb_ajax_nonce') ) {
exit("No naughty business please");
}
$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;
}
if ($piclit_email == '') $fieldError = true;
if (!isset($fieldError)) {
$message = '<html><head><title>Founder PIC-LIT</title></head><body><table border="0" cellspacing="2" cellpadding="20" bgcolor="#ffffff" width="100%"><tbody><tr><td></td><td width="600"><p style="text-align: center">Hello!<br />View A Founder PIC-LIT from <a href="https://piclits.com">piclits.com</a>.</p></td><td></td></tr><tr><td></td><td><img src="'.$founder_piclit.'" alt="Founder PIC-LIT" width="600" style="display:block;width:100%" /></td><td></td></tr></tbody></table></body></html>';
$headers[] = 'From: PIC-LITS <hello@piclits.com>';
$headers[] = 'Content-Type: text/html; charset=UTF-8';
if ($bcc) $sent_mail = wp_mail( "", "$subject", $message, $headers );
else $sent_mail = wp_mail( "$piclit_email", "$subject", $message, $headers );
if ($sent_mail) {
echo 'email sent';
die();
} else {
echo 'There was an error. Sorry your email was not sent.';
die();
}
} else {
echo '<script type ="text/JavaScript">';
echo 'alert("Please fill in all fields to send an email.")';
echo '</script>';
die();
}
}
Seems like I am so close but I cannot get the script to stop hanging up on admin-ajax.php. Any help would be so appreciated! Maybe it has something to do with my popup? I am out of ideas!
