使用 Bootstrap 可切换选项卡功能提交 PHP 表单

Question

大家好，

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> 

Answer 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'); });

希望对你有帮助。

Answer 2

使用contact.php 作为表单的动作。然后，在 if 结束时，使用 header() 函数将用户重定向到确认页面或表单（如果出现错误）。

Answer 3

您可以使用 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
                 }
    });
});