web-dev-qa-db-ja.com

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

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>

ここに何か問題がありますか？

jqueryforms
142
Lucy Weatherford

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>
211
Philip Fourie

あなたはたぶんページ上のフォームがほとんどなく、$（ '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;
});
25
Artem Kiselev

デフォルトを防ぐ/フォーム送信を防ぐ

e.preventDefault();

イベントの発生を止めるには

e.stopPropagation();

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

17
The Alpha

私も同じ問題を抱えていました。私はあなたが試したことも試しました。それから、jqueryを使わずにformタグの "onsubmit"属性を使うようにメソッドを変更します。

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

できます。

しかし、 "thefunction（）"にだけ偽の戻り値を入れようとしたとき、それは送信プロセスを妨げることはないので、 "return false;"を入れなければなりません。 onsubmit属性にあります。そのため、私のフォームアプリケーションはJavascript関数から戻り値を取得することはできません。私はそれについてはまったく考えていません。

5
Luki B. Subekti

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

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

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

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

あなたは単にフォームが有効であるかどうかをチェックすることができます。

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
Code Spy

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

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

1
Rahul

フォーム要素ではなく送信要素にイベントを添付します。例えばあなたのhtmlではこんな感じ

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

属性<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
Noha Salah
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

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

0
Chris Strong

あなたはフォームIDを忘れています、そしてそれは働きます

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