【发布时间】：2019-08-04 13:06:32
【问题描述】：
这是我得到的，在使用 woocommerce 订阅的 WordPress 上，用户可以选择通过他们的帐户页面取消订阅。现在，当他们单击取消按钮时，它只是取消了他们的订阅，无需任何确认或重新考虑。我想要它做的是当他们点击取消按钮时，让它弹出一个带有几个单选按钮的反馈模块。一旦他们选择了单选按钮选项，它就会显示取消按钮，然后一旦他们单击取消按钮，它就会做两件事，1) 向管理员发送一封包含他们选择的单选按钮选项的电子邮件，以及 2) 取消他们的订阅。
我在整个互联网上都试图弄清楚这一点，但我终其一生都无法让它发挥作用。我觉得我真的很接近，但不知道如何让这两个动作运行。我可以运行一个或另一个动作，但不能同时运行。我正在使用 Bitnami 在本地主机上运行整个事情，而且我也不是很熟悉我知道必须运行的 Javascript 和 Ajax。下面的大部分代码都是我从互联网上抓取的，如果感觉是一起解析的，请见谅。
我也尝试过在用户单击单选按钮时发送电子邮件，然后取消按钮只是操作，但我遇到了每次单击单选按钮时页面都会刷新的问题。现在，如果我可以让电子邮件发送而不刷新页面，这种方式会起作用，但这是不太理想的方式。 :)
所以，任何帮助将不胜感激！ :)
以下是我目前拥有的代码：
用于电子邮件的 PHP
if(isset($_POST['radio'])){
$user_info = get_userdata(1);
$email = $user_info->user_email;
$to = "example@gmail.com";
$from = "donotreply@example.org";
$subject = "Subscription Cancelled";
$message = "Reason for unsubscribing: " . $_POST['radio'] . "\nName: " .
$user_info->last_name . ", " . $user_info->first_name . "\nUser Email: ". $email;
$headers = "From:" . $from;
wp_mail($to,$subject,$message,$headers);
}
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
function show1() {
document.getElementById('button').style.display = 'inline-block';
}
function show2() {
document.getElementById('button').style.display = 'inline-block';
}
window.addEventListener("DOMContentLoaded", function() {
var form = document.getElementById("contact");
document.getElementById("submit_button").addEventListener("click", function() {
form.submit();
});
});.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(101, 101, 101, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1em 1.5em;
width: 95%;
max-width: 510px;
}
.modal-content #button {
margin-top: 15px;
text-align: right;
}
.modal-content span.radio {
width: 100%;
display: block;
padding: 5px 0;
}
.close-button {
top: 2px;
position: absolute;
right: 10px;
font-size: 1.4em;
cursor: pointer;
color: #949494;
font-weight: 600;
}
.close-button:hover {
color: #333333;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 16px;
transform: scale(0.8);
transition: 0.5s;
}
label {
display: block;
margin: 0 0 3px 0;
}
input[type="text"] {
width: 100%;
}
.modal-content ul {
margin-left: 0;
}
.modal-content ul li {
display: block;
position: relative;
float: left;
width: 100%;
}
.modal-content ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
.modal-content ul li label {
display: block;
position: relative;
font-weight: 300;
font-size: 1em;
padding: 10px 25px;
margin: 5px auto;
cursor: pointer;
-webkit-transition: all 0.25s linear;
background: #f5f5f5;
border-left: 3px solid #949494;
}
.modal-content ul li .check {
display: block;
position: absolute;
border: 2px solid #AAAAAA;
border-radius: 100%;
height: 12px;
width: 12px;
top: 21px;
left: 10px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.modal-content ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 4px;
width: 4px;
top: 2px;
left: 2px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
.modal-content input[type=radio]:checked~.check {
border: 2px solid #428bca;
}
.modal-content input[type=radio]:checked~.check::before {
background: #428bca;
}
.hide {
display: none;
}
.form {
margin-bottom: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="trigger button cancel">Cancel Subscription</a>
<div class="modal">
<div class="modal-content">
<form id="contact" action="" method="post">
<span class="close-button">×</span>
<h3>Title</h3>
<p>Description:</p>
<ul>
<li>
<input type="radio" name="radio" id="option1" value="option 2" onclick="show1();" /><label for="option1">Option 1</label>
<div class="check"></div>
</li>
<li>
<input type="radio" name="radio" id="option2" value="option 2" onclick="show2();" /><label for="option2">Option 2</label>
<div class="check"></div>
</li>
</ul>
<div id="button" class="hide">
<a id="submit_button" onclick="document.getElementById('contact').submit();" href="<?php echo esc_url($action['url']); ?>" class="unsubscribe-button button cancel">Submit and Cancel Subscription 2</a>
</div>
</form>
</div>
</div>【问题讨论】：
标签： javascript ajax wordpress woocommerce subscription