Javascript(DOM) で入力チェックをし、php にデータを送る

私はお問い合わせフォームやら自作 CMS やらで、javascript(DOM) で入力チェックを行うようにしている。php でやると画面遷移が必要になるし、作るのも正直手間がかかる。その点 DOM でやってしまうと簡単にできるし、画面遷移も発生しない。

さらに、チェック済みのデータを php に送って、お問い合わせフォームならメールを送信したり、CMS ならデータをファイルに書き込むという流れにしている。その際に iframe を使うのだが、直接 iframe の src に php の url を書き、? 以降にデータを持たせ、php ではそれを $_GET で受け取ることもできるが、スマートではないし、CMS となると渡すデータが多いため、url の最大長も気になるところ。

なので、以下のようにしている。

◆html 側

<form id="sendForm" action="javascript:return false;" onsubmit="javascript:saveThis();" method="post" target="php">
  input や select などのフォーム部品を書く
  <iframe src="" name="php" width="1" height="1"></iframe>
  <input type="submit" value="保存" />
</form>

◆javascript 側

saveThis() {
// チェックの処理を書く
// チェックをパスした場合に下記を実行
  document.getElementById("sendForm").action = "php の url";
}

これで、見た目上画面遷移なく、DOM で入力チェックをし、php で処理を実行できる。php の最後にアラートでも出せば判りやすいのではないだろうか。form の action に予め php の url を書いてしまうと、チェック結果がなんであろうと送信してしまうので、初期値は javascript:return false; にしておく。

echo "<script type='text/javascript'>";
echo "alert('処理が終了しました。');";
echo "</script>";