Logging

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;
}







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

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

    関連記事

    1. Logging

      ということは?どういう意味ですか?

      説明するのが難しい、特にとっさの説明は難しいのです。文章にするとま…

    2. illuminated grey pendant lamps

      Logging

      文字数カウントは奥が深いよ。日本語より𓅇エジプト😇 #javascript #code #プログラミ…

      おはようございます、先日(日曜日のこと)は久しぶりに本屋さん巡りして…

    3. antique antique globe antique shop antique store

      Logging

      南海トラフ巨大地震のドラマだけを観た。#高知県は

      おはようございます、南海トラフ巨大地震のドラマだけを観ました…

    4. Logging

      ニガミ17才はいつもいい意味でトンデルヨネ!

      ニガミ17才はいつもいい意味でトンデルヨネ!この人達を知ったの…

    5. closeup photo of computer keyboard

      Logging

      二度目の挑戦🔥。英字配列キーボードに置き換え。

      おはようございます、先日、英字配列キーボードに置き換えました、これは…

    6. Logging

      金文書体を購入する前に

      金文書体を購入する前に、フリーでフォントがないのかぐぐってみたらこの…

    2022年9月
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  

    カテゴリー

    アーカイブ

    PAGE TOP