web-dev-qa-db-ja.com

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

何が問題なのですか。

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();
  });
jquerypreventdefault
120
djreed

これを試して：

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

新しい "on"イベント構文を使用してください。

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

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

52
scarver2

上記の答えはすべて正しいと思いますが、それがsubmitメソッドが機能しない理由を指摘するものではありません。

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

ベストプラクティスは、常にスクリプトをドキュメントの末尾に配置することです。

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

これは古くからの質問ですが、ここで認められている答えは実際には問題の根本にたどり着きません。

あなたはこの二つの方法を解決することができます。まず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を使う必要はありません。

4
Chuck Le Butt
$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});
3
shraddha Dharmamer

あなたのコードは素晴らしいですあなたはそれをready関数の中に置く必要があるだけです。

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

DEPRECATED - この部分は古くなっているので使わないでください。

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

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

UPDATE - 動的に追加されたコンテンツを処理したい場合は、jQuery on（）メソッドを使用して文書DOMを監視してください。

ケース1、静的バージョン:あなたが数人のリスナーしか持っておらず、扱うフォームがハードコードされている場合は、「ドキュメントレベル」で直接聞くことができます。リスナーはドキュメントレベルでは使用しませんが、パフォーマンスの問題につながる可能性があるため、Doomツリーの奥深くに移動しようとします（Webサイトのサイズとコンテンツによって異なります）。

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

OR

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

ケース2、動的バージョン:あなたがすでにあなたのコードの中でその文書を聞いているのであれば、この方法はあなたにとって良いでしょう。これは、後でDOMを介して追加されたコードやAJAXを使用した動的コードでも機能します。

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

OR

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

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

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

OR

$(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           
    })
});
1
NFlows

こんにちは、AjaxフォームをGoogle Tag Manager（GTM）と連携させるための解決策を模索しました。戻り値falseは完了を妨げ、Google Analyticsソリューションでイベントのアクティブ化をリアルタイムで送信することはe.preventDefault（）で戻り値falseを変更することでした。 ;それは正しく働いたコードに従います：

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