2017-03-15 44 views
0

嗨,大家好,我需要一些幫助。點擊提交時Bootstrap和PHP聯繫表單顯示空白頁面

當我嘗試測試自舉窗體時,它會顯示一個白色屏幕。這裏是我的code.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 = '[email protected]'; 
     $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住的不是本地
enter image description here

有人嗎?

+0

http://php.net/manual/en/function.error-reporting.php,你會看到很多未定義的索引通知,由於沒有名稱屬性。 –

+0

@fred -li我沒有收到任何錯誤我只是點擊提交後纔得到白屏,所以我不知道我的代碼有什麼問題謝謝 –

+1

@ Fred-ii-:我想,這個問題不是重複的你上面提到的是什麼。 (你所標記的與此無關) –

回答

1
  1. 提交變量永遠不會在您的窗體中設置。注意,該按鈕現在是提交類型提交的名稱屬性爲submit的輸入。

  2. 另外你的其他表單變量沒有設置。

  3. 你永遠不會迴應任何事情。所以我在你的最後一個條件中迴應。

  4. 如果您希望表單在提交表單後顯示,您需要將index.html重命名爲index.php,並在頂部包含contact.php。見下文。

  5. 如果您明白地檢查$ _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 = '[email protected]'; 
    $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> 

UPDATE

如果你不想提交時重新加載頁面g表單,您將需要一些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="[email protected]"> 
       </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 = '[email protected]'; 
    $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 

我做了這樣一個複雜的例子,因爲許多人決定去阿賈克斯,一旦他們成功地發送定期形式,但注意,頁面重新加載;)

+0

你的意思是什麼?你能解釋你的答案嗎? –

+1

請查看更新後的答案 – Yolo

+0

非常感謝你,兄弟,確實你的答案和imeesha一起解決了這個問題, –

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的頂部。

+0

Imeesha謝謝,我試過第二種方式將index.html更改爲index.php,不幸的是,我的頁面顯示白色屏幕只是空白頁面有錯誤或沒有任何內容,但是當我把index.HTML顯示我的頁面,我能做些什麼來解決這個問題 –

+0

Imeesha謝謝,你的第二種方法現在可以工作,我需要改變index.html index.php也放在一個頁面沒有聯繫,PHP,現在我的聯繫表格可以發送電子郵件,因爲我想但不幸的是它不顯示「成功消息」再次感謝 –