リンクでPOSTを使う。別階層でも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>

これはお手軽でいいんですが1つ問題が。

それは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>

フォーム

<form class="sample" name="form1" action="/html-php-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-as-link" method="post">
<input name="sample_name" type="hidden" value="'.$value.'"><input type="submit" value="'.$value.'">
</form>';
$i++;
}
?>ode>

WordPressでPOSTとGETを使うときの注意点

スポンサーリンク
336
336

フォローする