以下の様に、セレクトボックスで選択した値を、ボタン押下でそれぞれのテキストボックスに一括で代入するスクリプトがあるのですが、この様式を使用するつもりであった場所は、他のJavaScriptの関数で定義したと干渉してしまい、動かない現象が起きてしまいました。このスクリプト中で、を使用しない形で、同じ動作をさせるには、どの様に修正したらよろしいでしょうか。ご教授、よろしくお願いします。要素 function my1() {a=document.form1.eiji.value; document.form1.eiji2.value=a;} function my2() {a=document.form2.moji.value; document.form2.moji2.value=a;} function my3() {a=document.form3.suuji.value; document.form3.suuji2.value=a;} 要素 ↓-選んで下さい- a b c ↓-選んで下さい- あいう ↓-選んで下さい- 1 2 3

<form>を使用しないことによる、干渉の回避策

解決済

質問者：juniper_se
質問日時：2010/02/18 23:59
回答数：2件

以下の様に、
セレクトボックスで選択した値を、
ボタン押下でそれぞれのテキストボックスに一括で代入する
スクリプトがあるのですが、この様式を使用するつもりであった場所は、他のJavaScriptの関数で定義した<form>と干渉してしまい、
動かない現象が起きてしまいました。
このスクリプト中で、<form>を使用しない形で、
同じ動作をさせるには、どの様に修正したらよろしいでしょうか。
ご教授、よろしくお願いします。

<HEAD>要素
function my1()
{a=document.form1.eiji.value;
document.form1.eiji2.value=a;}
function my2()
{a=document.form2.moji.value;
document.form2.moji2.value=a;}
function my3()
{a=document.form3.suuji.value;
document.form3.suuji2.value=a;}

<BODY>要素
<form name="form1">
<SELECT NAME = "eiji" style="width:150px;">
<OPTION VALUE = "">↓-選んで下さい-</OPTION>
<OPTION VALUE = "a">a</OPTION>
<OPTION VALUE = "b">b</OPTION>
<OPTION VALUE = "c">c</OPTION></SELECT>
<input type="text" name="eiji2" style="width:150px;">
</form>
<form name="form2">
<SELECT NAME = "moji" style="width:150px;">
<OPTION VALUE = "">↓-選んで下さい-</OPTION>
<OPTION VALUE = "あ">あ</OPTION>
<OPTION VALUE = "い">い</OPTION>
<OPTION VALUE = "う">う</OPTION></SELECT>
<input type="text" name="moji2" style="width:150px;">
</form>
<form name="form3">
<SELECT NAME = "suuji" style="width:150px;">
<OPTION VALUE = "">↓-選んで下さい-</OPTION>
<OPTION VALUE = "1">1</OPTION>
<OPTION VALUE = "2">2</OPTION>
<OPTION VALUE = "3">3</OPTION></SELECT>
<input type="text" name="suuji2" style="width:150px;">
</form>
<input type="button" value="入力" onClick="my1();my2();my3();">
　

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2010/02/19 09:52

＞他のJavaScriptの関数で定義した<form>と干渉してしまい、

どのような干渉が起きているのか不明ですが、単純にnameを変えるとかで回避できないのでしょうか？

ご提示のformはsubmitしてサーバに送信することはないみたいですが、全体でセットなら必ずしもform1、form2、from3に分ける必要もなく、1つのformに入れてもよさそうですね。
スクリプトも3つのfunctionに分けなくとも、まとめてしまってもよさそうに見えますが。

単にセレクトされた内容をコピー表示しているだけなので、どのような意味があるのか不明ですが、ご提示の用途にしか使わないのであれば、方法を変えてこんなのではダメでしょうか？

*　selectの直後にあるinputに値が反映されます。
<html>
<head><title>test</title>
<script type="text/javascript">
function test(sel) {
var e = sel.nextSibling;
while(e.nodeName!='INPUT') e = e.nextSibling;
e.value = sel.value;
}
</script>
</head>

<body>
<select name="eiji" style="width:150px;" onchange="test(this)">
<option value="">↓-選んで下さい-</option>
<option value = "a">a</option>
<option value = "b">b</option>
<option value = "c">c</option>
</select>
<input type="text" name="eiji2" style="width:150px;">
<br>
<select name="moji" style="width:150px;" onchange="test(this)">
<option value="">↓-選んで下さい-</option>
<option value="あ">あ</option>
<option value="い">い</option>
<option value="う">う</option>
</select>
<input type="text" name="moji2" style="width:150px;">
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin様

早速のご回答、有難うございました。
今回の干渉は、JavaScript同士のものではなく、
HTMLデータをPerlで書かれたcgiで取得した後に、
加工表示する仕組みになっていたようです。
その際の、Form同士の干渉が起きていた様です。
ご教授頂いた通りに設定してみたところ、
両方の機能が問題なく作動することが、確認できました。
感謝致します。
有難うございました。

通報する

お礼日時：2010/02/19 10:56

No.2

回答者： babu_baboo
回答日時：2010/02/19 10:17

みじかくなら^^;。

<input type="button" value="入力" onClick="setValue('eiji', 'moji', 'suuji')">

function setValue(){for(var o,c=0,e0,e1;o=arguments[c++];(e0=(document.getElementsByName(o)||[])[0])&&(e1=(document.getElementsByName(o+'2')||[])[0])&&(e1.value=e0.value));}

ここからしたは、むししてね。
//___________
きょうだいだけしか、あいせないのなんてきらいっ！
function getNextNode ( node, n) {
　if( n = node.firstChild ) return n;
　do if( n = node.nextSibling ) return n; while ( node = node.parentNode ); return null;
}
//なまえのきめうちってどうなのよ？！って、つっこみは、する～。^^;