引导模式在PHP发送脚本后在同一页面中打开
[英]bootstrap modal open in same page after php sending script
问题描述
关于联系表格的另一个问题。 通过php脚本发送后，我尝试在同一页面上获取引导程序模态。 可悲的是，我每次都失败了，现在我有点卡住了。
我想要它做什么...单击提交按钮后，必须通过php脚本发送联系表，然后在联系表所在的页面上弹出“ ThankyouModal”。
这是HTML：
<div class="container main-container">
<div class="col-md-6">
<form action="contact-page.php" method="post">
<div class="row">
<div class="col-md-12">
<div class="input-contact">
<input type="text" name="name">
<span>Naam</span>
</div>
</div>
<div class="col-md-12">
<div class="input-contact">
<input type="text" name="email">
<span>E-mailadres</span>
</div>
</div>
<div class="col-md-12">
<div class="textarea-contact">
<textarea name="message"></textarea>
<span>Bericht</span>
</div>
</div>
<div class="col-md-12">
<!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> -->
<button type="submit" name="submit" class="btn btn-box">Verzenden</button>
</div>
</div>
</form>
</div>
这是PHP脚本：
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Main CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php
if(isset($_POST['submit'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "test@test.com";
// EDIT THE 2 LINES BELOW AS REQUIRED
$sender = $_POST['email'];
$name = $_POST['name']; // required
$email = $_POST['email']; // required
$message = $_POST['message']; //required
$email_message = "Hieronder staan alle gegevens.\n\n";
$email_subject = "Contact details - $name";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Naam: ".clean_string($name)."\n";
$email_message .= "E-mailadres: ".clean_string($email)."\n";
$email_message .= "Bericht: ".clean_string($message)."\n";
// create email headers
$headers = 'From:'.$sender."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
$sent= @mail($email_to, $email_subject, $email_message, $headers);
if($sent){
echo "<script>
$(document).ready(function(){
$('#thankyouModal').modal('show');
});
</script>";
}
else {
echo "<script>
alert('Sorry! Er is iets mis gegaan, probeer het opnieuw.')
location.replace('contact.html')
</script>";
}
}
?>
</head>
<body>
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2>
</div>
<div class="modal-body text-center" style="background-color: #fff;">
<p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p>
</div>
<div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
<button type="button" class="btn btn-box" aria-label="Close"><a href="contact.html" style="color:fff;" data-dismiss="modal" onclick="javascript:window.location='contact.html'">Sluiten</a></button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
我意识到所有字段都是荷兰语，但是代码必须是通用的。 也许如果弹出窗口有解决方案，我也想知道如何为“失败”消息实现相同的弹出窗口。
在此先感谢大家！ 凯文
1 个解决方案
解决方案1
0 已采纳 2017-11-26 18:19:20
这应该可以解决问题：
form.html：-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container main-container">
<div class="col-md-6">
<form id="contact-form">
<div class="row">
<div class="col-md-12">
<div class="input-contact">
<input type="text" name="name">
<span>Naam</span>
</div>
</div>
<div class="col-md-12">
<div class="input-contact">
<input type="text" name="email">
<span>E-mailadres</span>
</div>
</div>
<div class="col-md-12">
<div class="textarea-contact">
<textarea name="message"></textarea>
<span>Bericht</span>
</div>
</div>
<div class="col-md-12">
<!-- <a class="btn btn-box" input type="submit" name="submit" value="Send">Verzenden</a> -->
<button type="submit" name="submit" class="btn btn-box">Verzenden</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h2 class="modal-title text-center" style="font-weight: 600; color: #393939;">BEDANKT</h2>
</div>
<div class="modal-body text-center" style="background-color: #fff;">
<p style="font-weight: 600; color: #393939; font-size: 18px;">Ik neem zo spoedig mogelijk contact op!</p>
</div>
<div class="modal-footer" style="background-color: #fff; border-top: 0px solid #fff;">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="fail-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fail Modal</h4>
</div>
<div class="modal-body">
<p>Something went wrong in the php script</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#contact-form").on("submit", function(event) {
event.preventDefault();
request = $.ajax({
url: "process.php",
type: "post",
data: $(this).serialize(),
dataType:"json"
});
// Callback handler that will be called on success
request.done(function (response, textStatus){
if (response == true ) {
console.log('true');
$('#thankyouModal').modal('show');
} else {
console.log('false');
$('#fail-modal').modal('show');
}
});
// Callback handler that will be called on failure
request.fail(function (textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+ textStatus, errorThrown
);
});
});
});
</script>
</body>
</html>
process.php：-
<?php
header('Content-Type: application/json');
$sent = false;
if(isset($_POST['submit'])) {
// EDIT THE 2 LINES BELOW AS REQUIRED
$email_to = "test@test.com";
// EDIT THE 2 LINES BELOW AS REQUIRED
$sender = $_POST['email'];
$name = $_POST['name']; // required
$email = $_POST['email']; // required
$message = $_POST['message']; //required
$email_message = "Hieronder staan alle gegevens.\n\n";
$email_subject = "Contact details - $name";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Naam: ".clean_string($name)."\n";
$email_message .= "E-mailadres: ".clean_string($email)."\n";
$email_message .= "Bericht: ".clean_string($message)."\n";
// create email headers
$headers = 'From:'.$sender."\r\n".
'Reply-To: '.$email."\r\n" .
'X-Mailer: PHP/' . phpversion();
$sent= @mail($email_to, $email_subject, $email_message, $headers);
}
die(json_encode($sent));
?>
为了使成功模式出现，$ sent必须在process.php结尾时为true
我还没有测试过您的php脚本-由您决定。 检查响应可能比我做的更好的方法，但这应该很好，而且很简单，因为这是您第一次使用ajax
如何在同一页面的多个按钮上打开一个Bootstrap模式？
[英]How to open one Bootstrap modal on multiple buttons on the same page?
Web表单使引导程序模式保持打开状态，并在回发后显示在下一页上？
[英]Web forms keep bootstrap modal open and on next page after postback?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.