iframeを使って画面遷移なしでフォーム送信する方法

やりたいこと

 ・PHPでページ遷移させずにフォーム送信をしたい

 フォーム送信等によってページ遷移すると、その段階でJavaScriptなどのスクリプトが読み込まれなおすため、ページ遷移後のスクリプトが実行されなくなってしまう。フォーム送信時のページ遷移をしなくできれば、そのようなことなく送信後のスクリプトも実行されつづける。

iframeを使う

 まず、やることはフォームを送信した後の結果表示を新しいページではなく、iframe要素にさせるということになります。

 もう少しだけ詳しく説明しますと、一般的なフォーム送信の際には、フォーム送信後にページ遷移で新しいページに飛ぶと思います。しかしそれをしないのが今回の目的です。そこで、新しいページの代わりにiframe内に表示させましょう、というのがここでやっていることになります。

 そのHTMLのコードがこちら。

 form要素のtarget属性の属性値とiframe要素のname属性の属性値を一緒にします。

 ただ、これだけだと通常通りにフォーム送信をした後にページ遷移をしてしまう(ページ遷移を止めるコードは特にない)ので、JavaScriptの力を借りる必要があります。

JSでページ遷移を止める

 JSでページ遷移を止めるには、以下のコードを書く必要があります。(jQueryを使っています)

 return falseがページ遷移を止める役を担っています。

 では、その上のコードは何の役割かといいますと、form.submit()はその名の通りフォーム送信しているわけです。

 え、HTMLでフォーム送信しているじゃんと思われた方がいるかと思います。通常であればもちろんそうなのですが、今回はreturn falseがある関係で、通常のフォーム送信が妨げられてしまいます。そこでreturn false実行前にJSの方でsubmitしてあげる必要があります。

 form[0].resetについて、通常と違って新しいページに遷移しないため、これがないとsubmitしたあともform内に入力内容がそのまま残ってしまいます。そこで、resetを実行することで正常に送れたと分かるようにしています。