當PHP表單成功發送時觸發Javascript動作

Question

我試圖根據表單是否成功提交來獲取消息框以顯示消息。我不知道爲什麼，但當我點擊窗體上的提交按鈕時，我被重定向到一個空白頁面。

這裏是我的代碼：

HTML

<form method="post" action="contact.php"> <!-- removed the PHP file name to post to itself --> 
    <input type="text" name="name" placeholder="Name"><br> 
    <input type="email" name="email" placeholder="Email"><br> 
    <textarea rows="8" cols="65" name="message"placeholder="Message"></textarea><br> 
    <input id="submit" type="submit" name="submit" value="Let's Get In Touch"> 
</form> 

<div id="confirmationBox"> 
    <p id="confirmationMessage">Your message has been sent!</p> 
    <button>OK</button> 
</div> 

PHP

<?php 

    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $message = $_POST['message']; 
    $from = 'From: Portfolio Website'; 
    $to = 'kyle.a.binger@gmail.com'; 
    $subject = 'Message From Personal Site'; 

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

    if ($_POST['submit']) { 
     if (mail ($to, $subject, $body, $from)) { 

      /*echo '<script type="text/javascript"> 
      $("#submit").val("Message Submitted!"); 
      </script>';*/ 

      echo '<script type="text/javascript">'; 
      echo 'var a = document.getElementById("confirmationMessage");'; 
      echo 'a.innerHTML = "Message Sent!"'; 
      echo '</script>'; 

     } else { 
      echo '<p>Something went wrong, go back and try again!</p>'; 
     } 
    } 
?> 

這裏是現場直播按照現在 Portfolio Site- Work In Progress

Answer 1

Your front and後端實際上是緊密結合的。這會讓你的生活更容易解耦你的設置。

• 根據天氣電子郵件成功與否只要抓住表單數據和使用AJAX
• 返回響應代碼張貼到背部和一些JSON
• 在中，.done回調顯示成功消息，或者進一步擴展以顯示使用.fail回調的錯誤消息

它進入空白頁的原因是因爲您的表單POST正在觸發並重定向到contact.php。爲了防止這種情況，您需要在表單的提交事件中調用.preventDefault（）。

$("form").on("submit", function(event) { 
    event.preventDefault(); 

    $.ajax({ 
     method: "POST", 
     url: "contact.php", 
     data: $(this).serialize() 
    }) 
    .done(function(data) { 
     // Show your success message here 
    }) 
    .fail(function(error) { 
    // Show your error message here 
    }) 
}) 

http://php.net/manual/en/function.http-response-code.php

http://php.net/manual/en/function.json-encode.php

http://api.jquery.com/jquery.ajax/

Answer 2

---

用於測試目的，你可以在你的PHP代碼中添加其他動作：

if ($_POST['submit']) { 
    if (mail ($to, $subject, $body, $from)) { 

     /*echo '<script type="text/javascript"> 
     $("#submit").val("Message Submitted!"); 
     </script>';*/ 

     echo '<script type="text/javascript">'; 
     echo 'var a = document.getElementById("confirmationMessage");'; 
     echo 'a.innerHTML = "Message Sent!"'; 
     echo '</script>'; 

    } else { 
     echo '<p>Something went wrong, go back and try again!</p>'; 
    } 
} else { 
    echo "the request was : " . $_POST['submit']; 
} 

但我認爲這將是更好地使用AJAX請求，讓你留在原來的頁面，並顯示/對隱藏ID爲「confirmationMessage」的div

Answer 3

當您點擊提交按鈕時，您將被重定向到PHP文件，表單中的HTML文件將被「忘記」。因此，如果發送郵件，瀏覽器將獲得您的java腳本，但沒有別的。 （瀏覽器將您重定向到表單標籤中指定的文件，提交後瀏覽器僅包含PHP文件中的代碼，該文件僅發送java腳本，但不顯示HTML /文本）