出産前後の痔にはご注意!

入力フォームを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="OK">
</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="OK">
</FORM>

このQ&Aに関連する最新のQ&A

A 回答 (5件)

すいません。

MULTIPLEを見逃してました。
    • good
    • 0

失礼。

#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したとき値が取れませんね。
    • good
    • 0

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

^^;


少々邪道なやり方ですが、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>
    • good
    • 0

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


配列データを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="OK">
</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="OK">
</form>
    • good
    • 0

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;
}
}

こんな感じでやってみてはいかがでしょうか。
    • good
    • 0
この回答へのお礼

ありがとうございます。
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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q指定したデータを別ページフォームへ引き継ぎたい!

問合せフォームとJAVASCRIPTに関する質問です。

ECサイトで、商品の説明ページが複数あります。
商品問合せを受け付けるようになっているのですが、各説明ページから「問合せ」ボタンをクリックした際に、問合せフォームの指定したテキストエリアに指定した文字列が入力されている状態にしたいのです。

例えば、商品番号がABC001の場合…
・商品説明ページに「ABC001」というデータを記載(HIDDENなど?)
・商品説明ページの問合せボタンを押すと、フォームの「商品番号」テキストエリアに既に「ABC001」という値が入っている
・商品説明ページの「ABC001」を「DEF002」に変更すると、フォームに入る値も「DEF002」になる

これらの動作をCGI・PHPを使わずJAVASCRIPTで実現したいのですが、可能でしょうか。
ご回答、よろしくお願いいたします。

Aベストアンサー

#1です。複数の場合。
・商品紹介ページ
・・スクリプト(ページの文字コードがUnicodeならスクリプトも要らないんですが一応)
function sendQuery(uri,querys){
var query = new Array;
for(var x in querys) {
query.push(x+'='+encodeURI(querys[x]));
}
location.href=uri+'?'+query.join('&');
}
・・問い合わせボタン
<input type="button" value="問い合わせる"
onclick="sendQuery('問い合わせページのURL',{'CODE':'ABC001','NAME':'商品名'})">
↑IDと、値の組み合わせを好きなだけ


・問い合わせページ
・・スクリプト(bodyのonloadで呼び出す)
function setQuery(){
var querys = location.search.replace(/^\?/,'').split(/&/);
for(var i=0;querys[i];i++){
var query = querys[i].split('=');
document.getElementById(query[0]).value = decodeURI(query[1]);
}
}

・・値を受取るフォーム部品
<input type="hidden" id="CODE">
<input type="hidden" id="NAME">

#1です。複数の場合。
・商品紹介ページ
・・スクリプト(ページの文字コードがUnicodeならスクリプトも要らないんですが一応)
function sendQuery(uri,querys){
var query = new Array;
for(var x in querys) {
query.push(x+'='+encodeURI(querys[x]));
}
location.href=uri+'?'+query.join('&');
}
・・問い合わせボタン
<input type="button" value="問い合わせる"
onclick="sendQuery('問い合わせページのURL',{'CODE':'ABC001','NAME':'商品名'})">
↑IDと、値の組み合わせを好きなだけ


...続きを読む

Q前画面の値を引き継ぎたい。

初めまして。こんにちは。

早速ですが質問です。
もし判ったら教えて下さい。

画面:HTML + Javascript + PHP
内部処理:PHP + PostgreSQL

何がしたいのか、は、以下の通り。

1. リンク元 A画面に 幾つかリンクがある。
リンクの左側にはチェックボックスが付いている。

checkbox1 リンク B → B画面へ
checkbox2 リンク C → C画面へ

checkbox12 リンク M → M画面へ

2. A画面のリンクより、B画面が別ウィンドウにて表示
B画面には、チェックボックスが2~20コ付いている。
(ココからのリンクは無し)

B画面の内容は、
checkbox1 なんとか
checkbox2 かんとか

checkbox20 どーとか
となってて、checkboxのカタマリ。

3. A画面で checkbox1=True の場合、B画面のチェックボックスは全て
Trueになる。
また、A画面で checkbox1=Falseの場合、B画面のチェックボックス
は全てFalseになる。

というのを作りたいのです。

2画面開いて親子関係を作れば出来ます。
(確認済み)
が、2画面ではなく、1画面のみで上記のを作りたいんです。
A画面checkbox1 → B画面へ切替
とか
A画面checkbox1 → C画面へ切替
など。

色々やってみているんですが、うまくいきません。
ヨロシクお願い致します。

初めまして。こんにちは。

早速ですが質問です。
もし判ったら教えて下さい。

画面:HTML + Javascript + PHP
内部処理:PHP + PostgreSQL

何がしたいのか、は、以下の通り。

1. リンク元 A画面に 幾つかリンクがある。
リンクの左側にはチェックボックスが付いている。

checkbox1 リンク B → B画面へ
checkbox2 リンク C → C画面へ

checkbox12 リンク M → M画面へ

2. A画面のリンクより、B画面が別ウィンドウにて表示
B画面には、チェックボ...続きを読む

Aベストアンサー

画面間でデータを受け渡すのに「親子関係を作る」以外ですと、urlに含ませる方法とcookieを利用する方法があります。
詳しくは参考URLをご覧ください。

参考URL:http://www.axis.t.u-tokyo.ac.jp/%7Eshunak/ecmascript/communication.html

Qページ間で変数を保持したい

いつもお世話になっております。

今回はhtml間での値渡しについてお聞きしたいです。

現在ある二つのページA,Bを作成していまして、お互いにリンクが張ってあります。
AからBに行く時、Aの中にあるフォームの内容をBに表示したく外部jsファイルでグローバル変数に保持したりなどやってみましたがだめでした。

そもそもこのようなことをjavascriptのみでできるのでしょうか?
また可能ならばどのようにすればよいでしょうか?
ご教授お願いします。

Aベストアンサー

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</body>
</html>
------------------------------------------------------------
fB.html
------------------------------------------------------------
<html>
<head>
<script type="text/javascript">
<!--
function init() {
var arr=Array();

var ss = "";
var querys=location.search;
if(querys) {
var q = querys.replace(/^\?/,'').split('&');
for(i=0 ; i<q.length ; i++){
var pair=q[i].split('=');
// arr[pair[0]]=pair[1];
ss += pair[0] + " = " + pair[1] + "\n";
}
}
alert(ss);
}

window.onload= init;

//--></script>
</head>
<body>
</body>
</html>

<form action="fB.html" method="get">
とした場合の例ですが、

以下のコードを参考にしてみてください。
------------------------------------------------------------
fA.html
------------------------------------------------------------
<html>
<head>
</head>
<body>
<form action="fB.html" method="get">
<input type="text" name="t" value="textA"></input>
<input type="hidden" name="h" value="hiddenA">
<input type="submit">
</form>
</b...続きを読む

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Qsubmitとは?

超初心者レベルな質問なんですが、「submit」とはどういう意味でしょうか?
いろいろ調べたのですが、当たり前のように「サブミット」という言葉が使われていて、正確な意味がわかりません。
どうも、画面遷移とかイベント発生時に情報を送るというような感じなのかな?と思っているのですが、正しくは、どういう時に使用するものなんでしょうか。

Aベストアンサー

Javaというより、HTML、JavaScriptの言葉になります。
HTMLのformタグの内容をサーバに送信するボタンや送信する動作のことを言います。

最近、Javaを使用する場合は、Servletを使用したWebアプリを作る場合がほとんどなので、HTMLの内容がJavaのプログラムや参考書にでてきているんだと思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q入力したテキストボックスのデータを別Webページに渡したい

テキストボックスを持つ2つのWebページ(A.html,B.htmlとします)があります。
A.html内にB.htmlを開くJavaScript
(window.open("B.html");)を記述しています。

このスクリプトを実行したらB.htmlを新しいウィンドウで開きますが、
このBページ内のテキストボックスに文字データを入力して、
OKを押したら、A.htmlのテキストボックスにデータを表示させたいのです。
こういうことはJavaScriptだけでできないのですか?
cgi+JavaScriptを使わないとできないのでしょうか?

フレーム間の場合はできそうですが、ウィンドウ間と言うのは出きるのか
不明です。
ご存知の方、よろしくお願いします。

Aベストアンサー

説明のために、
A.html、B.htmlのフォーム、テキストボックスをそれぞれform_a、form_b、txtbox_a、txtbox_b
としますね。

B.html内で、テキストボックスの文字データは
document.form_b.txtbox_b.value
と表せます。同様に、A.html内で、テキストボックスの文字データは
document.form_a.txtbox_a.value
と表せます。
ここで、B.htmlはA.htmlから開いた子ウィンドウですので、B.htmlから見てA.htmlは「このウィンドウを開いたウィンドウ」と表すことができるため、
window.opener
でアクセスできます。
つまり、B.htmlで、JavaScriptで
window.opener.document.form_a.txtbox_a.value = document.form_b.txtbox_b.value ;
と表記すれば実現できるかと思います。

Q