Question

我已经设置了一个仍处于构建状态的页面，我正在建立一个网络表单供用户与我联系。

当我填写网络表格并点击＆＃34;发送＆＃34;按钮，消息成功发送，我收到我的邮件...但是当我点击＆＃34;发送＆＃34;按钮，我被重新导向页面，说它已成功发送。

如何在不重定向页面的情况下提示用户成功发送消息，并在同一窗口中获取消息？

这是我的HTML代码

<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">
      <div class="row">
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required />
        </div>
        <div class="col-xs-6 col-md-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required />
        </div>
      </div>
      <textarea class="form-control" id="message" name="message" placeholder="Message" rows="5"></textarea>
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <button class="btn btn btn-lg">Send Message</button>
        </div>
      </div>
    </form>

这是我的contactUs.php代码

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$message = <<<EMAIL

$message

From: $name

My email is: $email

EMAIL;

$to = "mymail@mymail.com";
$subject = "New Customer Enquiry";

mail($to, $subject, $message, "From: " . $email);
echo "Thank you, your message has been successfully sent!";

?>

AJAX

<script        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"     type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(){
$.post( "assets/php/contactUs.php", $( "#contact" ).serialize(),     function(msg){
    alert(msg);
} );
});
});
</script>

这是成功发送消息的结果。

Error

请大家帮帮我！谢谢！

REDIRECT OPTION

$firstpageurl = 'http://example.com';
echo "Your message has been successfully sent!";
$header('Location: '.$firstpageurl);

Answer 1

使用如下的Ajax。通过删除type属性，将提交类型按钮更改为普通按钮。

<script        src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"     type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('.btn-lg').click(function(event){
$.post( "config.php", $( "#contact" ).serialize(),     function(msg){
    alert(msg);
} );
event.preventDefault();
});
});
</script>

Answer 2

表单标记的操作部分是＆＃34; assets / php / contactUs.php＆＃34;

<form action="assets/php/contactUs.php" id="contact" class="form" role="form" method="post">

这意味着发布此表单会将您带到该页面。您可以对该页面进行编码以发送电子邮件并将其重定向为这样......

header('Location: '.$firstpageurl);

或将php代码放入第一页并删除整个action属性。如果你把php放在这个页面上，你需要将你的代码包装在if中，以便人们可以在发布表单之前加载页面。

    if (isset($_POST['email'])){
      echo "Sent email";
      [email send code here]
    }

至于发出消息说它已发送...只能使用第二种方法。要在没有完整页面加载的情况下执行此操作，请使用ajax。

Answer 3

你想使用JQuery。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#contact").submit(function(){
    var form_data=$("form").serialize();
    $.post( "assets/php/contactUs.php",form_data, function( data ) {
        alert(data);
    });
    event.preventDefault();
});
</script>

Answer 4

您可以在不使用Javascript的情况下执行此操作。执行以下操作：

将表单设置为发布到自身（例如，如果您的表单位于index.php上，请设置action="index.php"
加载页面时，请检查$_POST以查看是否已发送表单值。
如果$_POST值为空，请显示表单
如果设置了$_POST值，请执行您需要对这些值执行的操作，然后将结果输出到页面中。

这是一个非常简单的例子，展示了我的意思。

<?php
  $submitted = false;

  if (isset($_POST["myinput"]) && $_POST["myinput"] != '') {
    $submitted = true;
  }
?>
<?php
  if ($submitted == false) {
?>
  <form action="index.php" method="post">
    <input name="myinput"><input type="submit">
  </form>
<?php } else { ?>
  <h1>Form Submitted</h1>
<?php } ?>

使用html webform发送php邮件

4 个答案: