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

时间:2019-03-13 21:05:24

标签: javascript ajax wordpress email radio-button

我试图在有人单击单选按钮而不刷新页面时发送电子邮件。我已经有了可以发送带有该值的电子邮件的系统,它每次刷新时都不需要。我对Ajax和Javascript的了解不是最好的,但是任何帮助将不胜感激。

我也尝试过e.preventDefault();函数,但似乎也无法正常工作。

我正在通过WordPress平台上的本地主机运行站点。下面是我的代码:

用于发送电子邮件的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>

JS

$('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");
            }
        });
      });
});

1 个答案:

答案 0 :(得分:0)

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

因为实际上,一旦到达ajax的成功回调,便会调用此操作,因此刷新了页面。