Question

我在jQuery中使用表单提交事件时遇到了麻烦。

加价

<form>
    <input type="text" name="username" />
    <a id="btn_submit">Submit</a>
    <input type="submit" />
</form>

事件监听器

function valid() { return false; }

$('form').submit(function() {
    if(!valid()) {
        return false;
    }
});

然后，当我点击<input type="submit" />时，它会触发该事件，并可以取消提交事件。

但是当我在.btn_submit标签上触发表单提交时，return false无法取消提交。

取消失败

$('#btn_submit').click(function() {
    $('form').submit();
    // $('form').trigger('submit');
    // document.forms[0].submit();
});

所以，现在问题是，如果我必须使用a.btn_submit来触发表单的提交，我想取消该提交以防万一。

我应该如何触发？
我该如何取消？

请帮忙！

我做了一个小提琴http://jsfiddle.net/69wcduv5/2/。

但它似乎无法在jsfiddle中提交。

我的最终解决方案（有点脏）

我可以在表单中创建一个提交输入，然后触发点击它。然后将其删除。

如果我以这种方式触发提交，我的行为与我预期的完全相同：

$('form').submit(function() {});内的验证码无需更改。
如果表单有<input type="text" required />之类的内容，则可以很好地使用。
我可以很好地在那个锚上打造。不是f **国王<input type="submit" />

感谢大家的耐心，最诚挚的问候。

希望有更好的解决方案。

Answer 1

$("a.btn_submit").click(function(){
  if($('form').valid())
  {
     $('form').submit();
  }
});

Answer 2

$('form').submit(function(event) {
    if(!valid()) {
        event.preventDefault();
    }
});

Answer 3

我现在明白你想要实现的目标，所以请忽略我之前写的内容。

formElement.submit()及其jQuery等效非常故意不会触发onsumbit事件。否则，存在无限递归的可能性。

因此，无法执行$('form').submit();并希望onsubmit处理程序可以拦截。

你最好的选择可能是你的＆＃34;脏＆＃34;理念。即触发点击（隐藏）type="submit"按钮。

Answer 4

使用链接提交表单似乎很奇怪，但问题是您没有取消锚点上的点击操作。

$('.btn_submit').on("click", function(evt) {
    evt.preventDefault();
    $('form').submit();
});

Answer 5

以这种方式致电提交，最接近我的意图：

$.fn.natural_submit = function() {
    if($(this).is('form')) {
        var $form = $(this);
        var $input_submit = $('<input type="submit" />').hide().appendTo($form);
        $input_submit.trigger('click');
        $input_submit.remove();
    }
}

$('#btn_submit').click(function() {
    $('form').natural_submit();
});

在jQuery中取消$（'form'）。submit（）调用

加价

事件监听器

取消失败

我的最终解决方案（有点脏）

5 个答案: