javascript 選択した値のみを送信する方法

質問

現在、jspとservlet、javascriptで座席登録のシステムを作っているのですが。

たとえば、jsp上で、

□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□
□□□□□□□□□□□□□□□

と座席が表示されていた場合に、
押した座席の値をservletに送るという機能を作りたいのですが、
どうやって実装したらいいのかが、思いつきません。

座席は、データベースから値を受け取り、forでまわして表示しています。

選択した座席の値のみを送信したいのですが、どうやって実装したらいいと思いますか？

回答No.7

kozikoji

>その方法も考えましたけど、それだと、送った先ですべての
>チェックボックスの値を検索しないといけないのでやめました。
>（nullのデータは送りたくないので）
ちなみに、String[]配列には、チェックされたvalueしか入りませんよ。

回答No.6

SAYKA

>送った先ですべてのチェックボックスの値を検索しないといけない
普通はそういう形になるよ。
javascriptが使えるならチェック外れたらhiddenの値をdisabledして、チェック(選択)ボタン自体はフォームから外れてて無関係って構成にしたら近くなるよ。
後はjavascript使ってるんだから送信する値を自分で増減できるでしょ

回答No.5

kozikoji

kozikojiです。

>考えとしては、一度座席のボタンを押した後に、
>その押されたボタンの値を一時的に格納して、
>さらにつづけて座席のボタンが押された場合に、
>さっき一時的に格納した変数（配列）に値を追加して、
>送信ボタンが押された場合、値を送信したいと考えています。
チェックボックスで、簡単に実装できますよ。

<input type="checkbox" name="XXX" value="YYY">

チェックボックスを座席数分作成すると思いますが、その場合、
name属性を、全てのチェックボックスで同じにします。
value属性属性には、識別できる値(この場合は、座席番号)を入れます。

submit後、サーブレット側で、
request.getParameterValues("name属性で指定した文字列")
のようにメソッドを実行すると、チェックされたvalues属性を保持する、
String[]配列が取得できます。

PS:
Ajaxのライブラリには、カスタマイズされたかっこよいチェックボックスもあるので、
見た目にこだわるのであれば、使用をお勧めします。
すべてオープンソースなので、自分流にアレンジもできますよ。

補足

回答ありがとうございます。

その方法も考えましたけど、それだと、送った先ですべてのチェックボックスの値を検索しないといけないのでやめました。
（nullのデータは送りたくないので）

どちらかというと、チェックボックス自体の画像を変えたいです。

回答No.4

SAYKA

>ラジオボタンってよりかは、チェックボックスのイメージ
ならチェックボックスでやれば良いと思うよ
onかoffか。

チェックボックスじゃなくどうしてもボタンでやりたいんだって言うのならそれなりにめんどい処理をくっつけて再現する事になるけど原理はチェックボックス。

まずチェックボックスで作って、その後改造する方がやりやすいんじゃないかな。

回答No.3

kozikoji

>その場合だと、valueの中身がサーブレットから取ってきている
>ため、javascript内で代入できないんですよ。

例えば、
<a href="javascript: void(0);" onclick="sendseat( '座席番号' )">□</a>
の、'座席番号'の渡し方が分からないということでしょうか？

座席は、データベースから値を受け取り、forでまわして表示して
いるということなので、

'<%=変数名%>'

というのはどうでしょうか？

意図している回答かどうか分かりませんが...

補足

回答ありがとうございます。
> <a href="javascript: void(0);" onclick="sendseat( '座席番号' )">□</a>

その方法も考えたのですが、それだと、値をひとつしか渡せなくなってしまうと思い、やめたんです。

考えとしては、一度座席のボタンを押した後に、その押されたボタンの値を一時的に格納して、さらにつづけて座席のボタンが押された場合に、さっき一時的に格納した変数（配列）に値を追加して、送信ボタンが押された場合、値を送信したいと考えています。

ついさっきまでは、Ajaxを調べてたのですが、それらしいのが見つけられず、断念しました。

何かいい方法はないでしょうか？

よろしくお願いします

回答No.2

SAYKA

>valueの中身がサーブレットから取ってきているため、
>javascript内で代入できない
そんな事は無いはず。
なぜなら

jsp(鯖側処理)→(処理済の)html→クライアント(ユーザ)閲覧(javascript動作はここ)→ユーザ操作情報→サーバ

の筈だから。
即ちクライアント側のブラウザで表示できているなら値が設定されていれば必ずjavascriptで拾える。

一般的にはjsp側で並べる時に属性やvalueを「重複無しの値(ユニーク)」で埋め込んでonClickの時にthisで渡して値を調べるって形じゃないかな。(要するにNo1の言う、hiddenに「調べた値」を渡してsubmitって状態)
submitで渡したいと有るけどそれってつまり…ラジオボタン？だとするならラジオボタンの見てくれをcssで変更してしまうとか……

補足

回答ありがとうございます

>jsp(鯖側処理)→(処理済の)html→クライアント(ユーザ)閲覧(javascript動作はここ)→ユーザ操作情報→サーバ

確かに、考えてみれば可能そうなんですが、混乱して、どう考えていいのかわからなくなてきました＞＜//

ラジオボタンってよりかは、チェックボックスのイメージの方が高いです。

たとえば、座席が
□□□□□□
こうあったとした場合に、左から３番目を押した場合、
□□■□□□
こう変わり、さらに、続けて１番目を押した場合
■□■□□□
[送信]
となり、送信を押すとこの色が変わってる資格の値の中身をservletに飛ばしたいのです。

１つなら、javascriptで拾えそうなんですが、２つ以上となると拾えるのかな？って思ってしまい、質問しました。

言ってることが分かりにくいと思いますが、どうか、知恵を貸してください(笑)

回答No.1

chara0-m

どのような形で送信をしたいかがわかりませんが、
例えば、
座席を押したときに、座席の番号をhiddenに設定して送信という形などじゃ駄目でしょうか。

例）
function sendseat( number ){
document.hoge.seat_number.value = number;
}

<form action="./" method="POST" name="hoge">
<a href="javascript: void(0);" onclick="sendseat( '座席番号' )">□</a>
<input type="hidden" name="seat_number" value="">
<input type="submit" neme="" value="送信">
</form>

servletに詳しくないため、あまりいい意見じゃありませんが参考になれば＞＜

補足

回答ありがとうございます。

<座席を押したときに、座席の番号をhiddenに設定して送信という形<などじゃ駄目でしょうか。

その場合だと、valueの中身がサーブレットから取ってきているため、javascript内で代入できないんですよ。

補足：送信はsubmitでサーブレットに渡したいと思ってます。