联系表格发送，刷新页面和表格，但提交后不发送任何内容答案

【问题标题】：Contact form sends, refreshes page and form, BUT then doesn't send anything after Submit联系表格发送，刷新页面和表格，但提交后不发送任何内容
【发布时间】：2015-09-15 12:04:14
【问题描述】：

我对编码很陌生，所以请随意把我当作白痴对待。我已经成功地用 bootstrap 3 创建了一个模态联系表单。事情在第一轮工作得很好，它会弹出然后将信息发送到我的电子邮件。然后我有一个刷新功能，所以在提交后它会返回到同一页面，当再次按下链接时，模式会弹出，清除之前输入的任何信息。这又是有效的。但是，当您这次提交时，我的电子邮件中什么也没有。

现在我有一个理论，即第一次提交后变量正在清除，因此第二次 php 代码将无法工作。但这只是一个理论，我一点也不擅长 php。

所以下面是模态联系表单脚本和我正在使用的 php。

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);
        $from = 'Ambedo'; 
        $to = 'charlieboman@live.com.au'; 
        $subject = 'Message from Ambedo ';

        $body ="From: $name\n E-Mail: $email\n Message:\n $message";

        if (!$errName && !$errEmail && !$errMessage) {
            (mail ($to, $subject, $body, $from));
        }
    }
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Ambedo/Contact</title>

    <link href="../bootstrap-3.3-2.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="Ambedo_Contact.css" rel="stylesheet" type="text/css">

    <script src="https://use.typekit.net/uvm0tgt.js"></script>

</head>
<body>


<div class="messages">
    <div class="container">
        <div class="row">
            <div class="message-content">
                <a href="#contact" data-toggle="modal"><img class="e-mail" src="Untitled-1.jpg"></a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="contact" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" role
            "form" method="post" action="Ambedo_Contact.php" onsubmit="setTimeout(function () { window.location.reload(); }, 10)">
            <div class="modal-header">
                <h1>Please Get In Touch!</h1>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="contact-name" class="col-sm-2 control-label">Name</label>

                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="contact-name" name="name" placeholder="First & Last Name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="contact-email" class="col-sm-2 control-label">Email</label>

                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="contact-email" name="email" placeholder="example@domain.com">
                    </div>
                </div>
                <div class="form-group">
                    <label for="contact-message" class="col-sm-2 control-label">Message</label>

                    <div class="col-sm-10">
                        <textarea class="form-control" rows="4" name="message"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-default" data-dismiss="modal">Close</a>
                <button id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">Send</button>
            </div>
            </form>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../bootstrap-3.3-2.5-dist/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

!$errName && !$errEmail && !$errMessage 来自哪里？
你可以使用 if(!$name & .......
而不是 onsubmit 在您的操作文件中使用 header("Location:formfile.php")...
!$errName 等是一些早期代码遗留下来的，我已经删除它现在我注意到它仍然存在。
@Akki 尝试了你的建议，我输入了 action="location:formfile.php"。在我按下提交后，我得到的只是 safari 无法识别以位置开头的网址。可能完全误解了您的指示。

标签： javascript php forms twitter-bootstrap contact-form

【解决方案1】：

如果您将表单提交到同一页面，并且如果您想在提交表单后清除该表单，则从您的表单中删除以下行并将数据提交到同一页面。

onsubmit="setTimeout(function () { window.location.reload(); }, 10)"

如果您将表单提交到任何其他 php 页面，并且如果您想在提交表单后清除表单，请在“mail()”函数后添加以下行

header('Location: <http://www.yoursite.com>');

如果您将表单提交到任何 php 页面，并且您不想在提交表单后清除表单，请使用 ajax。

$(document).rady(function(){
$("form").submit(function(){
    $.ajax({
        url: "your_php_file.php",
        data:$('form').serialize(),
        dataType:'html',
        success: function(result){
             alert(result);
        }
    });
});});

可以在php文件中获取表单数据并进行处理。您在 php 文件中“回显”的内容将显示在屏幕上的警告框中。

【讨论】：

【解决方案2】：

如果不了解更多细节，就很难确切知道发生了什么。

但是，您应该在 PHP 代码中进行一些基本的错误检查，例如检查变量是否实际设置以及 mail() 函数是否实际返回 true（如果您阅读 PHP mail() docs，它会告诉你mail() 将返回一个布尔值（true/false）。你还会注意到第 4 个参数是一个 header）。

我将向您展示一个可以如何做到的示例（有很多方法），主要关注您应该检查错误。

<?php
if (isset($_POST["submit"])) {
    if (isset($_POST['name'], $_POST['email'], $_POST['message'], $_POST['human'])) {
        // Checks if the variables can be set, so that we don't get undefined index errors
        // You could also do other forms of error-checking here
        // Such as validating the email-address, names and such
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $human = intval($_POST['human']);

        $errorOccured = false; // No errors
    } else {
        $errorOccured = true; // Some of the variables can't be set - this is an error
    }

    $to = 'charlieboman@live.com.au'; // The address we're sending the form to
    $subject = 'Message from Ambedo '; // Subject of the message

    // Headers in the email goes here...
    $headers  = "Content-type: text/html; charset=UTF-8<br />";
    $headers .= "From: Ambedo <contactform@yourwebsite.com> <br />";
    $headers .= "To: Ambedo <$to> \r\n";
    $headers .= "Reply-To: ".$name."  <".$email.">" . "\r\n";

    // Body of the email: the contents that will be shown
    $body = "From: $name\n";
    $body .= "E-Mail: $email\n";
    $body .= "Message:\n $message";

    if (!$errorOccured) { // If we had no error, we can proceed
        if (mail ($to, $subject, $body, $from)) { // If mail is sent, all is good!
            // Message was sent (mail returned true)!
        } else {
            // An error occurred sending the email, could be for various reasons...
            // Display error message here
        }
    } else { // $errorOccured == true, so something bad happened...
        // Not all variables were set, so email couldn't be sent
        // Deal with it here, display error message and show the form again
    }
}
?>

【讨论】：

【解决方案3】：

您的完整代码将类似于：

        $body ="From: $name\n E-Mail: $email\n Message:\n $message";

        if ($name!='' && $email!='' && $message!='' ) {
            if(mail ($to, $subject, $body, $from)){
               header('Location:Ambedo_Contact.php');
            }
         }
    } 
?>

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Ambedo/Contact</title>

<link href="../bootstrap-3.3-2.5-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="Ambedo_Contact.css" rel="stylesheet" type="text/css">

<script src="https://use.typekit.net/uvm0tgt.js"></script>

</head>
<body>


<div class="messages">
<div class="container">
    <div class="row">
        <div class="message-content">
            <a href="#contact" data-toggle="modal"><img class="e-mail" src="Untitled-1.jpg"></a>
        </div>
    </div>
</div>
</div>

<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <form class="form-horizontal" role
        "form" method="post" >
        <div class="modal-header">
            <h1>Please Get In Touch!</h1>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label for="contact-name" class="col-sm-2 control-label">Name</label>

                <div class="col-sm-10">
                    <input type="text" class="form-control" id="contact-name" name="name" placeholder="First & Last Name">
                </div>
            </div>
            <div class="form-group">
                <label for="contact-email" class="col-sm-2 control-label">Email</label>

                <div class="col-sm-10">
                    <input type="email" class="form-control" id="contact-email" name="email" placeholder="example@domain.com">
                </div>
            </div>
            <div class="form-group">
                <label for="contact-message" class="col-sm-2 control-label">Message</label>

                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a class="btn btn-default" data-dismiss="modal">Close</a>
            <button id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">Send</button>
        </div>
        </form>
    </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../bootstrap-3.3-2.5-dist/js/bootstrap.min.js"></script>

</body>
</html>

请注意，我已删除 onsubmit 事件并在发送详细信息后将当前页面重定向到同一页面。

【讨论】：