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

2022.09.07

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

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

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

gitとかgithubとかgitlabを一通り勉強して

2019.06.02

Logging

gitとかgithubとかgitlabを一通り勉強して
githubやgitlabは遠隔でプロジェクト組んで開発する人以外には
必要ないような気がします。
確かにGUIでほぼ面倒な手順は消えてなくなります。
gitとは何かバージョン管理と言われます、
簡単に言えばファイルの世代管理です。
githubやgitlabは何か、リポジトリ管理です。
リポジトリ管理とはなにか、簡単に言えば
バージョン管理を集約したものを管理するものと思ってください。
リポジトリというものを管理したいディレクトリの配下に
置くことでその中のファイルはコマンド打てば
管理下に置くことが出来、世代管理が可能になるということ
ただ、それだけの事です。
ローカルで管理していたものをリモートに置く場合、
プッシュ=アップロード。ダウンロードしたい場合は
プルという事。管理したいファイルはアッドする。
コミットをした時点でファイル履歴となる等など…。
複数人で開発する場合は
グールプを作りその中にユーザを作成し
ローカルからリモートへ接続を行えば良い…
これぐらい覚えとけば良いかなと後はブランチ機能なども
ありますが、この機能を使用すると複雑怪奇になりそうな気がします。
 

著者名  @taoka_toshiaki

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

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

OFUSEで応援を送る

タグ

git, github, gitlab, GUI, アッド, アップロード, こと, コマンド, コミット, それだけ, ダウンロード, ディレクトリ, バージョン, ファイル, プッシュ, プル, プロジェクト, もの, リポジトリ, リモート, ローカル, 世代, , , , 勉強, 可能, 場合, 手順, , 管理, 簡単, 遠隔, 配下, 開発, 集約, 面倒,