javascript - 联系表格在新页面上而不是在 div (ajax) 中显示确认
问题描述
我正在尝试使该联系表正常工作: https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form 但确认文本在新站点而不是 div 中打开“消息”。
联系人.php
<form id="contact-form" method="post" action="contactaction.php" role="form" data-toggle="validator">
<div class="messages"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="contact.js"></script>
联系.js
$(function () {
// init the validator
$('#contact-form').validator();
// when the form is submitted
$('#contact-form').on('submit', function (e) {
// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "contact.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});
解决方案
只需使用 e.preventDefault(); 作为 onsubmit 函数的第一步:
// when the form is submitted
$(function () {
// init the validator
$('#contact-form').validator();
// when the form is submitted
$('#contact-form').on('submit', function (e) {
e.preventDefault();
// if the validator does not prevent form submit
var url = "contact.php";
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns
// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
// let's compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
})
});
推荐阅读
- vue.js - 如何在 b-table 的 v-slot:cell() 模板中获取项目值 - BootstrapVue
- html - autocapitalize="none" 不适用于在 Android 上的 Firefox 中
- c - 开关盒基本
- python - 无法从 BeautifulSoup 获取整行
- swift - 是否可以调用 Any 的 AsFunction() 变量?
- gcc - gfortran 是否附加下划线...错误链接 Fortran 和 C
- python - 如何抓取有加载器的网站?
- html - Bootstrap Grid 不适合一行中的 div
- javascript - React JS 中多个组件的介绍 JS
- c++ - 使用静态 std::vector 类成员时访问冲突