web-dev-qa-db-ja.com

preventDefault（）を使用しているときに、ボタンをクリックしたときにフォームを送信するにはどうすればよいですか？

ユーザーが[ENTER]キーをクリックしたときにフォームが送信されないようにするために、jQueryの.preventDefault()を使用しています。問題は、送信ボタンをクリックするとフォームの送信も停止することです。

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');

  }
}

ボタンをクリックしたときにフォームを送信するためのコードを誰かに教えてもらえますか？

jqueryformssubmit
9
Steven

JQueryオブジェクトではなく、DOMノードで送信イベントをトリガーします。

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

または

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

または

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

これにより、jQueryにバインドされたイベントがバイパスされ、フォームが正常に送信されます。

28
Kevin B

送信ボタンを通常のボタンに変更し、onClickイベントで送信を処理します。

私の知る限りでは、フォームがEnterキーまたは送信ボタンのどちらで送信されたかを知る方法はありません。

5
Hans Hohenfeld

これを交換してください：

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

これとともに：

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

[〜＃〜]フィドル[〜＃〜]

これにより、Enterキーが押されたときにフォームが送信されなくなります。これは、キーのデフォルトアクションが妨げられるためですが、フォームはクリックすると通常どおり送信されます。

5
adeneo

使用する必要があります

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

さて、最初にe.preventDefault();はJquery要素ではありません。これはJavaScriptのメソッドです。このメソッドを追加すると、イベントの送信を回避し、ajaxでフォームを送信できるようになります。このようなもの

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

      }
   });
    e.preventDefault();
});
0
Jorge