画面遷移せずにformを送信する方法
formを送信する際にaction属性を自身に返す場合、入力した内容はそのまま表示させておきたいですよね。
<form action="" method="post">
<input type="text" name="name">
<input type="text" name="address">
<input type="submit" value="保存">
</form>
上記の例はaction属性が空なので自身に遷移します。
phpのみで入力した値を保持したい場合はinputのvalue属性にPOSTで渡ってきた情報を出力してやる必要があります。
<?php
if(isset($_POST["save"])){
echo "<script>alert('保存しました')</script>";
$name = htmlspecialchars($_POST["name"], ENT_QUOTES);
$address = htmlspecialchars($_POST["address"], ENT_QUOTES);
}
?>
<form action="" method="post">
<input type="text" name="name" value="<?= $name;?>">
<input type="text" name="address" value="<?= $address;?>">
<input type="submit" name="save" value="保存">
</form>
今回の例は入力項目が2つしか無いので作業は少ないですが、入力項目が１００個とかになればめんどくささは半端ないです。
そこで私がめんどくささを解消するために使っている方法は以下の通りです。
<?php
if(isset($_POST["save"])){
echo "<script>alert('保存しました')</script>";
exit;
}
?>
<iframe id="iframe" name="iframe" style="display: none;"></iframe>
<form action="" method="post" target="iframe">
<input type="text" name="name" value="">
<input type="text" name="address" value="">
<input type="submit" name="save" value="保存">
</form>
formの送信先をiframeタグに設定しcssでiframeタグの表示を隠しています。
iframeタグについてはこちら
HTML のインラインフレーム要素 <iframe> は、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe
<form action="" method="post" target="iframe">
formタグのtarget属性にiframタグのname属性の値を入れてあげます。
そうするとiframタグの中のHTMLがaction属性に指定したPathで読み込まれます。
iframタグの中身が遷移したとしても本体のHTMLは何も変化しませんので、結果として画面遷移せずにformが送信できるといったからくりです。
遷移した先ではphpのプログラムだけ実行したいので余計なHTMLを読み込まないように
exit;
としてプログラムを終了させています。
画面が遷移しない！！ということは入力した内容もそのままですので、わざわざphpでPOSTの値を取得してechoで出力するといった手間が省けます。
これでめんどくさい作業も省略できますし、表示ミスといった不具合も未然に防ぐことができますね♪