jQueryの使用-フォームが送信されないようにする

177

jqueryを使用してフォームが送信されないようにするにはどうすればよいですか？

私はすべてを試しました-以下で試した3つの異なるオプションを参照してください。ただし、すべてが機能しません。

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

何が悪いのでしょうか？

更新-ここに私のhtmlがあります：

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

ここで何か問題はありますか？

jquery forms

— ルーシー・ウェザーフォード
ソース

HTMLを表示する理由は、セレクターが完全に間違っていることを除いて、preventDefaultに問題がないこと、または投稿時にfalseを返すことです。

— Sparky

1

return false;.submit()私のために働いた後！私は同じ問題を抱えていました

— d -_- b '30 / 09/30

ハンドラーでJavaScriptエラーが発生した場合、e.preventDefault();コードは到達または実行されません。

— トム

263

2つのことが際立っています。

フォーム名がでない可能性がありますform。むしろ、＃をドロップしてタグを参照してください。

また、これe.preventDefaultは正しいJQuery構文です。

    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

オプションCも機能するはずです。オプションBに詳しくない

完全な例：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

— フィリップ・フーリー
ソース

2

他の何かが間違っています。私はこのテクニックを日常的に使用しています。おそらく、ページにJavaScriptエラーがあると思われます。おそらくFireBugで確認してください。

— フィリップフーリー

@LucyWeatherford、私は動作するサンプルで私の答えを更新しました。多分あなたは何かを見つけます。

— フィリップフーリー

更新htmlで、フォームにclass属性があることに気付きました。クラス属性のJQueryセレクターをから$('#form')に変更します$('.form')。

— フィリップフーリー

1

ありがとう！私は同じページであなたのコードを使用することになりました、そしてそれはうまくいきました、しかしそれでも何が間違っているのかはわかりませんが、それは今はすべて良いです。ありがとう！

— Lucy Weatherford

1

@ÂngeloRigoeは、単にパラメーターに付ける名前です。この場合は、送信イベントです。

— squall3d

34

おそらくページにいくつかのフォームがあり、$（ 'form'）。submit（）を使用すると、このイベントがページ上のフォームの最初の発生に追加されます。代わりにクラスセレクターを使用するか、これを試してください：

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

それのより良いバージョン：

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

— アルテム・キセレフ
ソース

1

私の場合、falseを返すことが重要でした。

— elquimista 2016年

19

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

e.preventDefault();

イベントのバブリングを停止するには

e.stopPropagation();

フォームの送信を防ぐには、「return false」も機能するはずです。

— アルファ
ソース

jQueryはこれらを異なる方法で処理するため、この回答を参照してください。 stackoverflow.com/questions/1357118/...

— スパーキー

1

イベントbubling理解するために、これをチェックしquirksmode.org/js/events_order.htmlを

— アルファ

2

API のjQueryは次のように述べています。「イベントハンドラーからfalseを返すと、自動的にevent.stopPropagation()and が呼び出されevent.preventDefault()ます。false値は、ハンドラーの省略形としてfunction(){ return false; }。

— ポール・

7

私も同じ問題を抱えていました。私もあなたが試したものを試しました。次に、jqueryを使用しないようにメソッドを変更し、フォームタグの "onsubmit"属性を使用します。

<form onsubmit="thefunction(); return false;">

できます。

しかし、「thefunction（）」だけにfalseの戻り値を入れようとした場合、送信プロセスが妨げられないため、「return false」を入れなければなりません。onsubmit属性内。したがって、私のフォームアプリケーションはJavaScript関数から戻り値を取得できないと結論付けます。私はそれについて何も知りません。

— ルキ・B・スベクティ
ソース

1

それは間の差であるfalse;とreturn false;。必要なものonsubmit="return thefunction();"

— xr280xr

4

私は同じ問題を抱えていて、この方法で解決しました（エレガントではありませんが、うまくいきます）。

$('#form').attr('onsubmit','return false;');

そして、私の意見では、いつでも状況を元に戻すことができるという利点があります。

$('#form').attr('onsubmit','return true;');

— vinxxe
ソース

おそらく、フォーム送信防止を元に戻すときに属性を削除する方が少し快適かもしれません$('#form').removeAttr('onsubmit');

— barbieswimcrew

4

イベントをフォーム要素ではなく送信要素に添付します。たとえばあなたのhtmlでは次のようにします

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

— Mワイス
ソース

2

yesがsubmitロジックを実行し、それ以外の場合はエラーを表示する場合は、フォームが有効かどうかを確認するだけです。

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

— コードスパイ
ソース

1

<form>属性なしでタグを使用id="form"していて、jqueryでタグ名で直接呼び出すと、正常に機能します。
HTMLファイル内のコード：

<form action="page2.php" method="post">

そしてjqueryスクリプトで：

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

— ノハサラ
ソース

1

$('#form')で要素を探しますid="form"。

$('form') フォーム要素を探します

— ラフル
ソース

0

あなたはフォームIDを忘れて、それは機能します

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

— 新田肉アリッサ
ソース

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

ここから：https : //api.jquery.com/submit-selector/（送信タイプに関する興味深いページ）

— クリス・ストロング
ソース

0

これも機能しているようで、少し簡単かもしれません：

$('#Form').on('submit',function(){
    return false;
})

— ukuser32
ソース

0

jQueryを使用すると、次のことができます。

1-イベントの発生を防ぎながら、[送信]ボタンでネイティブフォームの送信イベントを使用します。

2-フォームの有効なプロパティを確認します。これは次のように実装できます。

1- HTML：

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

— モハメド・ナジェブ
ソース