meesya回答ポイント 100pt

HTMLに関しての質問です。

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

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

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

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

b-wind2006/11/08 11:24:48
満足20pt
JavaScript から form の submit が呼べます。

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

http://www.tohoho-web.com/js/form.htm
```
window.document.form.submit()
```
スター
- meesya 2006/11/09 21:05:33
  
  有難う御座います。参照させていただきます。

ito-yu2006/11/08 11:37:10
満足20pt

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

で、とすればPOSTできます

スター

meesya 2006/11/09 21:52:58

有難う御座います。

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

KirakiraHikaru2006/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();

スター

meesya 2006/11/09 21:07:34

有難う御座います。

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

graypenguin2006/11/08 13:50:54
満足20pt

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

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

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

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

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

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

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

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

５．JavaScriptでfuncを定義

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

説明：

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

スター

meesya 2006/11/09 21:11:25

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

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

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

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

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

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

KirakiraHikaru2006/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>

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

スター

meesya 2006/11/13 00:17:31

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

HTMLに関しての質問です。

みんなの回答

b-wind2006/11/08 11:24:48
満足20pt

meesya 2006/11/09 21:05:33

ito-yu2006/11/08 11:37:10
満足20pt

meesya 2006/11/09 21:52:58

KirakiraHikaru2006/11/08 11:43:53
満足20pt

meesya 2006/11/09 21:07:34

graypenguin2006/11/08 13:50:54
満足20pt

meesya 2006/11/09 21:11:25

KirakiraHikaru2006/11/09 23:37:25
満足20pt

meesya 2006/11/13 00:17:31

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

HTMLに関しての質問です。

みんなの回答

b-wind2006/11/08 11:24:48 満足20pt

meesya 2006/11/09 21:05:33

ito-yu2006/11/08 11:37:10 満足20pt

meesya 2006/11/09 21:52:58

KirakiraHikaru2006/11/08 11:43:53 満足20pt

meesya 2006/11/09 21:07:34

graypenguin2006/11/08 13:50:54 満足20pt

meesya 2006/11/09 21:11:25

KirakiraHikaru2006/11/09 23:37:25 満足20pt

meesya 2006/11/13 00:17:31

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

b-wind2006/11/08 11:24:48
満足20pt

ito-yu2006/11/08 11:37:10
満足20pt

KirakiraHikaru2006/11/08 11:43:53
満足20pt

graypenguin2006/11/08 13:50:54
満足20pt

KirakiraHikaru2006/11/09 23:37:25
満足20pt