I am working on a WP plugin, and I need to be able to call a URL (specifically an AJAX function) using a button click, but the page refreshes after clicking it, which I think is preventing the AJAX request from finishing.
When the button click is registered, JS is meant to grab the value of an input, combine it to form a URL, then change an iFrame source to that URL (which I think calls it), but this is countermanded by the refreshing of the page.
Code is below:
$intro = get_post_meta($post -> ID, $key = 'podcast_file', true);
?>
<div class="downloadHolder">
<h3>Download <?php echo $post->post_title ?> (<?php echo basename($intro, ".ftb") ?>)</h3>
<a href="<?php echo $intro;?>" download="<?php echo basename($intro) ?>" class="demoBtn">Download <?php echo basename($intro, ".ftb") ?> for PC</a>
<!--<a href="#" class="demoBtn">Demo</a>--><br>
<input type="text" name="emailValue" id="emailValue" placeholder="Email Address" class="emailInput" style="text-align: center;">
<button id="UniqueLevelEmailButton" class="downloadBtn" style="margin-top: 0px; width: 100%;">Email for Mobile</button>
<span>(We do NOT collect email addresses.)</span>
<span id="checkMe"></span>
<script>
jQuery(document).ready(function($){
$("#UniqueLevelEmailButton").click(function(e){
email = document.getElementById('emailValue').value;
downloadurl = '<?php admin_url('admin-ajax.php');?>?action=download_email_send&postId=<?php echo $post->ID; ?>&emailValue='+email;
document.getElementById('emailsendframe').src = downloadurl;
return false;
});
return false;
});
</script>
<!-- iframe for submitting to -->
<iframe name="emailsendframe" id="emailsendframe" src="javascript:void(0);" style="display:none;"></iframe>
</div>
<?php
return ob_get_clean();
}
add_shortcode('level', 'file_download');
/* AJAX */
add_action('wp_ajax_download_email_send','download_email_send');
add_action('wp_ajax_nopriv_download_email_send','download_email_send');
// note $_REQUEST will work with $_POST or $_GET methods
function download_email_send() {
$to = $_REQUEST['emailValue'];
// preferably add some email address format validation here
// $validate = some_email_validate_function($to);
// if ($validated) {$message = 'Please check your email for typos.';}
// else {
$post_id = $_REQUEST['postID'];
$page = get_post($post_id);
$postName = $page->post_title;
// ! you would need to redefine $intro here !
$intro = get_post_meta($post_id, $key = 'podcast_file', true);
$path = str_replace("http://example.com/wp-content","",$intro);
$subject = 'Download for '.$postName;
$msg = 'Your download for '.$postName.' ('.basename($intro).') is attached to this email.';
//Why am I unable to pass HTML in the message?
$headers = 'From: Example <noreply@example.com>' . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$mail_attachment = array(WP_CONTENT_DIR . $path);
$send = wp_mail($to, $subject, $msg, $headers, $mail_attachment);
if ($send) {$message = 'Success! Your download has been sent to your email address.';}
else {$message = 'Error: Mail sending failed. Please contact the website administrator using the contact page.';}
// }
// alert the user to the result
echo "<script>alert('".$message."');</script>";
exit;
}