Hy大家，
this是我正在使用Bootstrap togglable tab feature构建的网站来处理我想要显示的内容（在右侧）。 当我想用php提交联系表单时，我的问题就来了，因为最终错误在联系页面中正确显示，但表单自动重定向到主页，因为没有到联系页面本身的正确链接。这个问题可能很愚蠢但我在提交表单时找不到在同一个联系页面上重定向的方法。有什么帮助吗？
以下是 HTML 代码：
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h3><a href="#home" data-toggle="tab">MARCELLO GIOVENCO PHOTOGRAPHY</a></h3>
</div>
</div>
<!-- Menu -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">PROJECTS</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#napoli" tabindex="-1" data-toggle="tab">NAPOLI</a></li>
<li><a href="#portraits" tabindex="-1" data-toggle="tab">PORTRAITS</a></li>
</ul>
</li>
<li><a href="#bio" data-toggle="tab">BIO</a></li>
<li><a href="#contact" data-toggle="tab">CONTACT</a></li>
<li><a href="#blablabla" data-toggle="tab">BLABLABLA</a></li>
</ul>
</div>
</div>
<!-- Content -->
<div class="col-sm-9">
<div id="myNavbar" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>home</p>
</div>
<div class="tab-pane fade" id="napoli">
<p>napoli</p>
</div>
<div class="tab-pane fade" id="portraits">
<p>portraits</p>
</div>
<div class="tab-pane fade" id="bio">
<p>bio</p>
</div>
<div class="tab-pane fade" id="contact">
<?php include('contact.php');?>
</div>
</div>
</div>
</div>
</div>
这是contact.php的 PHP 代码
<?php
if ($_POST["submit"]) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);
$from = 'www.marcellogiovenco.com';
$to = 'marcellomariagiovenco@gmail.com';
$subject = "$name sent you a message!";
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
// Check if name has been entered
if (!$_POST['name']) {
$errName = 'Please enter your name';
} else {
$name = test_input($_POST["name"]);
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
$errName = "Only letters and white space allowed";
}
}
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmail = 'Please enter a valid email address';
}
//Check if message has been entered
if (!$_POST['message']) {
$errMessage = 'Please enter your message';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
$errHuman = 'Your anti-spam is incorrect';
}
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="alert alert-success">Thank You for the message! I will be in touch</div>';
} else {
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<form id="myForm" class="form-horizontal" role="form" method="post" action="">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<label for="message" class="col-sm-2 control-label">Message</label>
<div class="col-sm-5">
<textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
<div class="col-sm-5"></div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<p>All fields are required.</p>
</div>
</div>
<div class="form-group">
<div class="col-sm- col-sm-offset-2">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-2">
<?php echo $result; ?>
</div>
</div>
</form>
答案 0 :(得分：1)
据我所知，您的问题是，当您点击“提交”按钮时，会重定向到索引或第一个标签。当我跑到我得到这个脚本时，将我重定向到我点击的提交按钮的标签。
$(document).ready(function() {
if(location.hash) {
$('a[href=' + location.hash + ']').tab('show');
}
$(document.body).on("click", "a[data-toggle]", function(event) {
location.hash = this.getAttribute("href");
});
});
$(window).on('popstate', function() {
var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
$('a[href=' + anchor + ']').tab('show');
});
希望它可以帮助你。
答案 1 :(得分：0)
使用contact.php作为表单的操作。然后，在if的末尾，使用header（）函数将用户重定向到确认页面或表单（如果有错误）。
答案 2 :(得分：0)
您可以使用jQuery通过ajax提交表单。 http://api.jquery.com/jquery.ajax/
$('#myForm').on('submit', function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// Show success message
}
});
});