单击提交时，Bootstrap 和 PHP 联系表单显示空白页[重复]答案

【问题标题】：Bootstrap and PHP contact form display blank page when clicking submit [duplicate]单击提交时，Bootstrap 和 PHP 联系表单显示空白页[重复]
【发布时间】：2017-03-15 23:57:54
【问题描述】：

大家好，我需要帮助。

当我尝试测试我的引导表单时，它会显示一个白屏。这是我的代码。NB 我是网络开发的新手，#ExcuseMyFrenchThough

这是我的 index.html

<html>
<div class="container">
<div class="row">
      <div class="col-md-6 col-md-offset-3" id="offer">

            <h2 id="form"> LET'S WORK ? </h2>

            </div>

            <div class="col-md-6 col-md-offset-3">

            <form role="form" method="post" action="contact.php">


            <div class="form-group">
              <input type="text" class="form-control" placeholder="Enter Your Name">
                <?php echo "<p class='text-danger'>$errName</p>";?>
              </div>

              <div class="form-group">

               <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Your Email">
               <?php echo "<p class='text-danger'>$errEmail</p>";?>
              </div>

              <div class="form-group">
              <textarea class="form-control" id="textarea1" rows="3" placeholder="Enter Your Message here"> </textarea>
              <?php echo "<p class='text-danger'>$errMessage</p>";?>

              </div>

              <div class="form-group">
              <button type="submit" class="default-submit btn btn-large propClone bg-fast-pink btn-circle font-weight-300 text-white tz-text">SEND MESSAGE</button>
              </div>

              <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                      <?php echo $result; ?>  
                   </div>
  </div>
            </form>
            </div>

</div>
</div>

PHP 代码 [CONTACT.PHP]

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        /*$human = intval($_POST['human']); */
        $from = 'Geofrey Zellah'; 
        $to = 'hotbonge@gmail.com'; 
        $subject = 'Message from Geofrey Zellah ';

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

        // Check if name has been entered
        if (!$_POST['name']) {
            $errName = 'Please enter your name';
        }

        // Check if email has been entered and is valid
        if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
            $errEmail = 'Please enter a valid email address';
        }

        //Check if message has been entered
        if (!$_POST['message']) {
            $errMessage = 'Please enter your message';
        }

        /*
        //Check if simple anti-bot test is correct
        if ($human !== 5) {
            $errHuman = 'Your anti-spam is incorrect';
        } */

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage /*&& !$errHuman*/) {
    if (mail ($to, $subject, $body, $from)) {
        $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
    } else {
        $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
    }
}
    }
?>

我在页面上单击提交后得到的屏幕截图，NB live not local

有人吗？

【问题讨论】：

php.net/manual/en/function.error-reporting.php 并且由于没有名称属性，您会看到许多未定义的索引通知。
@fred -li 我没有收到任何错误点击提交后我只是得到白屏，所以我不知道我的代码有什么问题谢谢
@Fred-ii- ：我认为，这个问题不是你上面提到的问题的重复。（您标记的与此无关）

标签： php html twitter-bootstrap bootstrap-modal

【解决方案1】：

永远不会在表单中设置提交变量。请注意，按钮现在是 submit 类型的输入，其 name 属性为 submit。
您的其他表单变量也未设置。
你从来没有回应任何东西。所以我在你的最后一个条件中添加了一个回声。
如果您希望在提交表单后显示该表单，您需要将您的 index.html 重命名为 index.php 并在顶部包含 contact.php。见下文。
如果您只是简单地检查 $_POST 变量是否为真，PHP 将抛出 E_NOTICE 错误。所以最好将变量包装到 isset() （就像这个变量集一样）函数。见下文。

我进行了重构以防止出现 E_NOTICE 错误并注释了更改。

contact.php

<?php
if (isset($_POST["submit"])) {

    $error = [];

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    /*$human = intval($_POST['human']); */
    $from = 'Geofrey Zellah';
    $to = 'hotbonge@gmail.com';
    $subject = 'Message from Geofrey Zellah ';

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

    // Check if name has been entered
    if (!isset($_POST['name']) || strlen($_POST['name']) === 0) {
        $error['name'] = 'Please enter your name';
    }

    // Check if email has been entered and is valid
    if (!isset($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $error['email'] = 'Please enter a valid email address';
    }

    //Check if message has been entered
    if (!isset($_POST['message']) || strlen($_POST['name']) === 0) {
        $error['message'] = 'Please enter your message';
    }

    /*
    //Check if simple anti-bot test is correct
    if ($human !== 5) {
        $errHuman = 'Your anti-spam is incorrect';
    } */

// If there are no errors, send the email
    if (empty($error)) {
        if (mail ($to, $subject, $body, $from)) {
            $result='<div class="alert alert-success">Thank You! I will be in touch</div>';
        } else {
            $result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
        }
    }

}
?>

index.php

<?php include 'contact.php';?>
<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" id="offer">

            <h2 id="form"> LET'S WORK ? </h2>

        </div>

        <div class="col-md-6 col-md-offset-3">

            <form role="form" method="post">

                <div class="form-group">
                    <input name="name" type="text" class="form-control" placeholder="Enter Your Name">
                    <?php if(isset($error['name'])) echo '<p class="text-danger">'.$error['name'].'</p>'; ?>
                </div>

                <div class="form-group">

                    <input name="email" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Your Email">
                    <?php if(isset($error['email'])) echo '<p class="text-danger">'.$error['email'].'</p>'; ?>
                </div>

                <div class="form-group">
                    <textarea name="message" class="form-control" id="textarea1" rows="3" placeholder="Enter Your Message here"> </textarea>
                    <?php if(isset($error['message'])) echo '<p class="text-danger">'.$error['message'].'</p>'; ?>

                </div>

                <div class="form-group">
                    <input name="submit" type="submit" class="default-submit btn btn-large propClone bg-fast-pink btn-circle font-weight-300 text-white tz-text">SEND MESSAGE</input>
                </div>

                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <?php if(isset($result)) echo $result; ?>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

更新

如果您不希望在提交表单时重新加载页面，您将需要一些 jQuery ajax 操作并更改您的 HTML 和 PHP 文件。

首先删除我们之前添加的 index.php 的第一行：

 <?php include 'contact.php';?><!-- Remove this one -->

您不希望包含该文件，而是向其发送数据。

接下来编辑 HTML 文件并在 HTML 下包含 jQuery 库（在 HTML 下做 JS 的常见做法）。然后相应地更改您的 PHP 文件。

所以你的新 HTML：

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" id="offer">

            <h2 id="form"> LET'S WORK ? </h2>

        </div>

        <div class="col-md-6 col-md-offset-3">

            <form role="form" name="contact" method="post">

                <div class="form-group">
                    <input name="name" type="text" class="form-control" placeholder="Enter Your Name" value="test">
                </div>

                <div class="form-group">

                    <input name="email" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Your Email" value="giroteam@localhost.com">
                </div>

                <div class="form-group">
                    <textarea name="message" class="form-control" id="textarea1" rows="3" placeholder="Enter Your Message here">test </textarea>
                </div>

                <div class="form-group">
                    <input name="submit" type="submit" class="default-submit btn btn-large propClone bg-fast-pink btn-circle font-weight-300 text-white tz-text" value="SEND MESSAGE">
                </div>

                <div class="form-group" id="result">
                </div>
            </form>
        </div>

    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){ // launch when DOM is fully loaded

        $('form[name="contact"]').submit(function(event){ // fire when you hit submit

            event.preventDefault(); // prevent default form submission since you want to send data via ajax

            $('#result').html('');
            $('.alert').remove();

            var values = $(this).serialize();

            // Post form data to your contact.php script and work with response
            $.ajax({
                url: "contact.php",
                type: "POST",
                data: values ,
                success: function (response) {

                    if(response.success) {
                        $('#result').html('<div class="alert alert-success">'+response.success+'</div>');
                    }
                    if(response.error_form) {
                        $.each( response.error_form, function( key, value ) {
                            $('input[name="'+key+'"]').parent().append('<p class="help-block text-danger">'+value+'</p>');
                        });
                    }
                    if(response.error_mail) {
                        $('#result').html('<div class="alert alert-danger">'+response.error_mail+'</div>');
                    }

                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }


            });

        });
    });
</script>

最后是更改后的 PHP：

<?php

ini_set('display_errors',0);
$result = [];

// Check if name has been entered
if (!isset($_POST['name']) || strlen($_POST['name']) === 0) {
    $result['error_form']['name'] = 'Please enter your name';
}

// Check if email has been entered and is valid
if (!isset($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
    $result['error_form']['email'] = 'Please enter a valid email address';
}

//Check if message has been entered
if (!isset($_POST['message']) || strlen($_POST['message']) === 0) {
    $result['error_form']['message'] = 'Please enter your message';
}

/*
//Check if simple anti-bot test is correct
if ($human !== 5) {
    $errHuman = 'Your anti-spam is incorrect';
} */

// If there are no errors, send the email
if (empty($result['error_form'])) {


    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    /*$human = intval($_POST['human']); */
    $from = 'Geofrey Zellah';
    $to = 'hotbonge@gmail.com';
    $subject = 'Message from Geofrey Zellah ';

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

    if (mail ($to, $subject, $body, $from)) {
        $result['success']='Thank You! I will be in touch';
    } else {
        $result['error_mail']='Sorry there was an error sending your message. Please try again later';
    }
}

header('Content-type: application/json'); // tell browser what to expect
echo json_encode($result); // encode array to json object so javascript can work with it

我做了一个如此详尽的例子，因为许多人在成功发送常规表单后决定使用 ajax，但注意到页面会重新加载；）

【讨论】：

你是什么意思？你能解释一下你的答案吗？
请查看更新后的答案
非常感谢你，兄弟，你的回答和imeesha确实解决了这个问题，
现在可以按照我的要求完美运行，再次感谢 Yolo。你的传奇
提交表单时，页面会重新加载...我不希望这样...有没有办法让它不重新加载并仍然发送邮件？

【解决方案2】：

我得到你想要达到的目标。您想提交此表单，如果有问题，您想显示一些错误消息。

在您的案例中发生的情况是，当您提交表单时，它会提交给contact.php。您的浏览器将显示您从 contact.php 文件返回的内容。由于您的 contact.php 不包含任何 HTML 内容并且您也不编写任何内容，因此返回的页面不包含任何内容。

你有两个选择。

第一种方式：

echocontact.php 文件中的错误消息。将以下内容添加到contact.php 文件的末尾。

echo $result;

这样，当有人提交您的表单时。您会将他引导到一个新页面，该页面只有一行说明是否有错误或成功。

第二种方式

将该逻辑移至您的index.html。您必须将其重命名为 index.php。然后设置表单提交到同一页面。

<form .... action="">

这会将表单提交到当前页面，即index.php。然后，将您的逻辑放在contact.php 的index.php 顶部。

【讨论】：

Imeesha 谢谢，我尝试了将 index.html 更改为 index.php 的第二种方法，不幸的是，我的页面显示白屏只是空白页面，有错误或没有，但是当我放 index.HTML 时显示我的页面，我还能做些什么来解决这个问题
Imeesha 谢谢你，你的第二种方法现在有效，我需要将 index.html 更改为 index.php 也将所有内容放在一个页面中，无需联系，php，现在我的联系表可以发送电子邮件如我所愿，但不幸的是它没有显示“成功消息”再次感谢