他フォームの入力データの引継ぎ

入力フォームを2つ用意し
第1フォームの入力欄の1部を第2フォームの入力欄のデータとして
submitさせたいのですが
<INPUT TYPE="radio">と<SELECT>の入力値がうまく引継げません。
下記のようなJavaスクリプトとHTMLなのですが
Javaスクリプトで「value」を＝にすると
「radio」のほうはundefin、
「SELECT」で複数選択した場合は、一つ目の選択肢のみしか
引継げませんでした。
Javaスクリプトでうまくいく方法がありましたら
ご教示ください。

----Javaスクリプト--------------------------------
function aaa() {
document.FROM2.A.value = document.FROM1.A.value;
document.FROM2.B.value = document.FROM1.B.value;
document.FROM2.C.value = document.FROM1.C.value;
document.FROM2.submit();
}

----HTML--------------------------------
<FORM NAME="FROM1" METHOD="POST" ACTION="***">
<SELECT NAME="A" MULTIPLE>
<OPTION VALUE="aa">セレクトa
<OPTION VALUE="bb">セレクトb
<OPTION VALUE="cc">セレクトc
<OPTION VALUE="dd">セレクトd
</SELECT>

<INPUT TYPE="radio" NAME="B" VALUE="" CHECKED>選択なし
<INPUT TYPE="radio" NAME="B" VALUE="1" CHECKED>ラジオ1
<INPUT TYPE="radio" NAME="B" VALUE="2" CHECKED>ラジオ2

<INPUT TYPE="text" NAME="C">
<INPUT TYPE="text" NAME="D">
<INPUT TYPE="submit" NAME="OK_BTN" VALUE="ＯＫ">
</FORM>

<FORM NAME="FROM2" METHOD="POST" ACTION="***">
<INPUT TYPE="hidden" NAME="A">
<INPUT TYPE="hidden" NAME="B">
<INPUT TYPE="hidden" NAME="C">
<INPUT type="button" onClick="JavaScript:aaa();" name="OK_BTN" value="ＯＫ">
</FORM>

No.5 回答者： mizuno3 回答日時： 2007/11/09 00:12

すいません。

MULTIPLEを見逃してました。

No.4 回答者： wp_ 回答日時： 2007/11/08 19:31

失礼。

#3です
下から6行目で書き漏れ

f2.options[ii] = new Option("test",f1.options[ii].value);

↓

f2.options[ii] = new Option("test",f1.options[ii].value);
f2.options[ii].selected = true;

selectedがtrueでないとpostしたとき値が取れませんね。

No.3 回答者： wp_ 回答日時： 2007/11/08 19:18

僕もいろいろと突っ込みたいのですが全部スルーすることにします。

^^;


少々邪道なやり方ですが、cssでdisplay:noneを指定すると表示されなくなることを利用して
擬似的なhiddenを作成することが出来ます。対応していないブラウザだと不恰好になりますが。


<form id="FROM1" action="" method="POST">
　<select id='field1' size=10 multiple>
　<option value=1>test1</option>
　<option value=2>test2</option>
　<option value=3>test3</option>
　</select>
</form>
<form id="FROM2" action="" method="POST">
　<div style="display:none">
　　<select id='field2' multiple></select>
　</div>
</form>

<input type='button' value='up' onclick='on()' />


<script type='text/javascript'><!--
function on()
{
　var f1 = document.getElementById('field1');
　var f2 = document.getElementById('field2');
　for(ii=0;ii<f1.length;ii++) {
　　if(f1.options[ii].selected) {
　　　f2.options[ii] = new Option("mogemoge",f1.options[ii].value);
　　}
　}
　document.getElementById('FROM2').submit();
}
// --></script>

No.2 回答者： yambejp 回答日時： 2007/11/08 11:56

つっこみどころが多いので細かく解説するのはやめますが、

配列データをtextに落とすのですから仕様をきめなおさないといけません。
たとえばカンマ区切りにするなら以下のようにしてください
（hiddenだとデバッグしにくいのでtextにしてあります。実際にはhiddenでも動きます）

<script>
function aaa(f2) {
var f1=document.getElementById("FROM1");
var f1a=f1.A;
f2.A.value="";
for(var i=0;i<f1a.length;i++){
if(f1a[i].selected) f2.A.value+=(f2.A.value==""?"":",")+f1a[i].value;
}
var f1b=f1.B;
f2.B.value ="";
for(var i=0;i<f1b.length;i++){
if(f1b[i].checked) f2.B.value+=(f2.B.value==""?"":",")+f1b[i].value;
}

f2.C.value = f1.C.value;
return true;
}
</script>

<form id="FROM1" method="post">
<select name="A" multiple>
<option value="aa">セレクトa</option>
<option value="bb">セレクトb</option>
<option value="cc">セレクトc</option>
<option value="dd">セレクトd</option>
</select>

<input type="radio" name="B" value="" checked>選択なし
<input type="radio" name="B" value="1" checked>ラジオ1
<input type="radio" name="B" value="2" checked>ラジオ2

<input type="text" name="C">
<input type="submit" value="ＯＫ">
</form>

<form id="FROM2" onSubmit="return aaa(this);">
<input type="text" name="A">
<input type="text" name="B">
<input type="text" name="C">
<input type="submit" value="ＯＫ">
</form>

No.1 回答者： mizuno3 回答日時： 2007/11/08 01:51

AとBはどちらも配列になっています。

Aの取得は以下。

var a = '選ばれてない';
if (document.FROM1.A.selectedIndex > -1) {
a = document.FROM1.A.options[document.FROM1.A.selectedIndex].value;
}

Bの取得は以下。
var b = '選ばれてない';
var n = document.FROM1.B.length;
for (var i=0;i<n;i++) {
if (document.FROM1.B[i].checked) {
var b = document.FROM1.B[i].value;
}
}

こんな感じでやってみてはいかがでしょうか。

この回答へのお礼

ありがとうございます。
radioのほうは、うまく入力値をとることができました。

SELECTのほうは、やはり2つ以上選択すると
1つ目の選択した値しかとることが出来ませんでした。
radioと同じように下記のようにしてみましたが
エラーとなりました。
（FROM2のほうが「TYPE="hidden"」だからと思います。 ）
他に何か策はありますでしょうか。。。

var n = document.FROM1.A.length;
for (var i=0;i<n;i++) {
if (document.FROM1.A[i].selected) {
document.FROM2.A[i].value = document.FROM1.A[i].value;
}
}

お礼日時：2007/11/08 02:49