HTMLコーディングに関する質問です。テキストボックスにキーワードを入力して送信ボタン押下で値を送信させるformで、送信時にhiddenで値(value)も送信させるようにしました。これと同じようにhiddenの値を、今度は送信ボタン押下ではなく、リンクのクリックにより送信したいと思うのですが、どのように記述するのでしょうか?

【ボタン押下の場合のコード】---------------------------
<input type="hidden" name="act" value="keyword">
<input type="submit" value="送信">
-----------------------------------------------------------
目的は、各リンクごとに違うvalue="keyword"を持たせ、受け取り先で分岐(switch case)させ、画面表示結果を変えるためです。
ご指導よろしくお願い致します。

回答の条件
  • 1人2回まで
  • 登録:2009/12/17 01:26:59
  • 終了:2009/12/17 11:18:15

ベストアンサー

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012009/12/17 04:22:51

ポイント27pt

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


以下、ほんの一例。

<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件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012009/12/17 04:22:51ここでベストアンサー

ポイント27pt

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


以下、ほんの一例。

<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ボタンが押されたのかが、

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

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922009/12/17 05:20:34

ポイント27pt

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

リンクをクリックすると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>
id:pah00 No.3

pah00回答回数208ベストアンサー獲得回数52009/12/17 06:30:25

ポイント26pt

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

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません