javascript - 表单提交,就是不停刷新

标签 javascript php jquery

所以我对这些东西很陌生,我有一个我无法解决的特定问题。我到处搜索,我尝试了很多解决方案都无济于事。我确定我遗漏了什么或顺序有误,但我只需要一些指导。

我的网站上有一个简单的表单,我无法阻止它在提交时刷新页面。还进行了一些 php 验证。

这是网站的链接:www.nathanchapmanphotography.co.uk

如有任何帮助,我们将不胜感激。

$("form").submit(function() {

  var error = "";
  var success = "";
  var fail = "";

  if ($("#name").val() == "") {
    error += "name required<br>";
  }

  if ($("#email").val() == "") {
    error += "email required<br>";
  }

  if ($("#message").val() == "") {
    error += "message required<br>";
  }
  
  if (error != "") {
    $("#error").html(error);
    $("#success").html(success);
    $("#fail").html(fail);
    return false;
  } 
  else {
    sendContactForm();
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <p class="form-p">name:
    <input class="input" type="text" id="name" name="name">
  </p>
  <p class="form-p">email:
    <input class="input" type="email" id="email" name="email">
  </p>
  <p class="form-p">message:
    <br/>
    <textarea id="message" cols="40" rows="7" name="message"></textarea>
  </p>
  <button type="submit" id="submit">submit</button>
  <div id="error">
    <? echo $error; ?>
  </div>
  <div id="success">
    <? echo $success; ?>
  </div>
  <div id="fail">
    <? echo $fail; ?>
  </div>
</form>

最佳答案

您需要阻止提交事件的默认操作:

$("form").submit(function(event) { // capture the function's event here
    event.preventDefault(); // use the captured event here
    // rest of your code...

编辑:更改后来自 OP 的网站 -

enter image description here

关于javascript - 表单提交,就是不停刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41873987/

相关文章:

javascript - Chrome PDF Viewer 嵌入式下载按钮不起作用

javascript - 将 svg 转换为 react 原生 svg

php - 无法使用准备好的语句保存到数据库中

javascript - 在 HTML 中显示 Ajax 响应

javascript - 带有静止字符 e 输入的文本框数字和带有 javascript 的负整数

javascript - 如何根据给定的字母数量创建特定数量的 div?

javascript - 隐藏行更改为在下拉选择时在 JavaScript 上显示

java - 在 Java 中缩小和混淆 JavaScript 代码

php - 如何在 Laravel 架构构建器中制作 [anyType] 数组?

jquery - 选择2 : Preselected item and correct rendering through templateSelection