联系表单发送,刷新页面和表单,但在提交后不发送任何内容

时间:2015-09-15 12:04:15

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

我对编码非常陌生,所以请随意像对待白痴一样对待我。我已经设法创建了一个带有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>

3 个答案:

答案 0 :(得分:0)

如果您将表单提交到同一页面,并且如果要在提交表单后清除表单,请从表单中删除以下行并将数据提交到同一页面。

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文件中“回显”的内容将显示在屏幕上的警告框中。

答案 1 :(得分:0)

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

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

我将向您展示 可以做什么的示例(有很多方法),主要关注您应该检查错误。

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

答案 2 :(得分:0)

您的完整代码如下:        

        $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事件并将当前页面重定向到同一页面。