Question

因此，我尝试制作自己的联系表单并进行了这种工作，但我真的想添加一些很酷的功能，例如告诉用户何时未填写所需的表单以及告诉他们何时正确提交了表单。我从this网站获得了此代码。每当我单击提交按钮时，它将带我到我的PHP文件链接，并且页面为空白！我希望能够停留在同一页面上，并让成功/错误消息看起来不被重定向。抱歉，我对Web开发有点陌生。

两个文件都是.PHP !!!

代码如下：

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
    $subject = $_POST['subject'];
        $from = 'Plugin Request Form'; 
        $to = 'theslimeslayer04@gmail.com'; 
        $subject = 'New Plugin Request';

        $body = "From: $name\n E-Mail: $email\n Subject: $subject\n Message:\n $message";

        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your name';
        }

        // 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';
        }
    if(!$_POST['subject']) {
      $errSubject = 'Please enter a subject';
    }

// 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! 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>';
    }
}
    }
?>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="description" content="My very first website.">
  <meta name="author" content="Reprevise">
  <meta name="keywords" content="My development portfolio.">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Reprevise | Home</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="assets/css/layout.css">
  <link rel="stylesheet" type="text/css" href="assets/css/theme.css">

  <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon">
  <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">

</head>

<body>

  <nav class="nav" id="homelink">
    <div class="container">
      <div class="logo">
        <img class="sitelogo" src="assets/images/logo.jpg" alt="logo">
      </div>
      <ul class="menu">
        <li><a href="#homelink">Home</a></li>
        <li><a href="#aboutlink">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>

  <header>
    <div class="title-wrapper">
      <h1 class="header-title">reprevise's dev studio</h1>
    </div>
  </header>

  <div class="aboutsection" id="aboutlink">
    <div class="headingtitle-wrapper">
      <h1>About Reprevise</h1>
    </div>
    <div class="about-paragraph">
      <p style="text-align: left;">Benjamin, otherwise known as Benjamin has been a developer of all different types of programming languages for about 3 years now. He has knowledge of Lua, Java, HTML, CSS, JS, C#, and Python. Ben loves to make Minecraft plugins for all sorts of
        clients for free! Below is a contact form in which you can hit him up if you have a plugin request.</p>
    </div>
  </div>

  <div class="conform-container">
    <div id="contact">
      <div class="conform-heading-wrapper">
        <h1>Contact Form</h1>
        <h4>Send me plugin requests here.</h4>
      </div>
      <form class="form-horizontal" role="form" method="post" action="form-handler.php">
        <div class="form-group">
          <label for="name" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-10">
            <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>
        <div class="form-group">
          <label for="email" class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
            <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>
        <div class="form-group">
          <label for="subject" class="col-sm-2 control-label">Subject</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="subject" name="subject" placeholder="Really Important Plugin" value="<?php echo htmlspecialchars($_POST['subject']); ?>">
            <?php echo "<p class='text-danger'>$errSubject</p>";?>
          </div>
        </div>
        <div class="form-group">
          <label for="message" class="col-sm-2 control-label">Message</label>
          <div class="col-sm-10">
            <textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
            <?php echo "<p class='text-danger'>$errMessage</p>";?>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-10 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-10 col-sm-offset-2">
            <?php echo $result; ?>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>

</html>

Answer 1

您问题的答案位于帖子的PHP脚本内。

如果没有错误，请发送电子邮件

该联系表仅用于发送电子邮件。它并非旨在向页面转储HTML响应。

但是，您可以轻松地将其添加到.PHP文件的底部。本示例仅使用基本的php_include命令，该命令将加载另一个文件。您可以在该文件中添加标准HTML标记。

// 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! 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>';
    }
} else {
   php_include('.../some/path/to/a/file.php');
}
    }
?>
...

但是您 真正想要的 是这样的。这个想法是，当按下<input type="submit">按钮时，您不会离开表单...

<form class="form-horizontal" role="form" onSubmit="return false;">

然后，您可以使用JavaScript向人们展示一些...

很酷的功能，例如告诉用户何时未填写必填项表格，并告诉他们何时正确提交表格

维基百科对AJAX technology的工作原理进行了很好的概述。了解了Ajax引擎的工作原理之后，您可能需要研究使用jQuery。

jQuery $.post()方法是使用AJAX将表单数据从页面发送到服务器的一种简便方法。另一个简单的示例是$.get()。有关更高级的示例，请参见$.ajax()方法。还有相当多的comprehensive API预置方法可供仔细研究。

希望这能回答您的原始问题，并为您指明学习如何开始成为Ajax程序员的正确方向。祝您联系表格好运！：）

每当我单击表单上的提交按钮时，它会将我重定向到空白的php链接，为什么呢？

1 个答案: