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

Question

我有一个带有 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; }
            }     
     });
});

正如你所看到的，我试图告诉它仅在关闭时返回 true，但它并没有真正起作用。

有什么想法吗？

Answer 1

试试这个：

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 语句。

---

更新

要使上面的代码正常工作，请将提交按钮的名称更改为其他内容，例如：

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

Answer 2

（在 Neal 的回答下回答 Rick 的问题：“还有其他方式吗？因为我无法直接访问此 html”）

如果您出于某种原因需要一个提交按钮来拥有 ID="提交”并且不能使用 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

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