小 中 大
■ ■ ■ ■ ■ ■ ■

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

文字数[2154文字] この記事は3分42秒で読めます.

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

2022年09月07日

Logging

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

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

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

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

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

尚、ソースコードは下記になります。また、参考にしたサイトのリンクを貼っときます。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>
//例１
document.getElementById("frm").addEventListener("submit",function(event){
    event.preventDefault();
});
//例２
document.getElementById("btn").addEventListener("click",function(event){
    event.preventDefault();
    event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。 
});
//例３
function func1(){
    return false;
}
//例４
function func2(){
    return false;
}

2413番目の投稿です／130 回表示されています．

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

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

投稿日時 2022年09月07 06:02日
最近よく読まれている記事（過去3ヶ月）

タグ

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