CGIフォームでのformタグとjavaでのformタグが重複して…

質問

フォーム(CGI)で入力するするときに、カテゴリと言う項目を作って、プルダウンでそれぞれ大カテゴリ・中カテゴリ・小カテゴリと分けてそのカテゴリにあった項目を吐き出したいのですが、
ネットで調べましたら、JavaScriptで表示ができるとの事で、試行錯誤の結果、ちゃんと表示できるようになったのですが、CGIフォーム内でのformタグとjavaでのformタグが重複してプルダウン内のカテゴリが表示しなくなりました…。

私のやりたい方法としては、「教えて！goo」での投稿カテゴリーの様な方法(http://oshiete1.goo.ne.jp/oshiete_new.php3)でできればベストと考えております。

解決方法としてはどの様な方法がありますか？
皆さんお忙しいでしょうけど、ご教授下さい。

回答No.5

leap_day · ベストアンサー

こんにちは

例えばsel1の『C』がsel2までしか項目がないとすると対応するsel3プルダウンのリストはmenuI4とmenuV4なので

menuI4 = [ [ ] , [""] ];
menuV4 = [ [ ] , [""] ];

として

プルダウンを作るfunctionで(if(l == "sel2")の部分）

for (i=0; i<menuI[n].length; i++) {
document.form.sel3.options[i] = new Option(menuI[n][i],menuV[n][i]);
if(menuI[n][i] == "") { document.form.sel3.style.visibility = "hidden"; }
}

とすればO.K.でした

お礼

解決しました！

leap_day様、ほんとにほんとにありがとうございました！！

感謝しています！

また機会があれば宜しくお願いします！！

回答No.4

leap_day

こんにちは

非常に申し訳ない（－－；）
http://okwave.jp/qa2824040.html
こちらで答えたものを転用していたので不具合が出ていました（＞＜）
menuI2がsel1で『A』を選択したときのsel3のプルダウン
menuI3がsel1で『B』を選択したときのsel3のプルダウン
menuI4がsel1で『C』を選択したときのsel3のプルダウン
となります

<SCRIPT language="JavaScript">
<!--
menuI1 = [ [ ] , ["sel1でAを選択時の項目","D","E"] , ["sel1でBを選択時の項目","F","G","H"] , ["sel1でCを選択時の項目","I"] ];
menuV1 = [ [ ] , ["","D","E"] , ["","F","G","H"] , ["","I"] ];
menuI2 = [ [ ] , ["sel2でDを選択時の項目","J","K"] , ["sel2でEを選択時の項目","L","M","N"] ];
menuV2 = [ [ ] , ["","J","K"] , ["","L","M","N"] ];
menuI3 = [ [ ] , ["sel2でFを選択時の項目","O","P"] , ["sel2でGを選択時の項目","Q"] , ["sel2でHを選択時の項目","R","S","T","U"] ];
menuV3 = [ [ ] , ["","O","P"] , ["","Q"] , ["","R","S","T","U"] ];
menuI4 = [ [ ] , ["sel2でIを選択時の項目","V","W","X"] ];
menuV4 = [ [ ] , ["","V","W","X"] ];

function set(n,l) {
if(l == "sel1") {
len = document.form.sel2.options.length;
for (i=len-1; i>=0; i--) {
document.form.sel2.options[i] = null;
}

document.form.sel2.style.visibility = "visible";
document.form.sel3.style.visibility = "hidden";

for (i=0; i<menuI1[n].length; i++) {
document.form.sel2.options[i] = new Option(menuI1[n][i],menuV1[n][i]);
}
if(n == "") { document.form.sel2.style.visibility = "hidden"; }

}
if(l == "sel2") {
len = document.form.sel3.options.length;
for (i=len-1; i>=0; i--) {
document.form.sel3.options[i] = null;
}

document.form.sel3.style.visibility = "visible";
if(document.form.sel1.selectedIndex == "1") { menuI = menuI2; menuV = menuV2; }
if(document.form.sel1.selectedIndex == "2") { menuI = menuI3; menuV = menuV3; }
if(document.form.sel1.selectedIndex == "3") { menuI = menuI4; menuV = menuV4; }

for (i=0; i<menuI[n].length; i++) {
document.form.sel3.options[i] = new Option(menuI[n][i],menuV[n][i]);
}
if(n == "") { document.form.sel3.style.visibility = "hidden"; }
}
}
// -->
</SCRIPT>

<form name="form" action="test0.cgi" method="post">

<select name="sel1" onChange="set(this.selectedIndex,'sel1')">
<option value="">セレクト1</option>
<option value="A">A</option>
<option vlaue="B">B</option>
<option vlaue="C">C</option>
</select>
<br>
<select name="sel2" style="visibility:hidden" onChange="set(this.selectedIndex,'sel2')"></select>
<br>
<select name="sel3" style="visibility:hidden"></select>
<br>
<input type="text" name="id" size="8">I D
<br>
<input type="password" name="pass" size="8">PASS
<br>
<input type="submit" value="submit" name="submit">
</form>

お礼

ちゃんと表示できる様になりました！！！
ほんとに感動しています！！！
ありがとうございます！！

しかし、
選択項目sel2まででsel3に項目がない様な場合、
sel3を非表示にしたいんですが、どうすればいいでしょうか？

何度も何度もすいません。
お願い致します！！

回答No.3

MAN_MA_RUI

JavaとJavaScriptは別物であり、後者の略称がJavaであるわけでもなく、また後者の略称としてJavaという言葉を用いるのも適切ではありません。Javaへ誤爆かますと大変ですよ^^;
http://e-words.jp/w/Java.html
http://e-words.jp/w/JavaScript.html

関係ないですが、質問者さんのために一応…。

お礼

そうですね…。
ちゃんとした書き込みをしなくてすいませんでした。
紛らわしいですよね…。反省。
これからは気を付けます。

わざわざ、回答してくれてありがとうございました！

回答No.2

leap_day

こんにちは

ちょっと違うかもしれないですけど・・・こんな感じですかね？

<SCRIPT language="JavaScript">
<!--
menuI1 = [ [ ] , ["セレクト2","D","E","F"] , ["セレクト2","G","H"] , ["セレクト2","I"] ];
menuV1 = [ [ ] , ["","D","E","F"] , ["","G","H"] , ["","I"] ];
menuI2 = [ [ ] , ["セレクト3","J","K"] , ["セレクト3","L","M","N"] ];
menuV2 = [ [ ] , ["","J","K"] , ["","L","M","N"] ];
menuI3 = [ [ ] , ["セレクト3","O","P"] , ["セレクト3","Q"] , ["セレクト3","R","S","T","U"] ];
menuV3 = [ [ ] , ["","O","P"] , ["","Q"] , ["","R","S","T","U"] ];

function set(n,l) {
if(l == "sel1") {
if(n ==0 ){
document.form.sel2.style.visibility = "hidden";
document.form.sel3.style.visibility = "hidden";
return false;
}
obj1 = document.form.sel1;
obj2 = document.form.sel2;
obj3 = document.form.sel1.value;
Item = menuI1;
Value = menuV1;
document.form.sel3.style.visibility = "hidden";
}
if(l == "sel2") {
if(n ==0 ){
document.form.sel3.style.visibility = "hidden";
return false;
}
obj1 = document.form.sel2;
obj2 = document.form.sel3;
obj3 = document.form.sel2.value;
Item = menuI2;
Value = menuV2;
if(document.form.sel1.selectedIndex == 2) {
Item = menuI3;
Value = menuV3;
}
}

len = obj2.options.length;
for (i=len-1; i>=0; i--) {
obj2.options[i] = null;
}
obj2.style.visibility = "visible";

for(i=0; i<Item[n].length; i++) {
obj2.options[i] = new Option(Item[n][i],Value[n][i]);
}
}
// -->
</SCRIPT>

<form name="form" action="test0.cgi" method="post">

<select name="sel1" onChange="set(this.selectedIndex,'sel1')">
<option value="">セレクト1</option>
<option value="A">A</option>
<option vlaue="B">B</option>
<option vlaue="C">C</option>
</select>
<br>
<select name="sel2" style="visibility:hidden" onChange="set(this.selectedIndex,'sel2')">
</select>
<br>
<select name="sel3" style="visibility:hidden">
<option></option>
</select>
<br>
<input type="text" name="id" size="8">I D
<br>
<input type="password" name="pass" size="8">PASS
<br>
<input type="submit" value="submit">

</form>

補足

なるほどですね！！
<form name="form" action="test0.cgi" method="post">
↑の様にすればいいんですね！！感動！！！！
早速<form>タグの中にnameを入れちゃったらきれいに動作しました！

　しかし、下のプルダウン項目の連動性が分からないんですがお教え下さいませんか？

menuI1 = [ [ ] , ["セレクト2","D","E","F"] , ["セレクト2","G","H"] , ["セレクト2","I"] ];
menuV1 = [ [ ] , ["","D","E","F"] , ["","G","H"] , ["","I"] ];
menuI2 = [ [ ] , ["セレクト3","J","K"] , ["セレクト3","L","M","N"] ];
menuV2 = [ [ ] , ["","J","K"] , ["","L","M","N"] ];
menuI3 = [ [ ] , ["セレクト3","O","P"] , ["セレクト3","Q"] , ["セレクト3","R","S","T","U"] ];
menuV3 = [ [ ] , ["","O","P"] , ["","Q"] , ["","R","S","T","U"] ];

初めのmenuI1とmenuV1は分かったんですが、2,3の項目を入れ替えようと思ったのですが、どうしても思い通りに表示してくれません…。

どうぞお願い致します！！

回答No.1

leap_day

こんにちは

javascriptでのform nameをCGIのform nameにしてやったらどんなですか？

<form name="***">
<select name="+++" onChange="set(this.selectedIndex)">
<option value="・・・">
・・・
</select>
・・・

この***をCGIのほうの<form>に

<form name="***" action="###.cgi" method="post">

のように・・・

お礼

早速の回答ありがとうございます！

私の場合、下記の様に２つのnameを使ってるんですけど、２通りやってみましたけどできませんでした…。

ＣＧＩのformタグには
<input type="####" name="abc" value="##">
<input type="####" name="123" value="###">
の様に２つのnameを使っています。