当使用preventDefault()时，我该如何在按钮点击时提交表单？

Question

我使用jQuery的.preventDefault()来防止当用户按下[ENTER]键时表单提交。问题是，当我点击提交按钮时，它也会停止表单提交。

我在Stack Overflow上看到了许多关于.preventDefault()的主题，但没有一个解决了我的问题。

这是我目前正在使用的代码。

// Part of my form
<form id="subscription_order_form" class=""  method="post" action="some_url"> 
  <button id="btn_order" type="submit">Order</button>
</form>

// Prevent the form to be submitted on ENTER
$('#subscription_order_form').submit(function(e){
  e.preventDefault();
});

// Controll data
$('#btn_order').click(function(){
  checkMandatoryFields();
});


// Check mandatory fields before subitting:
function checkMandatoryFields(e){

  // Code for testing here

  // Set "error" message and abort submission
  if(msg.length > 0) {
    // Do something
  } else {

    //submit or trigger is not recognized as functions
    $('#subscription_order_form').submit(); //.trigger('submit');

  }
}

请问如何在按钮点击时提交表单？

- Steven

---

我很困惑为什么你想要阻止用户通过“回车”键提交。这是一种常见的便利方式。 - Blazemonger

真的吗？那我一定是少数总是点击提交按钮的人之一。无论如何，我有表单字段可以更改，根据输入值进行JavaScript计算。 - Steven

Answer 1

在DOM节点上触发提交事件，而不是jQuery对象。

$('#subscription_order_form')[0].submit();

或者

$('#subscription_order_form').get(0).submit();

或者

document.getElementById("subscription_order_form").submit();

这将绕过绑定在jQuery上的事件，使表单可以正常提交。

- Kevin B

---

我可以知道这行代码中的 [0] 是什么作用吗？ $('#subscription_order_form').get(0).submit(); - Anu

@Anu，它实际上是document.getElementById('subscription_order_form').submit()。jQuery选择方法返回类似数组的对象，因此[0]将给您表单节点。 - Kevin B

Answer 2

您需要使用

$(this).parents('form').submit()

- Romain

Answer 3

请将此替换为：

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

使用以下内容：

$('#subscription_order_form').on('keydown', function(e){
    if (e.which===13) e.preventDefault();
});

演示

这将防止在按下回车键时提交表单，因为它会阻止该按键的默认操作，但是在点击时，表单将正常提交。

- adeneo

---

感谢@adeneo。请查看更新后的Fiddle：http://jsfiddle.net/kqqbx/3/ 即使控件失败，表单也会在点击时提交。 - Steven

@Steven - 我现在明白你想做什么了，可能是这样的FIDDLE----- - adeneo

几乎可以了。唯一的问题是在输入文本字段中[ENTER]无法工作：http://jsfiddle.net/kqqbx/9/ - Steven

移除 e.which===13 对于输入文本字段将会在按下回车键时提交表单。 - Steven

@Steven - 在文本字段中，enter键具有默认操作，即提交表单。要么回车键起作用并提交表单，要么根本不起作用，因为这就是该键的作用？？？如果问题是仅在按下提交按钮时避免回车键提交表单，请查看此FIDDLE。 - adeneo

我通过在提交时设置preventDefault，然后将按钮类型从submit更改为button，然后使用@kevin-b的解决方案来提交表单解决了它。虽然感谢你的帮助 :) - Steven

Answer 4

将提交按钮更改为普通按钮，并在其onClick事件中处理提交。

据我所知，没有办法区分表单是通过按Enter键还是点击提交按钮进行提交的。

- Hans Hohenfeld

---

我测试过了，但是使用 $('#subscription_order_form').submit(); 表单仍然无法提交。 - Steven

这是因为submit()只会触发onSubmit事件，在你的代码中并没有太多作用。你需要自己使用表单数据调用操作URL，即通过$.ajax来实现。 - Hans Hohenfeld

Answer 5

首先，e.preventDefault(); 不是 Jquery 元素，而是 JavaScript 的一个方法。如果你添加了这个方法，它可以避免提交事件。现在你可以通过 Ajax 发送表单，类似于以下代码：

$('#subscription_order_form').submit(function(e){
    $.ajax({
     url: $(this).attr('action'),
     data : $(this).serialize(),
     success : function (data){

      }
   });
    e.preventDefault();
});

- Jorge