<a href=**?***=***>をGET方式で

質問

<a href="abcd.cgi?mode1=1&mode2=2&mode3=3&mode4=4&mode5=5" >

としたら、このままではGET方式でデータの受け渡しが行われますよね？そうではなく、テキストリンクでPOST方式でのデータの受け渡しをしたい場合はどうすればいいですか？その際、リンクにマウスを乗せたときにブラウザ左下にリンク先のURLが出るのも避けたいです。（←無理・もしくは実装が面倒ならこれはいいです。）submitボタンは使わない方向でお願いします。

GET方式だと、履歴に****?mode1=1&mode2=2&mode3=3&…
と表示されてしまうようなので、<a href=....>リンクでなんとかそれを無くしたいという事情で質問しまた。

回答No.1

leaz024 · ベストアンサー

JavaScript を使えば可能です。

まず、POST 送信用のフォームを用意します。
必要なパラメータは INPUT タグの type="hidden" を使い、ここに全て書き出します。

<form name="Form1" action="abcd.cgi" method="post">
<input type="hidden" name="mode1" value="1">
<input type="hidden" name="mode2" value="2">
<input type="hidden" name="mode3" value="3">
<input type="hidden" name="mode4" value="4">
<input type="hidden" name="mode5" value="5">
</form>

リンクの方はこのフォームを送信するように記述します。
この時、リンクからフォームが操作できるように、フォームに名前（ここでは「Form1」）を付けておきます。

<a href="javascript:document.Form1.submit()">送信</a>

この方法ならリンクにマウスを乗せても、URLがステータスバーに表示されることもありません。

ただし、このままでは JavaScript 依存になってしまうので、万人向けにしたいなら送信用リンクタグは JavaScript が有効な時だけ表示し、無効な場合は送信ボタンを表示するようにします。

<form name="Form1" action="abcd.cgi" method="post" style="display:inline">
<input type="hidden" name="mode1" value="1">
　　　　：
<script type="text/javascript"><!--
document.writeln('<a href="javascript:document.Form1.submit()">送信</a>');
//--></script>
<noscript><input type="submit" value="送信"></noscript>
</form>

※フォームの中でリンクを表示するため、フォームがインライン表示されるようにスタイルシートを設定しています。

お礼

ありがとうございます＾＾
アドバイスを元に無事解決いたしました。
またよろしくおねがいします～