POSTで<a hrefを送る方法について

質問

POSTで
<a href=sample.cgi?md=aa&tx=zz～>hoge</a>
<a href=sample.cgi?md=bb&tx=yy～>hoge2</a>
<a href=sample.cgi?md=cc&tx=xx～>hoge3</a>
<a href=sample.cgi?md=dd&tx=ww～>hoge4</a>

を送る方法でjavascriptとの組み合わせで出来るのかな？
と思い検索したら

<form action="./sample.cgi" method="POST" name="post">
<input type="hidden" name="md" value="aa">
<input type="hidden" name="tx" value="zz">
　　　　　　　　　　：
<a href='#' onClick="document.post.submit();return false">hoge</a>
<form action="./sample.cgi" method="POST" name="post2">
<input type="hidden" name="md" value="bb">
<input type="hidden" name="tx" value="yy">
　　　　　　　　　　：
<a href='#' onClick="document.post2.submit();return false">hoge2</a>

このような手法が見つかりました
これだと行数が多くなり、なんとなくすっきりしません
どなたかいい解決方法を教えてください
よろしくお願いします

回答No.3

gimmick · ベストアンサー

JavaScriptオフの場合を考えないなら、このように書けます。

<!-- フォーム -->
<form action="sample.cgi" method="post" name="form1">
<input type="hidden" name="md">
<input type="hidden" name="tx">
</form>

<!-- スクリプト -->
<script type="text/javascript"><!--
function Post(md, tx) {
　　form1.md.value = md;
　　form1.tx.value = tx;
　　form1.submit();
}
//--></script>

<!-- リンク -->
<a href="javascript:Post('aa', 'zz')">hoge</a>
<a href="javascript:Post('bb', 'yy')">hoge2</a>

お礼

回答ありがとうございます
これは良いですね、すっきりしてますし
編集も楽そうです
JavaScriptオフの場合を考えていないので
(自分だけ使う予定なので)
まったく問題ありません

# JavaScriptを勉強しなければ・・・・・

回答No.2

MomijiPanda

単にテキストリンクに見せかけたいだけであれば、

　画像のようなテキスト
　　※テキストが記述された画像

を使うという手段があります。
これなら、

<FORM method="POST">

<INPUT type="image" src="text.gif" alt="リンク風Submit">
</FORM>

という感じでOKです。
JavaScript未対応のブラウザへの配慮もいりません。

＃ちょくちょく仕事で使ってます、この技（＾＾；

お礼

回答ありがとうございます
JavaScript未対応を気にせずやれる方法ですね
ただ、テキストリンクに見せかけたい
・・・ってわけではないので(^^;

今後の参考にさせていただきます

回答No.1

leaz024

FORMは１つにして、リンクの onClick で各 hidden の value を埋めればよいと思います。

# フォーム部
<form action="sample.cgi" method="post" name="post">
<input type="hidden" name="md">
<input type="hidden" name="tx">
　　：
</form>

# リンク部
<a href="sample.cgi?md=aa&tx=zz～" onClick="return myPost(this)">hoge</a>
<a href="sample.cgi?md=bb&tx=yy～" onClick="return myPost(this)">hoge2</a>
<a href="sample.cgi?md=cc&tx=xx～" onClick="return myPost(this)">hoge3</a>
<a href="sample.cgi?md=dd&tx=ww～" onClick="return myPost(this)">hoge4</a>

# 送信スクリプト
<script type="text/javascript"><!--
function myPost(a) {
　　var query = a.href.substring(a.href.indexOf("?")+1);
　　while (query) {
　　　　var p1 = query.indexOf("=");
　　　　var p2 = query.indexOf("&");
　　　　if (p2 == -1) p2 = query.length;
　　　　var key = query.substring(0, p1);
　　　　var val = query.substring(p1+1, p2);
　　　　document.post[key].value = val;
　　　　query = query.substring(p2+1);
　　}
　　document.post.submit();
　　return false;
}
//--></script>
※全角スペースを使っているので、コピーする際は半角スペースかタブに変換してください。

ちなみにこの方法だと、JavaScript がオフの環境では GET で（通常のリンクとして）飛びます。

JavaScript オフの人には実行させたくない場合、リンク内の
　　return myPost(this)
の this の部分を "md=aa&tx=zz～" のようにクエリ文字列にし、myPost 関数の方は
　　function myPost(query) {
として
　　var query = a.href.substring(a.href.indexOf("?")+1);
の部分を削除してください。

お礼

回答ありがとうございます
=と&を分割してやるんですね
なるほど、参考になりました