記録

submit(サブミット):送信させない4つの方法です🙄。#javascript #サブミットキャンセル

おはようございます、台風一過が去りましたね😌。

さて、今日はsubmit(サブミット):送信させない4つの方法を記載します、方法は大きく分けて2つの方法があり、それを細分化して4つの方法になります。まず、一番目は“送信する際(form側)”にてキャンセルする方法です。この場合、addEventListener(アッドイベントリスナー)でキャンセル処理する場合とonsubmitを使用してキャンセルする方法があります。

サンプルコード例1と例3にあたるコードが上記のコードになります。

次に”ボタンをクリック”した際にサブミット(送信)処理をキャンセルする方法です、この方法でも送信を阻止する事ができます。

サンプルコード例2と例4にあたります、自分としてはフォームで処理した方が良いかなと思いますが、こちらでも送信をキャンセルする事ができます。

尚、ソースコードは下記になります。また、参考にしたサイトのリンクを貼っときます。MDNのリンクです。

    <form id="frm" method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit1</button>
    </form>
    <form method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button id="btn" type="submit" class="btn btn-primary">Submit2</button>
    </form>    
    <form method="post" action="./example/" onsubmit="return func1()" >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit3</button>
    </form>
    <form method="post" action="./example/"  >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary" onclick="return func2()" >Submit4</button>
    </form>
//例1
document.getElementById("frm").addEventListener("submit",function(event){
    event.preventDefault();
});
//例2
document.getElementById("btn").addEventListener("click",function(event){
    event.preventDefault();
    event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。 
});
//例3
function func1(){
    return false;
}
//例4
function func2(){
    return false;
}



【DMM FX】口座開設のお申込みはこちら


OFUSEで応援を送る

機械学習は学習するのにどれぐらいのデータが必要?前のページ

1万件のCSVを読み込みテーブルに保存する雛形コード #PHPCode次のページ

関連記事

  1. 記録

    文学YouTuberベルさんを紹介(?´0`?)

    文学YouTuberベルさんを紹介します、紹介していたと思っていたけ…

  2. 記録

    映画、記者たち 衝撃と畏怖(いふ)の真実を観ました。

    畏怖(いふ)とは恐れおののくことを指す。映画、『記者たち 衝撃と畏怖…

  3. 記録

    映画、とんびを観てきましたよ。#とんび #映画

    おはよう御座います。昨日は春を通り越して初夏じゃないかなって思うぐら…

  4. person holding white chalk

    記録

    Sqliteで作った簡易掲示板のコードを配布致します。#php #code

    おはようございます。台風は過ぎ去りましたがせっかくの三連休が残念です…

  5. 記録

    たぶん今までのSEOが有効じゃなくなる時代へ。

    たぶん今までのSEOが有効じゃなくなる時代へ突入するだろうと思って…

  6. 記録

    日立からアクセスがあの記事にありましたのでおそらく。

    日立からアクセスがあの記事にありましたのでおそらく自動化されるでしょ…

2022年9月
 1234
567891011
12131415161718
19202122232425
2627282930  

カテゴリー

PAGE TOP