发布于2024-11-25 20:10 阅读(711) 评论(0) 点赞(20) 收藏(5)
我是 Javascript 新手,因此我尝试提交并打开成功消息弹出框,目前数据发布到 ajax 正在工作,然后我需要打开一个带有复选框值的成功消息。提交成功后,我该如何让模型弹出带有复选框值的消息?
document.addEventListener("DOMContentLoaded", function(e) {
var a = document.getElementById("alecaddd-testimonial-form");
a.addEventListener("submit", function(e) {
e.preventDefault(), o();
var r = {
name: a.querySelector('[name="name"]').value,
email: a.querySelector('[name="email"]').value,
message: a.querySelector('[name="message"]').value,
nonce: a.querySelector('[name="nonce"]').value
};
if (r.name)
if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
if (r.message) {
var t = a.dataset.url,
s = new URLSearchParams(new FormData(a));
a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
method: "POST",
body: s
}).then(function(e) {
return e.json()
}).catch(function(e) {
o(), a.querySelector(".js-form-error").classList.add("show")
}).then(function(e) {
o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")
})
} else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
else a.querySelector('[data-error="invalidName"]').classList.add("show")
})
})
<div class="package-container">
<form id="alecaddd-testimonial-form" class="zon-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">
<div id="clmn3">
<div class="cnt">
<div class="row" style="background: url(<?php print $picture; ?>);">
<h3>
<?php echo esc_attr( $budget ); ?>
</h3>
<label class="zon-container"><p>2 Nights 3 Days: 3399</p>
<input class="chb" type="checkbox" name="package[]" value="3000" checked="checked">
<span class="checkmark"></span>
</label>
<label class="zon-container"><p>3 Nights 4 Days : 4399</p>
<input class="chb" type="checkbox" name="package[]" value="4000">
<span class="checkmark"></span>
</label>
<label class="zon-container"><p>4 Nights 5 Days : 5399</p>
<input class="chb" type="checkbox" name="package[]" value="5000">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="zon-input-fields">
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="Adult" id="adult" name="adult" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="text" class="field-input" placeholder="infant" id="infant" name="message" required>
<small class="field-msg error" data-error="invalidName">Your Name is Required</small>
</div>
<div class="field-container">
<input type="date" class="field-input" placeholder="date" id="date" name="date" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="phone" class="field-input" placeholder="phone" id="phone" name="phone" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="price" class="field-input" placeholder="price" id="price" name="price" required>
<small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
</div>
<div class="field-container">
<input type="submit" name="submit" class='btn'>
</div>
<div class="field-container">
<small class="field-msg js-form-submission">Submission in process, please wait…</small>
<small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
<small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
<input type="hidden" name="action" value="submit_testimonial">
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce(" testimonial-nonce ") ?>"> </form>
</div>
</div>
</div>
一如既往,我们非常感谢任何帮助。
移动
a.querySelector(".js-form-submission").classList.add("show")
前
return e.json()
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/537208/a26940a79e707b704637/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!