おはようございます、台風一過が去りましたね😌。
さて、今日は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;
}
