php表单提交INSIDE同一页面后显示消息答案

【问题标题】：Display message after php form submit INSIDE same pagephp表单提交INSIDE同一页面后显示消息
【发布时间】：2018-02-21 04:39:04
【问题描述】：

在我的 INDEX.HTML 页面上，我有一个订阅表单，它使用 php 将数据写入数据库。一切正常。

当我提交表单时，网站会转到我用来向我和访问者提交电子邮件的 PHP 文件。然后我可以回应一条感谢信息。但是......我不希望消息出现在这个 php 页面中......我希望表单消失并且消息出现在我的索引页面上的标签内......例如 DIV。

我该怎么做？如果我需要使用 AJAX 或 JQUERY...请您指出正确的地方吗？

以下是部分代码：

 <div class="container-fluid">
 <form action="thankyou.php" method="post">
     <div class="form-group">
       <label for="firstname">First Name:</label>
       <input type="input" class="form-control" id="firstname"  name="firstname">      
       <label for="lastname">Last Name:</label>
       <input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
       <label for="email">Email:</label>
       <input type="email" class="form-control" id="email" placeholder="" name="email">      
       </div>
       <button type="submit" class="btn btn-warning">Submit</button>
   </form>
   </div>

谢谢.php

<?php

require 'connection.php';
$conn         = Connect();
$firstname    = $conn->real_escape_string($_POST['firstname']);
$lastname     = $conn->real_escape_string($_POST['lastname']);
$email        = $conn->real_escape_string($_POST['email']);
$myemail      = "myemailaddress";    
$query        = "INSERT into subscription (firstname,lastname,email) VALUES('" . $firstname . "','" . $lastname . "','" . $email . "')";
$success      = $conn->query($query);
$subject1     = "New eBook Subscriber";


if (!$success) {
    die("Couldn't enter data: ".$conn->error);
} else {

  $headers  = "MIME-Version: 1.0" . "\r\n";
  $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
  $headers .= 'From: ' .$myemail. "\r\n";


 $message = "some message";

  $messageb = "some message";

  mail($email, $subject, $messageb, $headers);    
  mail($myemail, $subject1, $message, $headers); 

?><META HTTP-EQUIV="Refresh" CONTENT="1;URL=index.html">

<?php 
$conn->close();
}
?>

【问题讨论】：

您的PHP 代码在哪里？
ajax 最适合您的方案。分享您有问题的完整代码，以便我为您提供帮助。
如何向我的问题添加更多代码？我可以简单地把它复制到这里作为评论吗？对不起，我不经常使用这个网站
点击编辑并添加您的代码。

标签： javascript php jquery forms

【解决方案1】：

试试这个解决方案

<div class="container-fluid">
 <form action="thankyou.php" method="post" id="form">
     <div class="form-group">
       <label for="firstname">First Name:</label>
       <input type="input" class="form-control" id="firstname"  name="firstname">      
       <label for="lastname">Last Name:</label>
       <input type="input" class="form-control" id="lastname" placeholder="" name="lastname">
       <label for="email">Email:</label>
       <input type="email" class="form-control" id="email" placeholder="" name="email">      
       </div>
       <button type="submit" class="btn btn-warning">Submit</button>
   </form>
   </div>

<script>


$('#form').on('submit', function(event) {
 event.preventDefault(); //stops form on submit
  var formData = {};
  $.each($("#form").serializeArray(), function (i, field) {
    formData[field.name] = field.value;
  });
  $.ajax({
  url: 'thankyou.php',
  data: formData,
  method:'POST',
  success: function(response) { 
   $(this).hide(); //sets css display:none to form
   var message = "Thank you!";  
   $('.container-fluid').html(message);
   }
});    

});
</script>

【讨论】：

谢谢！我会看看这个
@Henk 使用这个答案，再做一件事。而不是这个 { $('.container-fluid').append(response.message); } 使用这个 { $('.container-fluid').html(response.message);您想在成功提交消息后消失表单。对吗？
我是否将其保留在表单中？ action="thankyou.php"
无需更改。 event.preventDefault() 停止表单提交。
$('.container-fluid').append(response.message);将在 div 内显示消息。您只需要以 JSON 格式返回 PHP 响应。

【解决方案2】：

在成功通过电子邮件发送数据后设置重定向并设置会话变量并在 html 页面中打印此会话变量。这可能会解决您的问题，但是您也可以使用 ajax 发送数据并解决此问题。

【讨论】：