- ベストアンサー
<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様 ご返信、有難うございます。 参考にさせて頂きたいと思います。
関連するQ&A
- Javascriptで自動計算の合計の式でエラー
度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 ＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'> </td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>
- ベストアンサー
- JavaScript
- 複数formの使用について
お世話になります。 複数のFORMを入れ子で使用する方法はありますでしょうか？ 下記の記述だと外側のFORMが無効になってしまいます。 表示の順は以下のようにしたいです。 aaa.phpへPOST変数でデータを受け渡して使用します。 <form method="post" name="test1" action="aaa.php"> <input type="text" name="text01" id="textA" value="10"> <input type="text" name="text02 id="textA" value="20"> <input type="text" name="text03" id="textA" value="30"> (上のinputタグ数は動的に変わります) <form method="POST" name="test2" action="bbb.php"> <select name="select"> <option>selectA</option> <option>selectB</option> <option>selectC</option> <input type="submit" name ="read" value="読込"> </select> </form> <input type="submit" value="保存" > </form> 以上、よろしくお願いいたします。
- 締切済み
- PHP
- formを連続してピッタリと上下に並べたいのですが
DreamveaverでHTMLの編集をしております。 formを連続してピッタリと上下に並べたいのですが、 どうしてもformとformの間に隙間ができてしまいます。 これは仕方がないのでしょうか？ 具体的には <form name="form1" method="post" action=""> <select name="select1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type=submit value="order"> </form> <form name="form1" method="post" action=""> <select name="select2"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type=submit value="order"> </form> な感じなんですが。 どなたかアドバイスいただけると嬉しいです。
- ベストアンサー
- その他(ソフトウェア)
- form action ボタンの作り方
form actionでボタンを作っているのですが、 a href リンクではないためか、カーソルを合わせても矢印の表記が変わりません。 具体的には以下のようなコードになっています。 <FORM ACTION="#" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="aid" VALUE=" "> <INPUT TYPE="HIDDEN" NAME="pt" VALUE=" "> <INPUT TYPE="HIDDEN" NAME="iid" VALUE=" "> <center><INPUT style="width: 200px; padding: 15px 15px; font-size: 1.2em; background-color: #2e2e2e; color: #fff; border-style: none; border-radius: 5px; border-bottom: 3px solid #000;" TYPE="submit" NAME="submit" VALUE=" "></center> </FORM> カーソルを合わせたときに矢印表記が変わるようにするためには、どのようにコードを直せばいいでしょうか。
- 締切済み
- JavaScript
- 計算ができません
こんにちは 以下のようなプログラムを書きましたが、文字列として扱われるみたいです。 計算させるにはどのようにしたらよいでしょうか？ <html> <body> <form action="uektori.php" method="POST"> <input type="text" name="suuji1"> <select name="tasu"> <option value="+" selected>+</optinon> <option value="-" >-</optinon> <option value="*" >*</optinon> <option value="/" >/</optinon> </select> <input type="text" name="suuji2"> <input type="submit" value="送信"> <?php $a=($_POST['suuji1']); $b=($_POST['tasu']); $c=($_POST['suuji2']); $d="$a$b$c"; print "<br>"; print "$d"; ?> </body> </html> 宜しくお願い致します。
- ベストアンサー
- PHP
- VBScriptでHTMLのForm内のselectをコントロールするには？
javaScriptの例はたくさんあるので大よそは理解できたのですが、VBScriptでやるとうまく動きません。 document.form_name.id_name.options.length は効いているようです。 document.form_name.id_name.options[0].text document.form_name.id_name.options[0].value では値が入りません。 どうすれば動くでしょうか？ ----test.html---- <script language="VBScript"> <!-- Sub change() document.term.minute.options.length = 1 document.term.minute.options[0].text = "aa" document.term.minute.options[0].value = "aa" End Sub // --> </script> <html> <head><title>test</title></head> <body> <form name="term" METHOD=POST ACTION="report.asp"> 時: <select onChange="change" name="hour"> <option>23 <option>24 </select> <BR> 分: <select name="minute"> <option>00 <option>10 <option>20 <option>30 <option>40 <option>50 </select> <input type=submit name="confirm" value="レポート"> </form> </body> </html>
- ベストアンサー
- Visual Basic
- javascriptでコメントアウトができません
下記の様に 「/* ・・・・・ */」でコメントアウトしていますが、「/*」 「*/」も文字としてそのまま画面に表示され、非表示にしたいSELECTの枠も表示されてしまいます。 ご助言いただきたく宜しくお願い致します。 <body style="margin:0px; padding:0px;" onload="load()"> /* <body style="margin:0px; padding:0px;" onload="load()"> <FORM NAME=formMain > <SELECT id="categorySelect" NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(カテゴリーを選択してください) <OPTION VALUE="0">食事 <OPTION VALUE="1">病院 <OPTION VALUE="2">小売店 <OPTION VALUE="3">洋服 </SELECT> <SELECT id="subcategorySelect" NAME="city"> <OPTION VALUE="" SELECTED>(サブカテゴリーを選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> </FORM> */ <div> <input type="text" id="addressInput" size="40"/> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索へGO!"/> </div> <div><select id="locationSelect" style="width:25%;visibility:hidden"></select></div> <div id="map" style="width: 100%; height: 80%"></div> </body> </html>
- ベストアンサー
- JavaScript
- 「…は宣言されていません。」エラー回避
下記のようなスクリプトコードがあります。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript"> <!-- function pulldown() { sss.style.display="block"; --- (1) sss.style.left=event.x; sss.style.top=event.y; } function listsel() { var kintaicode = document.form1.kintaicode.options[document.form1.kintaicode.selectedIndex].value ; document.form1.an.value = kintaicode ; sss.style.display="none"; } //--> </script> <form name="form1"> <select id='sss' style='display:none;position:absolute' name='kintaicode' onchange='listsel()'> --- (2) <option value='1'>東京都</option> <option value='2'>神奈川県</option> </select> <table> <tr> <td onClick="pulldown()">A</td> </tr> <tr> <td onClick="pulldown()">B</td> </tr> </table> <input type='text' name='an'> </form> </body> </html> (2)のところでidを宣言しているのですが、実行させAをクリックすると「エラー：'sss'は宣言されていません。」と表示されます。 回避させる方法はありますか？ ちなみに、何をしたいのかというと、クリックしたところにプルダウンメニューを出したいのです。
- ベストアンサー
- JavaScript
- ページ内の幾つかのformを1つの送信で送りたい
初心者です。現在お店のホームページを作っているのですが、問合せのページでなかなかうまくいきません。すみませんがお知恵をお貸しください。 まず概要からいいますと、 商品上、複数の商品を一度に注文頂く事が多く、それを１ページにまとめたいと思っています。、 フォームは各商品を選べば、それに対応する項目が表示されます。 これを3つほどページ内に、同じ内容のものを設置し、1つの送信ボタンで送れないかと考えています。 そこで <script language="JavaScript" type="text/JavaScript"> <!-- function productA(sel) { var target = sel.value; var group = sel.form.getElementsByTagName("FIELDSET"); var i=0, fs; while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none"; } function productB(sel) { var target = sel.value; var group = sel.form.getElementsByTagName("FIELDSET"); var i=0, fs; while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none"; } //--> </script> として <boby> <form name="form1" method="post" action="cgi-bin/formmail.cgi"> 商品選択１<br> <select name="select1" onChange="productA(this)"> <option value="--" selected class="style9"> </option> <option value="A">A</option> <option value="B">B</option> </select> <fieldset id="A"> ■Ａの質問： <select name="q1A" size="1"> <option value="--" selected class="style9"> </option> <option value="q1A_1" >q1_1</option> <option value="q1A_2" >q1_2</option> </select> </form> <form name="form1" method="post" action="cgi-bin/formmail.cgi"> 商品選択2<br> <select name="select1" onChange="productB(this)"> <option value="--" selected class="style9"> </option> <option value="A">A</option> <option value="B">B</option> </select> <fieldset id="B"> ■Bの質問： <select name="q1B" size="1"> <option value="--" selected class="style9"> </option> <option value="q1B_1" >q1B_1</option> <option value="q1B_2" >q1B_2</option> </select> </form> <INPUT TYPE="submit" VALUE="送 信"> という状況です。 <form>を分けている理由は1つのformにしてしまうと、商品選択1を記載し、 次の商品選択２がある場合、そこで別の商品を選択すると、先ほど記載した、 商品選択１がリセットされ、項目も別の商品の内容になってしまいます。 その為、formを分けている状態です。この状態では勝手にリセットはされませんが、 ただし、送信できません・・・ なので、この状態で送信できる方法はありませんか？ もしくはformを１つにしてもいいので、その際各formで商品選択をしても、 リセットされない方法があれば教えてください。 本当に初心者なので、出来ない事をいっているのかもしれません。 大変お恥ずかしいご質問ですが、何卒ご教授頂ければ助かります。
- 締切済み
- JavaScript
- プルダウンメニューのvalue値取得について
お世話になります。 プルダウンメニューのvalue値を取得するのに以下のjavascriptとhtmlを作成しました。 3つのカテゴリプルダウンメニューのそれぞれのvalue値をflg_fileへ格納して、その値に対応したHTMLへジャンプという物なのですが、実際に動作させると、main_select02や03でvalue値を4、5と指定しているにもかかわらず、実際に動作させるとジャンプする先はlist_NO"1".htmlとなってしまっています。 これはvalue値がちゃんと取得できていないのか、それともプルダウンメニューは値を設定しても、上から自動的に１、２・・・となるのが仕様なのか、元々の作りがおかしいのか頭を悩ませています。 何がおかしいのか、ご教授頂けますようお願いします。 ■javascriptソース function flg_set(n) { switch(n){ case 1: flg_file = document.selectForm.main_select01.selectedIndex; break; case 2: flg_file = document.selectForm.main_select02.selectedIndex; break; case 3: flg_file = document.selectForm.main_select03.selectedIndex; break; } } function select_list() { parent.select.location.href = "list_NO"+[flg_file]+".html"; } ■HTMLソース <FORM NAME="selectForm"> <td width="10"> </td> <td width="120"><select name="main_select01" onChange="flg_set(1)" onFocus="this.blur()" style="font-size:12px; width:120px;"> <option value="0">▲カテゴリ(1)</option> <option value="1">┗ ページ(1)</option> <option value="2">┗ ページ(2)</option> <option value="3">┗ ページ(3)</option> </select></td> <td width="10"> </td> <td width="120"><select name="main_select02" onChange="flg_set(2)" onFocus="this.blur()" style="font-size:12px;width:120px;"> <option value="0">▲カテゴリ(2)</option> <option value="4">┗ ページ(4)</option> <option value="5">┗ ページ(5)</option> </select> </td> <td width="10"> </td> <td width="120"><select name="main_select03" onChange="flg_set(3)" onFocus="this.blur()" style="font-size:12px;width:120px;"> <option value="0">▲カテゴリ(3)</option> <option value="6" selected>┗ ページ(6)</option> </select> </td> <td width="10"> </td> <td width="100%"><input type="button" value="ページジャンプ" onClick="select_list();"> </td> </form>
- ベストアンサー
- JavaScript
お礼
fujillin様 早速のご回答、有難うございました。 今回の干渉は、JavaScript同士のものではなく、 HTMLデータをPerlで書かれたcgiで取得した後に、 加工表示する仕組みになっていたようです。 その際の、Form同士の干渉が起きていた様です。 ご教授頂いた通りに設定してみたところ、 両方の機能が問題なく作動することが、確認できました。 感謝致します。 有難うございました。