web-dev-qa-db-ja.com

jQuery-フォームの送信をキャンセルします（「return false」を使用しますか？）？

フォームの送信をキャンセルしようとしているときに少し問題が発生しています。私はこのチュートリアルに従っています（ログインスクリプトを作成していない場合でも）。彼のために機能しているようです。

これが私のフォームです：

    <form action="index.php" method="post" name="pForm">
        <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
        <input class="submit" type="submit" value="Publicera!" name="submit" />
    </form>

そしてここにjqueryがあります：

$(document).ready(function() {
    $('form[name=pForm]').submit(function(){

        return false;

    });
});

ヘッダーにjQueryをすでにインポートしており、正常に機能していることがわかります。私の最初の考えは、時代遅れであるかもしれないということでしたが、実際には1年前の「ほんのわずか」です。

だから、誰かが何が悪いのを見ていますか？

前もって感謝します。

編集：私が読んだものから、送信を中止する最も簡単で最も適切な方法はreturn false？しかし、私はそれを動作させるようには思えません。フォーラムを検索したところ、いくつかの役立つスレッドが見つかりましたが、実際には機能しません。私は何かを台無しにしているに違いない。

jqueryrequest-cancelling
9
Nike

event.preventDefault を使用してみてください

$(document).ready(function(event) {
    $('form[name=pForm]').submit(function(event){
        event.preventDefault();
        //add stuff here
    });
});
11
Adam

皆様のご返信ありがとうございます！私の友人が私に追加するようにアドバイスしました

onsubmit="return(false)

フォーム上。それは機能しますが、機能するnot-inline-javascriptのトリックを知りたいです。

9
Nike

「 'return false'の前のアラートが表示されないこと」を示します。

JQueryを使用する場合、submit要素のIDまたは名前を「submit」にすることはできません。そうである場合、submitイベントは発生しません。

4
user1129673

アクセスしようとしているフォームがページに動的に追加される場合があります。その場合、そのフォームにアクセスするにはデリゲートを使用する必要があります

例：

    $(document).delegate("#myform","submit",function(){
       return false;
});
2
Sai Teja Reddy

この（未回答、日付もある）質問に対する私の控えめな貢献。私はこの問題を何度も何度も同じ解決策で実行しました：

使わない

<input name="submit" />

に加えて

$('form').submit(function(){...});

これは間違った要素/アイテムを起動し、エラーや警告を引き起こしません。送信ボタンに別の名前を付けるだけで、すべてが魔法のように再び機能し始めます。

2
nobug

私にもこの問題があり、私のコード（動作しませんでした）は次のようなものでした：

$('#upload_form').submit(function(){ before_submit('argument') });

そして、「before_submit」関数内で、フォームの送信を停止するために「return false」がありました：

function before_submit() {

.........................................................
return false;
}

イベントハンドラー関数をフォームにバインドするときに「return」を入力すると、機能しました。

$('#upload_form').submit(function(){ return before_submit('argument') });

Submitイベントに添付された関数はfalseを返す必要があります（私の場合は無名関数）。だから...これはこの問題の1つの原因に対する1つの解決策です

2
bogdan

正常に動作するはずです。問題がある可能性が高いです。残念ながら、質問のコードは [〜＃〜] sscce [〜＃〜] フレーバーではないため、根本原因を特定するのは困難です。おそらく、jQueryライブラリをまったくインポートしていません。または、jQueryライブラリをインポートする前に$(document).ready()beforeを呼び出しました。または、$()と競合する別のJSライブラリがあります。または、実際のフォームに目的の名前がありません。等々.

あなたが始めるために、これは十分価値のある [〜＃〜] sscce [〜＃〜] です。あなたがする必要があるのは、それをコピー＆ペースト＆ランするだけです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3569072</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('form[name=pForm]').submit(function() {
                    alert('Submit blocked!');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <form action="index.php" method="post" name="pForm">
            <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
            <input class="submit" type="submit" value="Publicera!" name="submit" />
        </form>
    </body>
</html>

機能する場合（少なくとも、ここでは機能しますが、アラートが表示され、フォームがまったく送信されません）、独自のコードと比較し、独自のコードをこのフレーバーに切り詰めて、違いを見つけやすくします（したがって、あなたの間違い）。

いずれにせよ、私の意見では、いくつかの基本的で些細なjQuery（およびできればJavaScript）チュートリアルを理解して、内部で何が行われているのかを理解し、次のようなツールの使用方法を学ぶのは、努力に値するでしょう Firebug 。

2
BalusC

Nameの値には、引用符が必要です。これを試して：

$(document).ready(function() {
    $("form[name='pForm']").submit(function(){
        return false;
    });
});
1
Brian Ray

これと同じ問題が発生し、フォームでRailsおよび_:remote => true_を使用することになりました。Rails jQueryドライバーが入力され、フォームを送信していました私の関数が_return false_とevent.preventDefault()を使用して送信プロセスを停止しようとしたときにajaxによって。

したがって、独自のJavaScriptを妨害するフレームワークとデフォルトのアクションに注意してください。 _return false_は動作するはずです:)

0
John H

ある種の「ダブルリターン」を行う必要があります。つまり、返されたものを返す必要があります。だから、あなたはあなたのhtmlを持っています：

<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm">
    <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
    <input class="submit" type="submit" value="Publicera!" name="submit" />
</form>

上記のように、onsubmitと呼ばれるjquery関数があるだけです。

function cancelSubmit() {
    return false; // return true if you want submission to carry through
}

上記の関数には、あらゆる種類の条件を置くことができます。キャンセルしたいようです。これがこの答えに出くわす他の人に役立つことを願っています。

0
BestAnswer

同様の問題に遭遇しました。検証前にフォームのアクションとメソッドを削除し、検証後にそれらを追加することで解決しました。これが私が書いたバリデーターです：

var Validator = function (formSelector) {
    this.formSelector = formSelector;
//  $(formSelector).submit(function() {return false;});
        this.Action = $(formSelector).attr("action");
        this.Method = $(formSelector).attr("method");
    $(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""});  
        var donotsubmit = false;
        var notjustcheckbox = false;
        var checknotchecked = false;
    this.Required = new Array();
    this.Email = new Array();
    this.validate = function () {
        this.form = $(this.formSelector);
        var i = 0;
        for (i in this.Required){
            $(this.Required[i]).attr("value", function(index,attr){
                // Check on checkboxes...   
                if (this.getAttribute("type") == "checkbox"){
                    if (this.checked == false){ 
                        checknotchecked = true;
                        donotsubmit = true;
                    } else {
                    }       
                } else {    
                    if (attr == "" || attr == undefined){   
                        this.style.border = "1px solid red";
                        notjustcheckbox = true;
                        donotsubmit = true;     
                    } else {
                        this.style.border = "1px solid green";
                    }
                }
            });
        }
        i = 0;
        for (i in this.Email){
            $(this.Email[i]).attr("value", function(index,email){
                var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
                if (filter.test(email) == true || filter.test(email) == "true") {
                    this.style.border = "1px solid green";
                } else if (filter.test(email) == false) {
                    donotsubmit = true;
                    notjustcheckbox = true;
                    this.style.border = "1px solid red";
                }
            });
        }
        if (donotsubmit == true){
            if (checknotchecked == true && notjustcheckbox == true){    
                alert("Please correct the fields in red and check the required checkboxes");
            } else if (checknotchecked == true && notjustcheckbox == false){
                alert("Please check the required checkboxes");
            } else {
                alert("Please correct the fields in red");
            }
            checknotchecked = false;
            notjustcheckbox = false;
            donotsubmit = false;
        } else {
            $(formSelector).attr({action : ''+this.Action+''});
            $(formSelector).attr({method : ''+this.Method+''});
            $(formSelector).submit();   
        }
        return true;
    };
};

次のように実装できます。

$(document).ready(function(){
    var myForm = new Validator("#formId");
        myForm.Required = new Array("input.lightborder");
                myForm.Email = new Array("#email");
                $("#form-submit-button-id").click(function(){
                    myForm.validate();
                });
});

必須フィールドにCSSセレクターを追加できます。メール用のものは一意である必要があります。

0
KeatsKelleher

これはどう？

$('form[name=pForm]').on('submit',function()
{
    console.log("(^o^)");
    return false;
});
0
usayama_dx