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

HTMLに関しての質問です。

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

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

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

1162952297
●拡大する

●質問者: meesya
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS HTML JavaScript URL Web
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● b-wind
●20ポイント

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

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

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

window.document.form.submit()
◎質問者からの返答

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


2 ● ito-yu
●20ポイント

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

で、とすればPOSTできます

◎質問者からの返答

有難う御座います。

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


3 ● KirakiraHikaru
●20ポイント
<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の知識が皆無でして…。


4 ● graypenguin
●20ポイント

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

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に書いておけば一緒に渡せます。

◎質問者からの返答

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

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

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

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

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

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


5 ● KirakiraHikaru
●20ポイント

実際の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>

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

◎質問者からの返答

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

関連質問


●質問をもっと探す●



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