表单提交-阻止页面重新加载jQuery


Form Submit - Preventing page reload jQuery

我正在构建一个联系人表单,我想通过ajax提交数据,并通过ajax显示结果。但每当用户点击提交按钮时,页面就会自动提交。我也使用过jquery的preventDefaultstopProportion。但它仍然不起作用。我是jQuery的新手,可能会遗漏一些小东西。这是代码:

表单

<form action="#" method="post" accept-charset="utf-8" name="contactform" id="contactform">
        <p>Name<br/><input type="text" name="cname" value="" id="cname" required /></p><br/>
        <p>Email<br/><input type="email" name="cemail" value="" id="cemail" required /></p><br/>
        <p>Message<br/><textarea name="cmessage" cols="40" rows="10" id="cmessage" required ></textarea></p>
        //Re-captcha code here
        <p><input type="submit" name="contact_submit" value="Submit" id="contact_submit"  /></p>
        </form> 
        <br />
        <div id="result"></div>

脚本

$(document).ready( function(){
$("#contact_submit").click( function(e){
   e.preventDefault();
   e.stopPropagation();


 });
 $("#result").html('');
 $("#contactform").validate();

 });

我已经包含了jQuery验证插件,它也不起作用。

您实际想要的是捕获submit()preventDefault()

$('#contactform').submit(function(e){
    e.preventDefault();
});

jQuery需要一个#来标识类的id和.

如果您不想提交表格,请使用此:

$("#contactform").on('submit', function(e){
    alert("not submited");
    return false;
    });

有几件事你可以看看。首先,从type="submit"更改为type="button"。这为您提供了所有相同的功能,而无需提交。其次,如果你试图在IE中实现这一点,它就不起作用,因为IE在事件对象上没有preventDefault方法。您可以将returnValue设置为false。

$("#contactform").submit( function(e){
   e.stopPropagation();
   if(e.preventDefault){
      e.preventDefault();
   }else{
      e.returnValue = false;
   }
});

Sergio是对的。

此外,点击列表输入也永远不会对输入起作用,右侧选择器是

$('input[name="contact_submit"]')