フォーム送信jQueryのデフォルトを防止

138

これの何が問題になっていますか？

HTML：

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery：

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

jquery preventdefault

— djreed
ソース

12

ここで正常に動作します。質問に詳細情報を投稿できますか？あなたalert()が送信ハンドラーにいる場合、それは呼び出されますか？そうでない場合は、スクリプトにエラーがあり、イベントハンドラーが正しく配線されていない可能性があります。エラーコンソールに何かありますか？

— 町

3

そのリンクは内部的なものであり、私たちにとって役に立たないものです。

— スティーブ・ロビンス'24年

おそらく古いバージョンがキャッシュされました。現在動作しているようです。

— djreed

1

event.preventDefault（）の

— Liam

2

！DOMの準備ができた後にJavaScriptコードが実行されることを確認してください。

— 2015

175

これを試して：

$("#cpa-form").submit(function(e){
    return false;
});

— ジョーダンブラウン
ソース

12

それは機能しますが、preventDefaultの推奨方法が機能しないのはなぜですか？

— MikeJ 2013年

26

：より良い説明のため、この質問を参照してくださいstackoverflow.com/questions/1357118/...

— ヨルダンブラウン

8

これは間違った答えです。e.preventDefault()フォームの送信で問題なく動作します。問題はOPのコードのどこかにあります。使用return false すると、意図しない結果が生じる可能性があります。

— Chuck Le Butt

58

新しい「on」イベント構文を使用します。

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

引用：https : //api.jquery.com/on/

— スカーバー2
ソース

2

こんにちは。これは私にはうまくいきません。（はい、コードを内部に配置しました$(document).ready()）どのように機能させるのですか？

— 今村桂

1

@GuiImamura詳細情報が必要です。有効な変数をtrueまたはに設定しましたかfalse？jsfiddle.netでコードを再作成してリンクを送信できますか？を追加しalert()て、関数が実行されていることを確認してください。一部の人々は、e.stopPropagation();後に追加e.preventDefault();すると他の連鎖イベントの発火を停止すると報告しました。

— scarver2

こんにちは、jQuery validationEngineを変数として使用$('#myFormID').validationEngine('validate')して、入力が有効な電子メールアドレスかどうかを確認しています。それでも、どちらにしてもデフォルトの動作を防止したい。ない場合はブロック内ではなく、その前にする必要がありますか？validpreventDefault

— 今村桂2015

@GuiImamuraそれがうまくいくのを聞いてうれしいです。preventDefault内側にある有効でない場合は、フォームの提出を停止するブロック。つまり、有効な場合は、フォームのデフォルトの動作を使用します。

— scarver2 2015

13

上記の答えはすべて正しいと思いますが、それが理由を指摘していません submit方法が機能しないわかりません。

まあ、submitjQueryがform要素を取得できない場合、メソッドは機能せず、jQueryはそれについてエラーを出しません。スクリプトがドキュメントの先頭に配置されている場合DOMは、準備ができてからコードを実行してください。そう、$(document).ready(function () { // your code here // });問題を解決します。

ベストプラクティスは、スクリプトを常にドキュメントの下部に置くことです。

— けん引
ソース

11

これは古代の質問ですが、ここで受け入れられた答えは実際には問題の根本に到達しません。

これは2つの方法で解決できます。まずjQueryで：

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

またはjQueryなし：

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

return falseこの問題を解決するためにを使用する必要はありません。

— チャック・ル・バット
ソース

jqueryイベントリスナーの代わりにネイティブjsイベントリスナーを置き換えました。アイデアありがとうございます。

— Orhan Gazi

6

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

— クリサリン・ペトロフスキ
ソース

これは、サーバーサイドフォーム内にクライアントサイドフォームがあるページで完璧に機能します。

— リクネス

3

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

— シュラダーダルママー
ソース

2

コードは、ready関数内に配置するだけで問題ありません。

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

— ジャイキャサリア
ソース

このアドバイスはすでに他の回答によって提供されています。ページの膨張を減らすために、この回答を削除してください。同じ感情を表す他の回答に賛成票を投じることができます。

— mickmackusa 2017年

2

非推奨 -この部分は古くなっているため、使用しないでください。

たとえば、後で動的フォームを追加した場合は、このコードを試すこともできます。たとえば、ウィンドウをajaxと非同期でロードし、このフォームを送信したいとします。

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

UPDATE-動的に追加されるコンテンツを処理する場合は、jQuery on（）メソッドを使用してドキュメントDOMをリッスンする必要があります。

ケース1、静的バージョン： リスナーの数が少なく、処理するフォームがハードコーディングされている場合は、「ドキュメントレベル」で直接リッスンできます。ドキュメントレベルではリスナーを使用しませんが、パフォーマンスの問題が発生する可能性があるため、運命のツリーを深く掘り下げようとします（Webサイトとコンテンツのサイズによって異なります）。

$('form#formToHandle').on('submit'...

または

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

ケース2、動的バージョン：コードでドキュメントをすでに聞いている場合は、この方法が適しています。これは、DOMまたはAJAXで動的に追加されたコードでも機能します。

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

または

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

または

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

— NFlows
ソース

7

.live()jQuery 1.7から非推奨になり、1.9から削除されました。.on()代わりに使用してください。

— ハンク

0

こんにちは、Googleタグマネージャー（GTM）でAjaxフォームを機能させるためのソリューションを探していました。戻り値falseは完了を妨げ、Googleアナリティクスソリューションでイベントのアクティブ化をリアルタイムで送信しました。戻り値falseをe.preventDefault（）で変更しました。 ; コードに従って正しく動作します：

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

— ナビ
ソース

0

e.preventDefault（）は、JavaScriptに問題がない場合にのみ正常に機能します。e.preventDefault（）が機能しない場合はJavaScriptを確認して、JSの他の一部も機能しない可能性があります。

— どんどん
ソース

0

よく私は同様の問題に遭遇しました。私にとっての問題は、DOMレンダリングが発生する前にJSファイルがロードされることです。だからあなた<script>の最後に移動します<body>タグ。

または遅延を使用します。

<script defer src="">

安心して動作するe.preventDefault()はずです。

— ヴィニェシュ戦争
ソース