1162952297 HTMLに関しての質問です。


tdタグにjavascriptをつけ、イベントをonclickとonmouseover、onmouseoutで取得しています。onmouseover、onmouseoutでは、tdセル内の背景色と文字色を変更しているだけで、onclickで、指定のURLへ飛ばすようにしています。画像をご覧いただければ分かると思います。

社のwebページで商品のダウンロード販売を行おうということになり、外注にダウンロード販売用プログラムをお願いしたところ、そのプログラムは必要な情報をformで取得するようなコードになっていました。てっきり引数でデータを渡すものだと思っていましたので、onclickでlocationにて指定URLへ飛ばす事しか考えていませんでした…。

デザインの都合上、上記のtdタグボタンを外す事が出来ず、また外注さんもどうしてもformで情報を渡したいようです。なんとか上記のtdボタンで販売プログラムにデータを渡す事は出来ないでしょうか?逆に、formボタンをcssとかで修正し、上記のデザインにあわせる方法でもいいのですけど…。

回答の条件
  • 1人5回まで
  • 登録:2006/11/08 11:18:18
  • 終了:2006/11/15 11:20:04

回答(5件)

id:b-wind No.1

b-wind回答回数3344ベストアンサー獲得回数4402006/11/08 11:24:48

ポイント20pt

JavaScript から form の submit が呼べます。

これを使用すればボタンを配置する必要がなくなります。

http://www.tohoho-web.com/js/form.htm

window.document.form.submit()
id:meesya

有難う御座います。参照させていただきます。

2006/11/09 21:05:33
id:ito-yu No.2

ito-yu回答回数323ベストアンサー獲得回数142006/11/08 11:37:10

ポイント20pt

テーブルの外に、必要な情報を<input type="hidden">で持たせた<form name="formname" action="~" method="post">を作っておきます(表示されません)。

で、とすればPOSTできます

id:meesya

有難う御座います。

ただ、これだけですとボタンが必要になりませんか?

2006/11/09 21:52:58
id:KirakiraHikaru No.3

KirakiraHikaru回答回数354ベストアンサー獲得回数682006/11/08 11:43:53

ポイント20pt
<FORM name="myForm" method="POST" action="/program/test.php">

上記のようなフォームがある場合、

TDのonclickで下記のようにすると、フォームを送信できます。

locationにて指定URLへ飛ばすところを下記のように修正すればよいと思います。

※FORMにnameがついていない場合は、

document.myForm[0].submit();

のように、Formのn番目指定で実行できます。(0始まり)

document.myForm.submit();
id:meesya

有難う御座います。

なるほど、スクリプトでsubmitの代わりが出来るのは知りませんでした。ただ、当方javascriptの知識が皆無でして…。

2006/11/09 21:07:34
id:graypenguin No.4

graypenguin回答回数17ベストアンサー獲得回数02006/11/08 13:50:54

ポイント20pt

すいません。回答されている方とまったく同じですが、もうちょっと詳しく書いてみます。

1.FORMタグをBODYタグの内側のどこでもいいので書いておきます。

2.JavaScriptからアクセスしやすいように、FORMタグ自身のname属性に任意の名前を付けておきます。

(例えば form1 とか 又、method属性は post、action属性には移動先URL。)

3.FORMタグの内側に必要なだけのINPUTタグTYPE属性HIDDENを書きます。

(例えば input type="hidden" name="a" value="" VALUEは空でよい)

4.TDタグのonclickで関数を呼び出す場合の引数に上記aに渡す値を書いておく。

(例えば onclick="func('100')" といった感じです。)

5.JavaScriptでfuncを定義

(例えば function func(av) { document.form1.a.value=av; document.form1.submit(); } )

説明:

func関数で引数av を受け取り3.で書いたaの値としてセット(この場合100が入る)し、submitボタンを押したように振舞わせる。もちろん移動先へ渡す情報の数だけINPUTタグを増やし、func関数の引数を増やしてonclick関数で引数として渡しセットできます。固定の値の場合はINPUTタグのVALUEに書いておけば一緒に渡せます。

id:meesya

おお、大変分かりやすいです!

ただ、5.の定義に仕方が少々分かりません…。プログラムに渡したいデータは下のようなものなのですが、これを定義するにはどうすればいいのでしょうか…?

・type="hidden" name="code" value="文字列"

・type="hidden" name="size" value="文字列"

・type="hidden" name="back" value="指定URL"

・type="hidden" name="num" value="数値"

2006/11/09 21:11:25
id:KirakiraHikaru No.5

KirakiraHikaru回答回数354ベストアンサー獲得回数682006/11/09 23:37:25

ポイント20pt

実際のHTMLにすると下記のような感じです。

test.html

<html>
<head>
<title>testページ</title>
<script type="text/javascript"><!--
function func(av) {
	document.form1.btnnum.value=av;
	document.form1.submit();
}
//-->
</script>
</head>
<body>
<form name="form1" method="POST" action="送信先URL">
<table border="1" width="100">
<tr><td onClick="func('1')"> </td></tr>
<tr><td onClick="func('2')"> </td></tr>
<tr><td onClick="func('3')"> </td></tr>
</table>
<input type="hidden" name="code" value="文字列">
<input type="hidden" name="size" value="文字列">
<input type="hidden" name="back" value="指定URL">
<input type="hidden" name="num" value="数値">
<input type="hidden" name="btnnum" value="数値">
</form>
</body>

上記の場合は、ボタンが複数ある場合を想定して、

押されたボタンの番号を指定して呼び出して、

どのボタンが押下されたのかという情報もFORMのbtnnumに設定するようにしています。

ボタンがひとつの場合は、

function func(av) {
	document.form1.btnnum.value=av;
	document.form1.submit();
}

function func() {
	document.form1.submit();
}

として、

<tr><td onClick="func('1')"> </td></tr>

<tr><td onClick="func()"> </td></tr>

のように変更してください。

id:meesya

おお!そのものズバリの回答を有難う御座います!!

2006/11/13 00:17:31

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

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

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

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

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