フォームの送信を停止するJavaScriptコード

206

フォームの送信を停止する1つの方法は、JavaScript関数からfalseを返すことです。

送信ボタンがクリックされると、検証関数が呼び出されます。フォーム検証のケースがあります。その条件が満たされた場合、returnToPreviousPage（）という名前の関数を呼び出します。

function returnToPreviousPage() {
    window.history.back();
}

JavaScriptとDojo Toolkitを使用しています。

前のページに戻るのではなく、フォームを送信します。この送信を中止して前のページに戻るにはどうすればよいですか？

javascript  html  forms 
— ムハンマドイムランタリク
ソース
RU確かにこの関数が呼び出していますか？alert（ 'test'）;を配置しようとします。before window.history
— samirprogrammer '29 / 12/29
はい私は確信しています; 呼ばれている。
— ムハンマドイムランタリク2011
8
— TJ

回答:

292

関数の戻り値を使用してフォームの送信を防ぐことができます

<form name="myForm" onsubmit="return validateMyForm();">

のように機能します

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

Chrome 27.0.1453.116 mの場合、上記のコードが機能しない場合は、イベントハンドラーのパラメーターのreturnValueを設定してくださいフィールドをfalseに設定して機能させます。

情報を共有してくれたSamに感謝します。

編集：

validateMyForm（）がfalseを返す場合の回避策をVikramに感謝します。

 <form onsubmit="event.preventDefault(); validateMyForm();">

ここで、validateMyForm（）は、検証が失敗した場合にfalseを返す関数です。重要なポイントは、名前イベントを使用することです。egepreventDefault（）には使用できません

— ヘマント・メタリア
ソース
1
ただの推測ですが、Chromeの最新バージョンでは動作しません。
— 2013
5
戻るfalseものは何の効果もないようです。Chromeは引き続きフォームを送信します。たとえば、onsubmit="return false;"。ただし、イベントハンドラーのパラメーターのreturnValueフィールドをに設定してfalseも機能します。
— 2013
3
こんにちはサム/ヘマント、イベントハンドラーのパラメーターのreturnValueフィールドをfalseに設定する方法についてコードサンプルを提供できますか。
— JackDev 2013
2
これは受け入れられる答えなので、おそらくこれを適切に行う方法を教えてくれるはずです。JackDevと一緒に、これを適切に機能させる方法を考えています。であるように、これはいない仕事を
— たけ
1
validateMyForm()エラーreturn falseがある場合は到達しません。したがって、これは失敗する可能性があります。数時間後、私は機能する解決策を見つけ、以下に投稿しました。
— Vikram Pudi、2014年
116

デフォルトの防止を使用

Dojoツールキット

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

バニラJavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}
— グレッググイダ
ソース
3
：私は多くの理由のために戻り偽の上にevent.preventDefault（）を推薦する、これはトップの答えでなければなりませんblog.nmsdvid.com/...
— acidjazz
1
いい答えだ。選ばれたものより良い。
— Ani Menon
2
良いですが、OPが必要とする検証はどこで実行しますか？
— Sahand
1
@acidjazzしかし、デフォルトを防止した後、フォームデータにどのようにアクセスしますか？
— CodeAt30、18年
@Sahand @ codeat30イベントにアクセスできますtarget。
— エイドリアン
50

以下は現在のところ機能します（ChromeとFirefoxでテスト済み）：

<form onsubmit="event.preventDefault(); validateMyForm();">

ここで、validateMyForm（）は、false検証が失敗した場合に戻る関数です。重要なポイントは、名前を使用することですevent。例としては使用できませんe.preventDefault()。

— ヴィクラムプディ
ソース
15

button送信ボタンの代わりに単純なボタンを使用してください。そして、JavaScript関数を呼び出してフォーム送信を処理します。

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

scriptタグ内の機能：

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

あなたも試すことができます window.history.forward(-1);

— dku.rajkumar
ソース
私の使用例であるコールバックが可能であるため、このアプローチが好きです。
— エディ
12
これにより、Enterキーを使用してフォームを送信できなくなります。また、などの新しいHTML5属性requiredは機能しません。
— 2013
8

簡単なことを行うための多くの難しい方法：

<form name="foo" onsubmit="return false">
— ダニアル
ソース
3
この正確な回答（あなたのセミコロンが欠落しているため、OK、正確ではありません）は8か月前に提出され、正当な理由で反対票を投じています。これはほとんどの場合機能します。しかし、すべてのブラウザ上のすべての時間。
— Auspex 2017
3
セミコロンが必要だとは言いませんでした。それがあなたの答えとはるかに古い答えとの間で異なっていたすべてであると私は指摘しました。現在、どのブラウザーがそれをサポートしていないかを指摘するように求められているという事実（存在するとは決して言わなかった、私はそれが常に機能するとは限らないことを指摘した）は、まだこのページ全体を読んでいないことを証明する。
— Auspex
2
人々が正しいコードに反対票を投じていることを知らなかった場合を除いて、私は通常は反対票を調べません。技術的には、セミコロンは無関係なので、間違っています。そして、あなたは「あなたのセミコロンが欠けている」と言って、それが必要であることを暗示していますが、それは間違っています。「常に機能するとは限らない」とおっしゃっていますが、機能しない単一のケースやブラウザを指摘することはできませんか？これは健全な論理ですか？正しいコードです。したがって、機能しない場合を指摘できない限り、まったく意味がありません。
— Danial、2017年
どうしてこれに賛成票がないのですか？他の例に比べてはるかに簡潔です。
— Sal Alturaigi
おそらく、タイトルが男が実際に求めていたものと一致しないからでしょう。
— Danial
6

あなたのすべての答えは何かを扱うために与えました。

最後に、これは私にとってうまくいきました：（少なくとも1つのチェックボックス項目を選択しないと、警告が表示され、同じページにとどまります）

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>
— GDBA
ソース
私のためにも働いた。
— chetan 2016
4

@Vikram Pudiの回答に基づいて、純粋なJavascriptでこのようにすることもできます

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>
— ファンヴァンリン
ソース
3

onsubmitスクリプトでイベントを使用せずに添付することをお勧めします。

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

次にpreventDefault()（またはreturnValue = false古いブラウザの場合）を使用します。

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
— アイザック・アブラモヴィッツ
ソース
なぜ使用しないのか説明してもらえますonsubmitか？
— theFreedomBanana
多分それは単なる好みですが、すべてのイベントリスナーが属性を使用するJS代わりにHTMLを使用してアタッチされていると、Webページの機能を理解しやすくなります。そうすれば、他の誰かのコードを読んでいる間、何度も前後にジャンプする必要がなくなります
— Isaac Abramowitz
ボタンをクリックするのではなく、入力の1つでEnterキーを押すとどうなりますか？一般的に、iiはまだ提出します...
— bluejayke
1

これに似たフォームがあるとしましょう

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

以下は、confirmAction関数のJavaScriptです。

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

これは、Firefox、Chrome、Internet Explorer（edge）、Safariなどで動作します。

そうでない場合はお知らせください

— マウリシオグラシアグティエレス
ソース
1
組み合わせpreventDefault()とreturnToPreviousPage()完璧でエレガントです。例外キャッチャーを機能させるように設計するのと同じように、通常の操作を中断します。+1。
— 1934286
1

HemantとVikramの答えは、Chromeではまったくうまくいきませんでした。event.preventDefault（）; スクリプトは、検証の成功または失敗に関係なく、ページが送信されないようにしました。代わりに、event.preventDefault（）;を移動する必要がありました。次のようにifステートメントに：

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

私を正しい軌道に乗せてくれたHemantとVikramに感謝します。

— ジェスペライ
ソース
私も働いた。ありがとう。
— ivbtar
1

たとえば、フォームに送信ボタンがある場合、その伝達を停止するには、単純にevent.preventDefault（）;と書き込みます。送信ボタンまたは入力ボタンをクリックしたときに呼び出される関数内。

— デーラジ・ナラワデ
ソース
0

単にそれをしてください...

<form>
<!-- Your Input Elements -->
</form>

ここにあなたのjQueryがあります

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
— マティー・ゴジュラ
ソース
1
ここでjqueryを使用しましたか？
— Selva Ganapathi
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.