bootstrap 模式在 php 发送脚本后在同一页面打开
bootstrap modal open in same page after php sending script
另一个关于联系表的问题。
在通过 php 脚本发送后,我尝试在同一页面上获取 bootstrap 模态。可悲的是我每次都失败了,现在我有点卡住了。
我想让它做什么...
单击提交按钮后,必须通过 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>
我知道所有字段都是荷兰语,但代码必须是通用的。
也许如果有弹出窗口的解决方案,我也想知道如何为 "failed" 消息实现相同的弹出窗口。
提前谢谢大家!
凯文
这应该可以解决问题:
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
结束时为真
我还没有测试过您的 php 脚本 - 这取决于您。可能有比我做的更好的方法来检查响应,但这应该是很好和简单的,因为它是你第一次使用 ajax
另一个关于联系表的问题。 在通过 php 脚本发送后,我尝试在同一页面上获取 bootstrap 模态。可悲的是我每次都失败了,现在我有点卡住了。
我想让它做什么... 单击提交按钮后,必须通过 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>
我知道所有字段都是荷兰语,但代码必须是通用的。 也许如果有弹出窗口的解决方案,我也想知道如何为 "failed" 消息实现相同的弹出窗口。
提前谢谢大家! 凯文
这应该可以解决问题:
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
结束时为真我还没有测试过您的 php 脚本 - 这取决于您。可能有比我做的更好的方法来检查响应,但这应该是很好和简单的,因为它是你第一次使用 ajax