防止表单上的默认值提交jQuery

Question

这有什么问题？

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery的:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

Answer 1

试试这个:

$("#cpa-form").submit(function(e){
    return false;
});

Answer 2

使用新的"on"事件语法.

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

引用:https://api.jquery.com/on/

Answer 3

我相信上面的答案都是正确的,但这并没有指出为什么这个submit方法不起作用.

好吧,submit如果jQuery无法获取该form元素,该方法将无法工作,并且jQuery不会给出任何错误.如果你的脚本放在文档的头部,确保代码运行后DOM是准备好.那么,$(document).ready(function () { // your code here // });会解决问题.

最佳做法是,始终将脚本放在文档的底部.

Answer 4

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

Answer 5

这是一个古老的问题，但是这里公认的答案并没有真正找到问题的根源。

您可以解决这两种方法。首先使用jQuery：

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

还是没有jQuery：

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

您无需使用return false即可解决此问题。