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

时间:2018-02-21 04:39:04

标签: javascript php jquery forms

在我的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>

thankyou.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();
}
?>

2 个答案:

答案 0 :(得分:3)

试试这个解决方案

<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>

答案 1 :(得分:1)

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