2016-09-30 26 views
0

フォームを送信する前に、スタイルdisplay:noneを持つすべての要素を無効にしようとしています。JQuery submit - 無限ループ

e.preventDefault()がある場合、フォームは全く提出されず、e.preventDefault()がない場合、無限ループが発生します。

$(document).on('submit', 'form', function (e) { 
    e.preventDefault(); 
    console.log($(':input:hidden').length); 
    $('#reservation-form > :input:hidden').attr("disabled", true); 
    $('#reservation-form').unbind('submit').submit(); 

}); 

あなたがこのフォームを送信する前に無効にし、すべてのdisplay:noneフィールドを作るために何をすべきか知っていますか?

+1

あなたの問題は、あなたが 'document'にそれを委譲したので、イベントが'#予約書式 'に束縛されていないことです。 –

+0

あなたのリスナーは '$(document)'にあり、 #予約フォーム 'を選択する。 –

+0

あなたの次の問題の可能性があるものを先取りする:無効な要素はフォームの提出には含まれません*。 (それがあなたの望むものかもしれません)。 –

答えて

2

をあなたはe.preventDefault();呼び出しを削除し、関数の最後にtrueを返し$('#reservation-form').unbind('submit').submit();

を実行する必要はありません。

$(document).on('submit', 'form', function (e) { 
    console.log($(':input:hidden').length); 
    $('#reservation-form > :input:hidden').attr("disabled", true); 
    return true; 
}); 

これは、イベントをバインドまたはアンバインドすることなく、必要な動作を提供します。

+0

待って、それは意味をなさない!...しかし、戻り値true;ステートメントは無用です –

+0

私はそれを追加するのが好きです。私が思い出す限り、falseを返すとあなたのフォームは送信されません。 –

+0

ちょうどそれを確かめるためにそれをテストしました、そしてfalseを返すことはあなたのフォームが提出するのを妨げます(提出する前にバリデーションを行うときには非常に便利) –

2

レベルをdocumentにバインドしているため、submitのバインドを解除するには、documentレベルでアンバインドする必要があります。言われています

は、最も簡単な方法は、DOMネイティブsubmit()イベントの代わりに呼び出すことです:

:あなたのケースでは、それは何も変更しない場合でも、

$('#reservation-form')[0].submit(); 

ところで、ブール属性のために、より良いは.prop()を使用することです

$('#reservation-form > :input:hidden').prop("disabled", true); 
+0

これは送信されますが、これはうまくいかないと思います。小道具があっても、現在表示されているフィールド:なしのスタイルが送信されます。私はdisplay:noneスタイルを送るべきでないか、少なくとも空であるべきすべての要素を望みます。 –

+0

多分あなたはセレクタとして使うべきです: '$( '#予約フォーム:入力:非表示')' –

0

誤ったセレクタを使用して、入力タイプが非表示の要素を取得しています。 あなたが使用する必要があります。

$('input[type=hidden]') 

ドキュメント:Css Selectors

+0

':hidden'はjQueryセレクタです:https://api.jquery.com/hidden-selector/ –

+0

oh my悪い、私は答えを削除する必要があります、私は指摘のおかげで、標準のCSSセレクタを使用? – SuigetsuSake