在表单提交时显示成功消息答案

【问题标题】：Display success message upon form submit在表单提交时显示成功消息
【发布时间】：2016-10-11 04:40:07
【问题描述】：

我想在同一页面上显示成功消息，而不是将用户重定向到 .php 文件。

我不希望使用 AJAX 和 jQuery 过于复杂，并且我希望将 PHP 文件与表单的 HTML 文件分开。

是否可以为此使用少量的 Javascript？

这是我的代码；

HTML 表单

<div id="viewing-container">
    <div id="viewing-header">
        <h3 class="form-header">Request a Viewing</h3><button type="button" id="close" class="button-primary close-form" onclick="openClose()">&#735;</button>
    </div>
    <div id="viewing-content">
        <div id="success">
            <p class="form">Thank you for contacting us. We will be in touch soon.</p>
        </div>
        <p class="form">Please text or call Alex on <a href="">0123456789</a> for fastest response or enter your contact details below and we will call you back as soon as we can.</p>
        <form action="" method="post" autocomplete="on">
            <label for="name">Name <i>&#42;</i></label><input type="text" name="name" autofocus required><br />
            <label for="number">Contact Number <i>&#42;</i></label><input type="tel" name="number" required><br />
            <label for="message">Message <i>&#42;</i></label><textarea type="textarea" name="message" rows="5" required>Please call me to arrange a viewing of one of your properties.</textarea><br />
            <div class="g-recaptcha" data-sitekey="###"></div>
                    <br />
            <button type="submit" name="contactSubmit" id="contactSubmit" class="button-primary">Send</button>
        </form>
    </div>

PHP提交代码

$name = $number = $message = "";

if(isset($_POST['contactSubmit'])){
    $name = $_POST["name"];
    $number = $_POST["number"];
    $message = $_POST["message"];


    $msg = "Name: " . $name . "\n" . "Number: " . $number "\n" . "Message:" . $message;
    $msg = wordwrap($msg,70);

    $subject = "Viewing Request";

    mail("me@mysite.co.uk", $subject, $msg)
    header("Location: /index.htm");
}

exit;

我曾尝试使用 onclick() Javascript 函数来显示成功，但表单会在显示 Javascript 函数之前重定向到 PHP 文件。我唯一能够开始工作的是一个 javascript 警报功能，但这不是很有吸引力或用户友好。我想显示成功消息并运行外部 php 文件而不重新加载 HTML 页面。

请帮忙！！我不是非常精通 PHP 或 Javascript :( 提前致谢。

【问题讨论】：

但是为什么呢？这可能是一个成功的重定向，但这并不意味着 php 函数会成功......
您通常会为此使用 AJAX 调用。您可以自己用 Javascript 编写一个，但如果 Jquery 和其他人已经为您完成了，为什么还要这样做呢？
如果没有 AJAX，您无法实现您想要的功能。
如果你想用你的网站做一些聪明的事情，那么你将不得不更熟练做到这一点的唯一方法是从浏览器调用 AJAX让 PHP 脚本运行，然后向您发送响应消息（好/坏）

标签： javascript php html forms submit

【解决方案1】：

<?php
$nameErr = $numberErr = $messageErr = "";
$name = $number = $message = "";
if(isset($_POST['contactSubmit'])){
$name = $_POST["name"];
$number = $_POST["number"];
$message = $_POST["message"];
$msg = "Name:" . $name . "\n" . "Number: " . $number. "\n" . "Message:" . $message;
    $msg = wordwrap($msg,70);
$subject = "Viewing Request";
mail("me@mysite.co.uk", $subject, $msg)?>
<script>alert("your message is sent successfully");
 window.location="index.html";
</script>
<?php  } ?>

提交表单后，您将收到alert 消息，您的message 已成功发送，如果您点击确定，您将redirect 发送至index.html。也请使用javascript window.location 因为header 会报已经发送的错误

【讨论】：

【解决方案2】：

您可以通过使用 AJAX 调用来完成此操作，而 jQuery 是您最好的朋友。

jQuery 将省去你写很多行代码，使用起来非常简单，只需将 cdn 托管链接添加到你的 HTML <head>:

form.html

<html>    
<head>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</head>

在 html 文件中的表单后添加此 JS 脚本。
（您也可以使用单独的文件“script.js”并将其添加到 jquery 链接后的头部，但我们将避免过于复杂它。）

<div id="viewing-container">
    <!-- your form -->
</div>

<script>
    $(document).ready(function() {

// hide the success message
$('#success').hide(); 

// process the form
$('form').submit(function(event) {

    // get the form data before sending via ajax
    var formData = {
        'name'               : $('input[name=name]').val(),
        'number'             : $('input[name=number]').val(),
        'message'            : $('input[name=message]').val(),
        'contactSubmit'      : 1 
    };

    // send the form to your PHP file (using ajax, no page reload!!)
    $.ajax({
        type: 'POST', 
        url:  'file.php', // <<<< -------  complete with your php filename (watch paths!)
        data:  formData,  // the form data
        dataType: 'json', // how data will be returned from php
        encode: true
    })
    // JS (jQuery) will do the ajax job and we "will wait that promise be DONE"
    // only after that, we´ll continue
    .done(function(data) {
        if(data.success === true) {
           // show the message!!!
           $('#success').show();
        }
        else{
            // ups, something went wrong ...
            alert('Ups!, this is embarrasing, try again please!');
            } 
        });
    // this is a trick, to avoid the form submit as normal behaviour
    event.preventDefault();
});
    }); 
</script>

最后，更改 php 文件的最后两行：

<?php 

// .... your code .... 

//mail("me@mysite.co.uk", $subject, $msg)
//header("Location: /index.htm");

if(mail("me@mysite.co.uk", $subject, $msg)) {
    $data['success'] = true;
}
else{
    $data['success'] = false;
}

// convert the $data to json and echo it
// so jQuery can grab it and understand what happend
echo json_encode($data);

?>

【讨论】：