在表单提交之前执行操作?

时间:2011-05-23 21:10:42

标签: jquery forms

我有一个带有id的HTML表单,我已将此id绑定到提交功能。我想要的是当用户点击提交时,弹出窗口会像模态框一样感谢它们。只有在他们点击屏幕或模式框关闭后,我才希望表单提交并刷新页面。

但我现在拥有它的方式似乎无论如何都会刷新。我正在使用模式框的花式弹出插件。

<form action="submit-comment.php" method="post" id="form">
<input type="text" name="comment" />
<input type="submit" name="submit" value="Submit" />
</form>

jQuery("#form").submit(function() {
     jQuery.fancybox('<div class="box">Some content</div>', {
           'onClosed' : function() { return true; }
            }     
     });
});

正如你所看到的那样,我试图告诉它只在关闭时才返回真实,但它并没有真正发挥作用。

有什么想法吗?

2 个答案:

答案 0 :(得分:60)

试试这个:

jQuery("#form").submit(function(e) {
     var self = this;
     e.preventDefault();
     jQuery.fancybox('<div class="box">Some amazing wonderful content</div>', {
           'onClosed' : function() { 
                          self.submit();
                        }
     });
     return false; //is superfluous, but I put it here as a fallback
});

javascript是异步的,所以你不能延迟return语句。


<强>更新

为了使上述代码有效,请将提交按钮的name更改为其他内容,例如:

<input type="submit" name="submit_me" value="Submit" />

答案 1 :(得分:2)

(根据Neal的回答回答Rick的问题:“还有其他任何方式吗?因为我无法直接访问这个html”)

如果您出于某种原因需要提交按钮以使ID =“submit”并且无法使用form.submit方法(因为它链接到“input [type = submit] #submit”按钮),您可以这样做:

$('<form>')[0].submit.call(form); //jQuery
//OR:
document.createElement('form').submit.call(form); //pure HTML w/o any framework

即。创建新的空表单并使用其submit方法在您自己的表单范围内调用它