提交后用成功消息替换HTML表单，表单使用单独的php文件发送邮件 [英] Replacing HTML form with success message after submit, form sends mail using separate php file

问题描述

我有一个建立在index.html中的html联系表单，然后我有一个mail.php文件发送邮件并使用一些Javascript。当我填写表格并提交时，我已经编码发送邮件，然后弹出一个成功消息框，然后重定向到index.html。

I have an html contact form which is built into index.html, and then I have a mail.php file that sends a mail and also uses some Javascript. When I fill in form and submit, I have coded it to send the mail and then it pops up with a success message box and then redirects back to index.html.

我希望将表单替换为成功消息，以避免页面刷新，并避免弹出消息框。

What I would like is for the form to be replaced with the success message, to avoid a page refresh and also to avoid the popup message box.

form from index.html ：

form from index.html:

<form  action="mail.php" method="POST">
    <div class="row uniform">
    <div class="6u 12u$(xsmall)">
        <input type="text" name="name" id="name" value="" placeholder="Name" />
    </div>
    <div class="6u$ 12u$(xsmall)">
        <input type="email" name="email" id="email" value="" placeholder="Email" />
    </div>
    <div class="12u$">
        <!--<div class="select-wrapper">

        </div>-->
    </div>
    <div class="12u$">
        <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
    </div>
        <center><div class="g-recaptcha" data-sitekey=""></div></center>
    <div class="12u$">
        <ul class="actions">
        <li><input type="submit" value="Send Message" class="special" /></li>
        <li><input type="reset" value="Reset" /></li>
        </ul>
    </div>
    </div>
</form>

php文件，电子邮件地址和取消标记因显而易见的原因被移除：

php file, email address and recaptcha token removed for obvious reasons:

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent = "From: $name \n email: $email \n Message: $message";
$recipient = 'email address here';
$subject = 'Message from Website';
$mailheader = "From: $email \r\n";
$captcha;
{
  if(isset($_POST['g-recaptcha-response']))
    {
      $captcha=$_POST['g-recaptcha-response'];
    }
  if(!$captcha)
    {
      echo '<script language="javascript">';
      echo 'alert("Please check the Captcha")';
      echo '</script>';
      exit;  
    }
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
  if($response.success==false)
  {
    echo '<h2>Please do not try and spam here.</h2>';
  }else
  {
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo '<script language="javascript">';
echo 'alert("Your Message successfully sent, we will get back to you ASAP.");';
echo 'window.location.href="index.html";';
echo '</script>';
  }
} ?>

这是我实际看过的一个主题：

This is a topic that I have actually looked at:

提交成功讯息后清除表格 p>

Clear form after submit and success message

推荐答案

完成所有工作的最佳方法是使用ajax。在您的html中包含jquery。

Best way to do all your stuff is to use ajax. Include jquery in your html.

将表单放入包装div中

Put your form inside a wrapper div

<div class="something">
<!-- your form here -->
</div>

通过ajax提交表单，而不是使用基本表单提交

Submit your form through ajax, instead of using basic form submission

//"idform" is the id of the form
$("#idForm").submit(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           // serialize your form's elements.
           data: $("#idForm").serialize(), 
           success: function(data)
           {
               // "something" is the class of your form wrapper
               $('.something').html(data);
           }
         });
    // avoid to execute the actual submit of the form.
    return false;
});

您需要更改的最后一件事是在您的php代码中

And last thing you need to change is in your php code

只保留一个回音成功

keep only one echo for success

echo "Your Message successfully sent, we will get back to you ASAP.";

这篇关于提交后用成功消息替换HTML表单，表单使用单独的php文件发送邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！