Question

我正在构建一个联系表单，我想通过ajax提交数据并通过相同的方式显示结果。但只要用户点击提交按钮，该页面就会自动提交。我也使用了jquery的 preventDefault 和 stopPropogation 。但它仍然无法正常工作。我是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 Validation Plugin，它也无效。

Answer 1

您真正想要的是捕获submit()和preventDefault()。

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

Answer 2

jQuery需要#来识别ID和.。

如果您不想提交表单，请使用以下：

$("#contactform").on('submit', function(e){

    alert("not submited");
    return false;

    });

Answer 3

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

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

Answer 4

塞尔吉奥是对的。

此外，点击监听器也不会对输入起作用，右选择器是

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

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

4 个答案: