HTMLに関しての質問です。
tdタグにjavascriptをつけ、イベントをonclickとonmouseover、onmouseoutで取得しています。onmouseover、onmouseoutでは、tdセル内の背景色と文字色を変更しているだけで、onclickで、指定のURLへ飛ばすようにしています。画像をご覧いただければ分かると思います。
社のwebページで商品のダウンロード販売を行おうということになり、外注にダウンロード販売用プログラムをお願いしたところ、そのプログラムは必要な情報をformで取得するようなコードになっていました。てっきり引数でデータを渡すものだと思っていましたので、onclickでlocationにて指定URLへ飛ばす事しか考えていませんでした…。
デザインの都合上、上記のtdタグボタンを外す事が出来ず、また外注さんもどうしてもformで情報を渡したいようです。なんとか上記のtdボタンで販売プログラムにデータを渡す事は出来ないでしょうか？逆に、formボタンをcssとかで修正し、上記のデザインにあわせる方法でもいいのですけど…。
No.1
3344
440
20pt
JavaScript から form の submit が呼べます。
これを使用すればボタンを配置する必要がなくなります。
http://www.tohoho-web.com/js/form.htm
window.document.form.submit()
No.2
32314
20pt
テーブルの外に、必要な情報を<input type="hidden">で持たせた<form name="formname" action="～" method="post">を作っておきます（表示されません）。
で、
有難う御座います。
ただ、これだけですとボタンが必要になりませんか？
No.3
35468
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();
有難う御座います。
なるほど、スクリプトでsubmitの代わりが出来るのは知りませんでした。ただ、当方javascriptの知識が皆無でして…。
No.4
170
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に書いておけば一緒に渡せます。
おお、大変分かりやすいです！
ただ、5.の定義に仕方が少々分かりません…。プログラムに渡したいデータは下のようなものなのですが、これを定義するにはどうすればいいのでしょうか…？
・type="hidden" name="code" value="文字列"
・type="hidden" name="size" value="文字列"
・type="hidden" name="back" value="指定URL"
・type="hidden" name="num" value="数値"
No.5
35468
20pt
実際のHTMLにすると下記のような感じです。
test.html
3
3
<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>
のように変更してください。
おお！そのものズバリの回答を有難う御座います！！
これ以上回答リクエストを送信することはできません。制限について
1
2
1
1
1
有難う御座います。参照させていただきます。