リンクでPOSTを使う方法 action の先が別階層でもOK
リンクでフォームの値を渡すならGETの方が早いですが、URLに表示させたくなかったり、送信内容が多いとちょっと不便。POSTの方がいい場面もありますよね。
フォームの内容をリンクでPOSTする方法としてよく紹介されてるのが、a 要素のOnClickイベントを使ったもの。
<form name="form1" action="post.html" method="post">
<input type="hidden" name="sample" value="佐藤">
</form>
<a href="post.html" onclick="document.form1.submit();return false;">佐藤</a>これはお手軽でいいんですが１つ問題が。
それはPOSTのActionが同じ階層でないとうまくいかないこと。
で、考えてみた。
リンクで別ディレクトリにもPOSTできるようにする方法
やりたいことはリンクに見える文字のクリックでPOSTすること。ようするにクリックするものがリンクに見えればいい。
そう考えると、フォームのボタンをvalueと同じ内容にして、スタイルで整えてリンクに見せれば解決。
スタイル
<style>
.sample input[type="submit"]{
border:none;background:#FFF;text-decoration:underline;color:#00f;
}
.sample input:hover
{
cursor:pointer;
}
</style>
フォームHTML
<form class="sample" name="form1" action="/html-php-post-as-link" method="post">
<input name="name" type="hidden" value="佐藤">
<input type="submit" value="佐藤">
</form>ボーダーを消して、テキストに下線をつける。そしてマウスオーバーした時にリンクカーソルにしています。
これで別の階層のページへもPOSTできます。
スタイルを適用した結果
POSTリンクを横に並べる
せっかくリンクでPOSTできるようにしたのだから、並べて表示したい。そんなときはフォームをinline-block化すればOK。
<style>
.sample {display:inline-block;}
.sample input[type="submit"]{
border:none;background:#FFF;text-decoration:underline;color:#00f;
}
.sample input:hover {cursor:pointer;}
</style>
結果はこうなります。名前をクリックすると、選んだ名前が下の枠内に出てるはず。
ソース
<?php
if(!empty($_POST)){
$name = $_POST['sample_name'];
echo '選択された名前は'.$name.'です。<br>';}
echo '<br>';
$array=['佐藤','鈴木','田中'];
$i=0;
foreach($array as $value){
echo '<form class="sample" name="form'.$i.'" action="/html-php-post-as-link" method="post">
<input name="sample_name" type="hidden" value="'.$value.'"><input type="submit" value="'.$value.'">
</form>';
$i++;
}
?>ode>