ラジオボタンとテキストボックスとプルダウンの連動

※データベースで登録したデータが※
画面上に表示されており、1件1件にラジオボタンがあります。

そのラジオボタンにチェックを入れると、
チェックが入っている1件のみのデータが、
(※ボタンを押さずに※)配置しているテキストボックスに反映されるようにしたいと考えています。

<JSP>------------------

名前 : [テキストボックス]
住所 : [テキストボックス]
誕生日 : [プルダウン]年[プルダウン]月[プルダウン]日

『登録ボタン(submit)』 (←サーブレットを呼ぶ)

◆結果◆
(上記に入力したデータが、データベースに登録され、そのデータが全件出力されている↓)

(<table>のイメージ)
　　名前　住所　　誕生日
○　AAA　福岡県　1989/12/24
○　BBB　東京都　1999/11/1
○　CCC　北海道　1980/1/2
↑
ラジオボタン


○　AAA　福岡県　1989/12/24
↑がチェックされたとする。


JSP上部の[テキストボックス]にそれぞれのデータが入る。(↓イメージ)
名前 : [AAA]
住所 : [福岡県]
誕生日 : [1989]年[12]月[24]日
『登録ボタン』

どなたかご教授お願いいたします。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2009/12/03 12:48

ざっとこんなかんじ

<script>
try{
document.addEventListener('click',function(e){func(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){func(e)});
}
function func(e){
var t　= (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="radio" && t.name=="selection"){
var p=t.parentNode;
while(p.nodeName!="TR"){
p=p.parentNode;
}
var n=p.getElementsByTagName("input");
for(var i=0;i<n.length;i++){
switch(n[i].name){
case "name":
document.getElementById("name").value=n[i].value;
break;
case "address":
document.getElementById("address").value=n[i].value;
break;
case "birth":
var b=n[i].value.split("/");
var y=document.getElementById("year");
for(var j=0;j<y.options.length;j++){
if(y.options[j].value==b[0]){
y.selectedIndex=j;
break;
}
}
var m=document.getElementById("month");
for(var j=0;j<m.options.length;j++){
if(m.options[j].value==b[1]){
m.selectedIndex=j;
break;
}
}
var d=document.getElementById("day");
for(var j=0;j<d.options.length;j++){
if(d.options[j].value==b[2]){
d.selectedIndex=j;
break;
}
}
break;
}
}
}
}
</script>
<form>
<table>
<tbody>
<tr>
<td>名前 :</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>住所 :</td>
<td><input type="text" name="addess" id="address"></td>
</tr>
<tr>
<td>誕生日 :</td>
<td>
<select name="year" id="year">
<option value="1900">1900</option>
・・・
<option value="2008">2008</option>
<option value="2009">2009</option>
</select>年
<select name="month" id="month">
<option value="1">01</option>
<option value="2">02</option>
・・・
<option value="12">12</option>
</select>月
<select name="day" id="day">
<option value="1">01</option>
<option value="2">02</option>
・・・
<option value="31">31</option>
</select>日
</td>
</tr>

</form>
<form>
<table>
<thead>
<tr>
<th></th>
<th>名前</th>
<th>住所</th>
<th>誕生日</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="selection"></td>
<td><input type="text" name="name" value="AAA"></td>
<td><input type="text" name="address" value="福岡県"></td>
<td><input type="text" name="birth" value="1989/12/24"></td>
</tr>
<tr>
<td><input type="radio" name="selection"></td>
<td><input type="text" name="name" value="BBB"></td>
<td><input type="text" name="address" value="東京都"></td>
<td><input type="text" name="birth" value="1999/11/1"></td>
</tr>
<tr>
<td><input type="radio" name="selection"></td>
<td><input type="text" name="name" value="CCC"></td>
<td><input type="text" name="address" value="北海道"></td>
<td><input type="text" name="birth" value="1980/1/2"></td>
</tr>
</tbody>
</table>
</form>

この回答へのお礼

ご回答ありがとうございました。
教えていただいた通りにやってみます。

お礼日時：2009/12/03 14:28

No.1 回答者： U-ta_m 回答日時： 2009/12/03 12:33

とりあえず、上記仕様に従ってスクリプトを書いてみて、

動作をテストしてみましょう。

で、うまく動かないとか希望と違うって部分について、
実際のソースコードを明示した上で、対策を検討しましょう。

何から何まで教えて欲しい…ってことなら、
お金を払ってプロに頼んだ方が効率的ですよ。

この回答へのお礼

ご指摘ありがとうございます。

画面や登録するサーブレット、DB接続も完成しておりまして、
題名にある処理を行いたいと思い、色々調べてはみたものの、
理解出来ずに悩まされていたので、質問させて頂いた次第です。

お礼日時：2009/12/03 14:31