- ベストアンサー
<form>を使用しないことによる、干渉の回避策
以下の様に、 セレクトボックスで選択した値を、 ボタン押下でそれぞれのテキストボックスに一括で代入する スクリプトがあるのですが、この様式を使用するつもりであった場所は、他の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();">
- juniper_se
- お礼率44% (11/25)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞他の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>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
みじかくなら^^;。 <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; } //なまえのきめうちってどうなのよ？！って、つっこみは、する～。^^;
お礼
babu_baboo様 ご返信、有難うございます。 参考にさせて頂きたいと思います。
お礼
fujillin様 早速のご回答、有難うございました。 今回の干渉は、JavaScript同士のものではなく、 HTMLデータをPerlで書かれたcgiで取得した後に、 加工表示する仕組みになっていたようです。 その際の、Form同士の干渉が起きていた様です。 ご教授頂いた通りに設定してみたところ、 両方の機能が問題なく作動することが、確認できました。 感謝致します。 有難うございました。