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

20220907

Logging

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

さて、今日は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;
}

0 Views

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

タグ

, 2, , 4, addEventListener, Form, javascript, onsubmit, submit, アッド, イベント, キャンセル, クリック, コード, こちら, サブミット, サンプル, それ, フォーム, ボタン, リスナー, , 上記, , 今日, 使用, , , 処理, 台風一過, 場合, , 方法, , 細分化, 自分, 記載, 送信, 阻止, ,