使用preventDefault()时,如何在按钮单击时提交表单？

Question

.preventDefault()当用户单击[ENTER]键时,我正在使用jQuery 来阻止表单提交.问题是,当我单击提交按钮时,它也会停止提交表单.

我看到Stackoverflow上有许多线程.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');

  }
}

任何人都可以告诉我他在代码按钮上提交表单的代码是什么？

Answer 1

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

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

要么

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

要么

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

这绕过了jQuery绑定事件,允许表单正常提交.

Answer 2

将提交按钮更改为普通按钮并处理其onClick事件中的提交.

据我所知,没有办法判断表单是由Enter键还是提交按钮提交的.

Answer 3

您需要使用

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

Answer 4

替换这个:

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

有了这个:

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

小提琴

这将阻止在按下Enter键时提交表单,因为它会阻止键的默认操作,但表单将在点击时正常提交.