人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLコーディングに関する質問です。テキストボックスにキーワードを入力して送信ボタン押下で値を送信させるformで、送信時にhiddenで値(value)も送信させるようにしました。これと同じようにhiddenの値を、今度は送信ボタン押下ではなく、リンクのクリックにより送信したいと思うのですが、どのように記述するのでしょうか?
【ボタン押下の場合のコード】---------------------------
<input type="hidden" name="act" value="keyword">
<input type="submit" value="送信">
-----------------------------------------------------------
目的は、各リンクごとに違うvalue="keyword"を持たせ、受け取り先で分岐(switch case)させ、画面表示結果を変えるためです。
ご指導よろしくお願い致します。

●質問者: YumiMars
●カテゴリ:ウェブ制作
✍キーワード:CASE HTML keyword switch キーワード
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kn1967
●27ポイント ベストアンサー

方法や組み合わせはいくつかあります。


以下、ほんの一例。

<html>
<head>
 <title>submitテスト</title>
 <script type="text/javascript">
 function aClick(v1,v2) {
 v1.parentNode.act.value = v2;
 v1.parentNode.submit();
 }
 </script>

</head>
<body>
 ボタンの例(ボタン1つにつきキーワードが1つならhiddenは不要になります。)
 <form name="f11" action="a.html" method="get">
 <input type="submit" name="keyword-A" value="Aボタン">
 <input type="submit" name="keyword-B" value="Bボタン">
 </form>
 リンクの例1(共通ルーチンを使う場合の例:リンクボタンが多い時に有効。使いまわしも効く)
 <form name="f21" action="a.html" method="get">
 <input type="hidden" name="act" value="">
 <a href="#" onclick="javascript:aClick(this, 'keyword-A');">リンクA</a>
 <a href="#" onclick="javascript:aClick(this, 'keyword-B');">リンクB</a>
 </form>
 リンクの例2(共通ルーチンを使わない場合の例:リンクボタンが少ない時に有効。)
 <form name="f22" action="a.html" method="get">
 <input type="hidden" name="act" value="">
 <a href="#" onclick="javascript:this.parentNode.act.value='keyword-A'; this.parentNode.submit();">リンクA</a>
 <a href="#" onclick="javascript:this.parentNode.act.value='keyword-B'; this.parentNode.submit();">リンクB</a>
 </form>
</body>
</html>

※上記をa.htmlというファイル名で保存して、ブラウザで開いて見てください。

postではなくgetにしてありますので、

ボタンを押したときに、何が送信されるのかが全てアドレス欄に出てきます。

※1リンクに付き、キーワードは1つと仮定しています。

※ボタンの例についてはactの値ではなく、どのsubmitボタンが押されたのかが、

キーワードそのものになってます。


2 ● Cherenkov
●27ポイント

こんな感じでどうでしょうか。

リンクをクリックするとaction関数が実行され、

action関数で引数の文字列をhiddenのvalueに書き換えます。

その後formのsubmitメソッドを実行して送信しています。

以下のソースはここに貼りつけて簡単に実行できます。

IE8,Firefox3.5で動作確認。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hatena demo</title>
<script type="text/javascript">
function action(key){
 var form = document.send_date;
 form.act.value = key;
 form.submit();
}
</script>
</head>
<body>
<a href="javascript:action('banana')">バナナ</a>
<a href="javascript:action('mikan')">みかん</a>
<a href="javascript:action('melon')">メロン</a>
<a href="javascript:action('ichigo')">いちご</a>
<form name="send_date" method="get" action="example.cgi" target="_blank">
<input type="hidden" name="act" value="keyword">
<input type="submit" value="送信">
</form>
</body>
</html>

3 ● pah00
●26ポイント

リンク文字をsubmitボタンとして利用する

http://www.openspc2.org/reibun/javascript/form/001/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ