Отправить электронное письмо через ajax после нажатия кнопки-переключателя

Question

Я пытаюсь отправить электронное письмо, когда кто-то нажимает кнопку-переключатель без обновления страницы.Я получил систему для отправки электронных писем со значением, она просто обновляет каждый раз, что я не хочу.Я не лучший в Ajax и Javascript, но любая помощь будет высоко ценится.

Я также попробовал функцию e.preventDefault();, но не могу заставить ее работать.

Я управляю сайтом через localhost на платформе 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");
            }
        });
      });
});

Answer 1

Вы не должны отправлять форму в контексте вызова ajax, поэтому вы должны удалить действие и метод формы.

Потому что на самом деле это действие вызывается, когда достигнут успешный обратный вызов ajax, поэтому ваша страница обновляется.