单击单选按钮后通过 ajax 发送电子邮件答案

【问题标题】：Send email via ajax once radio button is clicked单击单选按钮后通过 ajax 发送电子邮件
【发布时间】：2019-03-14 05:49:56
【问题描述】：

当有人单击单选按钮而没有刷新页面时，我正在尝试发送电子邮件。我已经让系统发送具有价值的电子邮件，它只是每次我不想要的刷新。我不是最擅长 Ajax 和 Javascript，但我们将不胜感激。

我也尝试过e.preventDefault(); 功能，但似乎也无法正常工作。

我正在通过 WordPress 平台上的 localhost 运行该站点。以下是我的代码：

用于发送电子邮件的 PHP 文件

if(isset($_POST['radio'])){
 $user_info = get_userdata(1);
 $email = $user_info->user_email;
 $to = "example@example.com";
 $from = "donotreply@example.org"; 
 $subject = "Subject";
 $message = "Option Clicked: " . $_POST['radio'] . "\nName: " . 
 $user_info->last_name .  ", " . $user_info->first_name . "\nUser Email: ". $email;
 $headers = "From:" . $from;    
    wp_mail($to,$subject,$message,$headers);
}

HTML

<form id="contact" action="unsubscribe.php" method="post" name="contact">
 <span class="close-button">&times;</span>
 <h3>Title</h3>
 <p>Description</p>
 <ul>
  <li>
   <input type="radio" name="radio" id="option1" value="Option 1" /><label for="option1">Option 1</label>
   <div class="check"></div>
  </li>
  <li>
   <input type="radio" name="radio" id="option2" value="Option 2" /><label for="option2">Option 2</label>
   <div class="check"></div>
  </li>
 </ul>
 <div id="button" class="hide">
  <a href="<?php echo esc_url($action['url']); ?>" class="unsubscribe-button button cancel">Submit and Cancel Subscription</a>
 </div>
</form>

$('input[name$="radio"]').on('click', function(){
    var radio = $(this).val();
      $("#" + radio);
      $('#contact').on('submit', function(){
        $.ajax({
            type: 'POST',
            url: 'unsubscribe.php',
            data: {radio: radio},
            success: function() {
                alert("Success");
            }
        });
      });
});

【问题讨论】：

从 html <form> 标签中移除 action="unsubscribe.php"
另外，从 html <a> 标记中删除 href="<?php echo esc_url($action['url']); ?>"。而是使用 href='#' 并在 js 中使用 e.preventDefault();

标签： javascript ajax wordpress email radio-button

【解决方案1】：

您不应该在 ajax 调用的上下文中发送表单，因此您必须删除表单的操作和方法。

因为实际上，一旦到达 ajax 的成功回调，就会调用此操作，因此您的页面会被刷新。

【讨论】：