サイトの一部システム変更
本サイトの一部システムを変更しました。一応予想される動作への対応はしておりますので大丈夫だとは思いますが、何か不審な動作がありましたら、お知らせいただけると幸いです。 変更したシステムは「コンタクトフォーム」です。
PHPとJavaScriptの力で制御していましたが、その配分は8:2ぐらい。ユーザーインターフェースとか、PHPのスクリプトの軽減とかいろいろ考えて、6:4で今回は作りました。
今までは入力画面(PHP)、入力内容の検査(JavaScript)、確認画面(PHP)、送信処理(PHP)とPHPは一本のファイルで、JavaScriptの外部ファイルを読み込んで作っていました。(過去の記事より)
しかし、JavaScriptのDOMの表現方法を使用すれば、送信処理以外はJavaScriptで出ると判断しました。いろいろ手法を考えて、試行錯誤を繰り返して2日ぐらい作りました。
簡単に説明します。
まずPHPでは入力画面、送信処理を記述します。
JavaScriptはPHPの入力画面のときのみに使用します。
JavaScriptではまず入力内容の検査。入力漏れがないか、メールアドレスが正しいかを判断し、正しければ次の処理にいきます。
次の処理は、確認画面の表示です。これはDOMの技術を使って書きました。もちろん内容の修正も同様です。「入力」→「確認」、「確認」→「入力」、「入力」→「検査」の3つの動きでの画面遷移はありません。ここが今回の変更のミソの部分です。今回のテーマだったのです。
最後はSUBMITボタンで送信するだけです。
しかし、入力画面のテキストフォームで間違えてEnterを押してしまうと、そのまま送信されてしまいます。そこでFORMタグにonSubmit=""というものをつけて、送信時の処理(入力検査)を指定します。送信時の処理(入力検査)は条件を満たしていないと次の処理に移行してくれないので、ひとまず大丈夫かと思われます。
ということで新しくなったコンタクトフォームはこちらです。
前からあった処理とか全部あわせても110行ぐらいのJavaScriptなんですが、そんなんに2日もかかってるなんて、まだまだですよね・・・