JQuery - 防止表单提交不工作

Question

我创建了一个表格

如何防止使用jquery提交表单？

<form id="form">
  <div class="container form-group">
    <h1 class="mb-5">Get in touch!</h1>
    <div id="error"></div>
    <label for="email">Email Address:</label>
    <input type="email" name="email" class="form-control" id="email" />
    <small class="text-muted d-block mb-3">we never share your email</small>
    <label>Subject:</label>
    <input type="text" name="text" class="form-control mb-3" id="subject" />
    <label for="message">Message:</label>
    <textarea
      name="message"
      id="content"
      rows="3"
      class="form-control mb-3"
    ></textarea>
    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
  </div>
</form>

这是我的jquary代码。

$(document).ready(function () {
  $("#form").submit(function (e) {
    e.preventDefault();
  });
});

不幸的是，页面再次刷新

我也不知道问题出在哪里了

Answer 1

这里是工作演示。https:/jsfiddle.netusmanmunirqvp8menk2。 为你。

你的表单仍在提交的原因是你根本没有进行任何输入，也就是 "必填 "字段的填写。当不需要输入任何数据时，表单状态始终是 真正 和表格将提交通过 e.PreventDefault.

超文本标记语言

<form id="form" type="POST" action="">
  <div class="container form-group">
    <h1 class="mb-5">Get in touch!</h1>
    <div id="error"></div>
    <label for="email">Email Address:</label>
    <input type="email" name="email" class="form-control" id="email" required/>
    <small class="text-muted d-block mb-3">we never share your email</small>
    <label>Subject:</label>
    <input type="text" name="text" class="form-control mb-3" id="subject" required/>
    <label for="message">Message:</label>
    <textarea
      name="message"
      id="content"
      rows="3"
      class="form-control mb-3"
    required ></textarea>
    <button type="submit" class="btn btn-primary" id="submit">Submit</button>
  </div>
</form>

JS

$(document).ready(function () {
  $("#form").submit(function (e) {
    e.preventDefault();
  });
});