Question

我正在尝试获取一个消息框，以根据表单是否成功提交来显示消息。我不确定为什么，但是当我点击表单上的提交按钮时，我被重定向到一个空白的白页。

这是我的代码：

HTML

java.lang.NullPointerException
  at org.eclipse.jdt.internal.compiler.lookup.Scope.getMethod(Scope.java:2804)
  at org.eclipse.jdt.internal.compiler.ast.ReferenceExpression.isPotentiallyCompatibleWith(ReferenceExpression.java:1012)
  at org.eclipse.jdt.internal.compiler.lookup.ConstraintExpressionFormula.reduce(ConstraintExpressionFormula.java:62)
  at org.eclipse.jdt.internal.compiler.lookup.BoundSet.reduceOneConstraint(BoundSet.java:844)
  at org.eclipse.jdt.internal.compiler.lookup.InferenceContext18.reduce(InferenceContext18.java:861)
  at org.eclipse.jdt.internal.compiler.lookup.InferenceContext18.solve(InferenceContext18.java:812)
  at org.eclipse.jdt.internal.compiler.lookup.ParameterizedGenericMethodBinding.computeCompatibleMethod18(ParameterizedGenericMethodBinding.java:234)
  at org.eclipse.jdt.internal.compiler.lookup.ParameterizedGenericMethodBinding.computeCompatibleMethod(ParameterizedGenericMethodBinding.java:82)
  at org.eclipse.jdt.internal.compiler.lookup.Scope.computeCompatibleMethod(Scope.java:743)
  at org.eclipse.jdt.internal.compiler.lookup.Scope.computeCompatibleMethod(Scope.java:700)
  at org.eclipse.jdt.internal.compiler.lookup.Scope.findMethod0(Scope.java:1645)
  at org.eclipse.jdt.internal.compiler.lookup.Scope.findMethod(Scope.java:1546)
  at org.eclipse.jdt.internal.compiler.ast.MessageSend.resolveType(MessageSend.java:680)
  at org.eclipse.jdt.internal.compiler.ast.MessageSend.resolveType(MessageSend.java:619)
  at org.eclipse.jdt.internal.compiler.ast.MessageSend.resolveType(MessageSend.java:667)
  at org.eclipse.jdt.internal.compiler.ast.Expression.resolve(Expression.java:1020)
  at org.eclipse.jdt.internal.compiler.ast.AbstractMethodDeclaration.resolveStatements(AbstractMethodDeclaration.java:641)
  at org.eclipse.jdt.internal.compiler.ast.MethodDeclaration.resolveStatements(MethodDeclaration.java:309)
  at org.eclipse.jdt.internal.compiler.ast.AbstractMethodDeclaration.resolve(AbstractMethodDeclaration.java:551)
  at org.eclipse.jdt.internal.compiler.ast.TypeDeclaration.resolve(TypeDeclaration.java:1188)
  at org.eclipse.jdt.internal.compiler.ast.TypeDeclaration.resolve(TypeDeclaration.java:1301)
  at org.eclipse.jdt.internal.compiler.ast.CompilationUnitDeclaration.resolve(CompilationUnitDeclaration.java:590)
  at org.eclipse.jdt.internal.compiler.Compiler.process(Compiler.java:861)
  at org.eclipse.jdt.internal.compiler.ProcessTaskManager.run(ProcessTaskManager.java:141)
  at java.lang.Thread.run(Thread.java:745)

PHP

<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>

这是现在的实时网站 Portfolio Site- Work In Progress

Answer 1

出于测试目的，您可以在PHP代码中添加else操作：

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＆＃34; confirmMessage＆＃34;

显示/隐藏div

Answer 2

当您单击提交按钮时，您将被重定向到PHP文件，表单中的HTML文件将被“遗忘”。因此，如果发送邮件，浏览器将获取您的java脚本，但没有其他内容。（浏览器会将您重定向到form标签中指定的文件，提交浏览器后只有PHP文件中的代码，该文件只发送java脚本，但不显示HTML / Text）

Answer 3

你的前端和后端非常紧密耦合。这将使您的生活更容易解开您的设置。

只需抓取表单数据并使用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/

PHP表单成功发送时触发Javascript操作

3 个答案: