当PHP表单成功发送时触发Javascript动作

我试图根据表单是否成功提交来获取消息框以显示消息。我不知道为什么，但当我点击窗体上的提交按钮时，我被重定向到一个空白页面。当PHP表单成功发送时触发Javascript动作

这里是我的代码：

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 = '[email protected]'; 
    $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

来源

2016-03-29 Kyle Bing

查看白色页面的源代码。你在那看到什么？ –

@JayBlanchard我认为这只是把我引向一个空白的HTML页面，但令人惊讶的是，它假设执行的JavaScript包含在脚本标记 –

这个空白页的头部。控制台是否报告了任何错误？ –

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/

来源

2016-03-29 21:28:38

用于测试目的，你可以在你的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

来源

2016-03-29 19:49:05

当您点击提交按钮时，您将被重定向到PHP文件，表单中的HTML文件将被“忘记”。因此，如果发送邮件，浏览器将获得您的java脚本，但没有别的。（浏览器将您重定向到表单标签中指定的文件，提交后浏览器仅包含PHP文件中的代码，该文件仅发送java脚本，但不显示HTML /文本）

来源

2016-03-29 19:50:37 suncrasher

感谢您的回答对我来说合乎逻辑，但我如何获得表单提交，同时留在我的index.html页面上并执行我想执行的JavaScript操作？ –

@KyleBing你可以通过ajax来做到这一点，看看格雷厄姆T的答案。 – suncrasher

当PHP表单成功发送时触发Javascript动作

回答

相关问题