单击“提交”时,Bootstrap和PHP联系表单显示空白页面

时间:2017-03-15 23:57:55

标签: php html twitter-bootstrap bootstrap-modal

Hii伙计我需要一些帮助。

当我尝试测试我的引导程序表单时,它会显示一个白色屏幕。这是我的代码.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 not local
enter image description here

任何人?

2 个答案:

答案 0 :(得分:1)

  1. 您的表单中永远不会设置提交变量。请注意,该按钮现在是提交类型的输入,其name属性为submit。

  2. 您的其他表单变量也未设置。

  3. 你永远不会回应任何事情。所以我在你的最后一个条件中回应。

  4. 如果您希望在提交表单后显示表单,则需要将index.html重命名为index.php并在顶部包含contact.php。见下文。

  5. 如果您只是清楚地检查$ _POST变量是否为true,PHP将抛出E_NOTICE错误。所以最好将变量包装到isset()(就像在这个变量集中一样)函数。见下文。

  6. 我重构了以防止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 &lt; - 请注意文件扩展名的更改

    <?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但注意页面重新加载;)

答案 1 :(得分:1)

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

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

您有两种选择。

第一种方式

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

echo $result;

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

第二种方式

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

<form .... action="">

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