iframeを使って画面遷移なしでフォーム送信する方法
Table of Contents
やりたいこと
・PHPでページ遷移させずにフォーム送信をしたい
フォーム送信等によってページ遷移すると、その段階でJavaScriptなどのスクリプトが読み込まれなおすため、ページ遷移後のスクリプトが実行されなくなってしまう。フォーム送信時のページ遷移をしなくできれば、そのようなことなく送信後のスクリプトも実行されつづける。
iframeを使う
まず、やることはフォームを送信した後の結果表示を新しいページではなく、iframe要素にさせるということになります。
もう少しだけ詳しく説明しますと、一般的なフォーム送信の際には、フォーム送信後にページ遷移で新しいページに飛ぶと思います。しかしそれをしないのが今回の目的です。そこで、新しいページの代わりにiframe内に表示させましょう、というのがここでやっていることになります。
そのHTMLのコードがこちら。
|
1 2 3 4 5 |
<form method="POST" action="hoge.php" target="fuga"> <button class="send">次の問題</button> </form> <iframe name="fuga" scrolling="no" frameborder="no"></iframe> |
form要素のtarget属性の属性値とiframe要素のname属性の属性値を一緒にします。
ただ、これだけだと通常通りにフォーム送信をした後にページ遷移をしてしまう（ページ遷移を止めるコードは特にない）ので、JavaScriptの力を借りる必要があります。
JSでページ遷移を止める
JSでページ遷移を止めるには、以下のコードを書く必要があります。（jQueryを使っています）
|
1 2 3 4 5 6 7 8 9 10 |
const form = $('#form'); $('.send').on('click', evt => { form.submit(); form[0].reset(); //任意の実行したい処理 return false; }) |
return falseがページ遷移を止める役を担っています。
では、その上のコードは何の役割かといいますと、form.submit()はその名の通りフォーム送信しているわけです。
え、HTMLでフォーム送信しているじゃんと思われた方がいるかと思います。通常であればもちろんそうなのですが、今回はreturn falseがある関係で、通常のフォーム送信が妨げられてしまいます。そこでreturn false実行前にJSの方でsubmitしてあげる必要があります。
form[0].resetについて、通常と違って新しいページに遷移しないため、これがないとsubmitしたあともform内に入力内容がそのまま残ってしまいます。そこで、resetを実行することで正常に送れたと分かるようにしています。
