[Javascript] onSubmitを完璧にセットする方法

2020年12月1日

Javascript テクノロジー

t f B! P L

 


こんにちわ。

EFOの生みの親である、弓削田です。 先日、とあるサイトのお問い合わせフォームに、Javascriptを使ってEFO機能を搭載しようと思ったんですが、 submit制御について、EFO構築を思い起こしながら作業していたけど、なかなか思ったとおりにならず、ネットで調べてみたが、 onSubmitにreturnが必要な事が書かれているサイトばかりで、有意義な情報が書かれていなかったので、まとめる意味も含めて、 「webサイトのsubmit処理をjavascriptで行う方法」を記載しておきます。 これを理解できれば、EFOツールは簡単に作れるかもね。

よくあるトラブル

Code-sample
1 2 3 4 5 6 7 8 9 10 11 12
<!DOCTYPE html> <html> <head> <title>Submit</title> </head> <body> <form name="form1"> <input type="text" name="test"> <button id="submit_button">送信</button> </form> </body> </html>
このような送信ボタンがセットされていた場合で説明をします。 ※inputタグでも同じです。

成功例

この状態で、下記のようにformタグのonsubmitに対してイベントを設定すると送信ボタンを押した時に、送信されないように制御できます。
Code-sample
1 2 3 4 5
let element = document.forms.form1; element.onsubmit = function(){ console.log("submitしたよ"); return false; };

失敗例

でも、以下のように書いてしまうと、送信ボタンを押しても送信制御がされません。
Code-sample
1 2 3 4 5
let element = document.forms.form1; element.addEventListener("submit" , function(){ alert("送信したよ"); return false; });
 イベントの戻り値を無効にする「return false」がミソなのですが、 addEventListenaeでは、return falseを返してもsubmitが制御できないということがわかります。

成功例

どうしてもaddEventListenerを使いたい場合は、以下のように記述します。
Code-sample
1 2 3 4 5
let element = document.forms.form1; element.addEventListener("submit" , function(e){ alert("submitしたよ"); e.preventDefault(); } , false);

タグに直接記述する場合

簡単にsubmit制御をしたい場合はタグに直接以下のように書くことで制御することはできます。
Code-sample
1 2 3 4
<form name="form1" action="test.html" onsubmit="console.log('send');return false;"> ... </form>
 console.logは、処理が実行された確認の為に書いていますが、イベント属性に対して、キャンセルすることが可能になります。 もちろん、この記述後にjavascriptで上書きできてしまうので、サイト内での統制は必要になりますが・・・

submit要素を無くす手もある

入力をしている最中にreturnキーを押したタイミングで勝手に送信されてしまう場合がありますが、 これは、「input type="submit"」または、「button type="submit"」がセットされている場合に、returnのタイミングでsubmitが実行されてしまいます。 これを簡単に防ぎたい場合は、submitを持つ要素をform内に持たなければいいだけなんですね。 typeを「submit」ではなく、「button」にするだけでいいんですが、こうした際に、submitを実行してあげる処理をjavascriptで記述して上げる必要があります。 でも、勝手に送信されてしまうよりは、こっちの状態のほうがいいと思いますよ。 あと、この設定にすることで、onsubmit設定は不要になります。

機械操作でsubmitできてしまう

送信ボタンの制御ができても、今どきのブラウザは、デバッグコンソールを使って簡単にformタグの内容を送信できてしまいます。 これはブラウザ自動操作の「selenium」を使った場合や、javascriptで以下のように記述すると、実行できてしまいます。
Code-sample
1
document.forms.form1.submit();
 もちろん、これも制御しないといけません。 サイト内で意図的にデータ送信をする事を制御しなければ、EFOとは言えません。

解決方法

そして、以下のように書くことで、これも制御できます。
Code-sample
1 2 3 4
document.forms.form1.submit = function(e){ console.log("submitしたよ"); return false; };
 formタグには、onsubmitとは別に、submitプロパティというのも持っています。 これを実行すると、submitができてしまうので、ここも制御してあげなくてはいけません。 こんな感じでsubmitを制御することができると、EFOの本日である、送信フォームのバリデーションチェックをjavascriptで行うことで、無駄なエラーを表示されなくてユーザー離脱を防ぐことが可能になるでしょう。

最後に

今回サンプルで書いたプログラムをそのままにしておくと、送信ができないformになってしまうので、 ちゃんと制御をして、適宜問題なければ送信をしてあげる処理を加えてお使いください。

このブログを検索

ブログ アーカイブ

QooQ