フォームの制御について
- チェックボックスの値とテキストフォームの値を結合する方法について説明します。
- テキストエリアの値がNullの場合に値が出力されないようにする方法について説明します。
- JavaScriptを使用してフォームの制御を行います。
- ベストアンサー
フォームの制御について
下記２つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' + textarea01 + '\n'; ソース： ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' + textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他：" id="checkbox 1-1" > <label for="checkbox 1-1">その他：</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3：</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1" STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- yumi007
- お礼率70% (12/17)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
いきなりなんでもかんでも実装しようとせずに 一つ一つ改善した方がいいですよ 凡ミスが多すぎてなんと言っていいか ざっくりこんな感じで・・・ <script> function textoutput(formObj) { var checkbox01 = formObj.elements["C01"]; var checkbox02 = formObj.elements["C02"]; var text01 = formObj.elements["text01"].value; var textarea01 = formObj.elements["textarea01"].value; var text = 'アンケート結果' + '\n'; for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i].value; text += '\n'; } } if(checkbox02.checked === true ) { text += text01; text += '\n'; } if(textarea01!==""){ text += '回答3：' + textarea01 + '\n'; } formObj.elements["output"].value=text; } </script> <strong>アンケートフォーム</strong> <br> <br> <form> <strong>・回答結果</strong> <br> <table border="0"> <td colspan="2" valign="middle" width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox1-1"> <label for="checkbox1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox1-2"> <label for="checkbox1-2">回答2</label> </td> <tr> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他：" id="checkbox2-1"> <label for="checkbox2-1">その他：</label> </td> <td valign="middle"> <input type="text "name="text01" size="60"><br> </td> </table> <strong>・回答3：</strong><br> <textarea name="textarea01" cols="60" rows="1"></textarea><br> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <input type="reset" value="リセット"><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form>
関連するQ&A
- フォームに入力した値の制御について
フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[text]と[textarea]に入力をしてもらいたい 入力値のサンプルを表示されるようにしました。 カーソルを[text]と[textarea]に入れると、 入力値のサンプルの表示が消えて入力出来るようにしました。 【やりたい事】 [text]と[textarea]に入力をしてもらった値を、 最終的にtextareaに出力させるようになっています。 何も入力せず出力をさせると、サンプル値は出力されてしまいます。 [text]と[textarea]に入力をした値のみ出力させることは可能でしょうか。 ご教授頂ければと思います。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> var text01 = formObj.elements["text01"].value; <!--text02を取得--> var text02 = formObj.elements["text02"].value; <!--textarea01を取得--> var textarea01 = formObj.elements["textarea01"].value; <!--textarea02を取得--> var textarea02 = formObj.elements["textarea02"].value; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1：' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問２：' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2：</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3：</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ３入力してください </textarea><br> <strong>・諮問4：</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの値取得後の加工について
下記のJavaScriptをどうように修正をすれば良いか、 ご教授いただければと思い投稿させて頂きました。 どうぞよろしくお願い申し上げます。 出力ボタンをクリックすると現状では下記のようになります。 【現状】 ------------------------------------------------------ アンケート結果 →回答1 →回答2 希望としては取得した値を下記のように加工をして出力したいと思います。 【希望】 ------------------------------------------------------ アンケート結果 →回答1、回答2 【ソース】 ------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script> function textoutput(formObj) { var checkbox01 = formObj.elements["C01"]; var text = 'アンケート結果' + '\n'; for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i].value; text += '\n'; } } formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・回答結果</strong><br> <table border="0"> <td colspan="2" valign="middle" width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox1-1"> <label for="checkbox1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox1-2"> <label for="checkbox1-2">回答2</label> </td> <table> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- ラジオボタンが未選択時の制御方法について
たびたびお世話になっております。 Webフォームを思考策後しながら作成しています。 下記のラジオボタン1 とラジオボタン3 は選択して、 ラジオボタン2 は選択せずに出力する下記のように、 ハヌけした書式で出力されます。 ハヌけしないように出力させる方法はありますでしょうか？ ご教授をお願いいたします。 出力結果： ------------------------------------------------------------------------------- 【ラジオボタン1】：回答1 【ラジオボタン3】：回答1 ソース： ------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- radioを取得// --> var radio01 = formObj.A01; <!-- radioを取得// --> var radio02 = formObj.A02; <!-- radioを取得// --> var radio03 = formObj.A03; <!-- textを結合用の変数として準備// --> <!-- A01の中から選択されているものを取得// --> var text = '下記リカバリシートを案内' + '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio01.length; i ++ ) { if ( radio01[i].checked === true ) { text += '【ラジオボタン1】：' + '\n' + radio01[i].value;}} text += '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio02.length; i ++ ) { if ( radio02[i].checked === true ) { text += '【ラジオボタン2】：' + '\n' + radio02[i].value;}} text += '\n'; <!-- A02の中から選択されているものを取得// --> for ( var i = 0; i < radio03.length; i ++ ) { if ( radio03[i].checked === true ) { text += '【ラジオボタン3】：' + '\n' + radio03[i].value;}} text += '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--ラジオボタン// --> <strong>・ラジオボタン1</strong><br /> <input type="radio" name="A01" value="回答1" id="radio1-1" " tabindex="3"> <label for="radio1-1">回答1</label> <input type="radio" name="A01" value="回答2" id="radio1-2" " tabindex="4"> <label for="radio1-2">回答2</label> <input type="radio" name="A01" value="回答3" id="radio1-3" " tabindex="5"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン2</strong><br /> <input type="radio" name="A02" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A02" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A02" value="回答3" id="radio1-3"> <label for="radio1-3">回答3</label> <br /> <!--ラジオボタン// --> <strong>・ラジオボタン3</strong><br /> <input type="radio" name="A03" value="回答1" id="radio1-1" > <label for="radio1-1">回答1</label> <input type="radio" name="A03" value="回答2" id="radio1-2"> <label for="radio1-2">回答2</label> <input type="radio" name="A03" value="回答3" id="radio1-3"> <label for="radio1-3">回答3 </label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- textとtextareaの書式に設定について
先日、質問をさせて頂きました者になります。 input textとtextareaの書式の設定制御の方法が、 分からなくなってしまい質問をさせて頂きました。 【やりたい事】 textやtextareaの初期値のテキスト色とバックグランの色を、 textやtextareaに初期値が入っている時と入力した値が入っている時に、 指定した書式に各種設定したいと思っています。 具体的には、textやtextareaに初期値が入っている時には、 初期値の文字を薄いグレー色に設定し、バックグランドをピンク色に設定し、 textやtextareaに入力をした値が入っている時には、 入力した文字を黒色に設定し、バックグランドを白色に設定したいと思ってます。 ご教授頂ければと存じます。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> if((text01 = formObj.elements["text01"].value)==formObj.elements["text01"].defaultValue)text01=""; <!--text02を取得--> if((text02 = formObj.elements["text02"].value)==formObj.elements["text02"].defaultValue)text02=""; <!--textarea01を取得--> if((textarea01 = formObj.elements["textarea01"].value)==formObj.elements["textarea01"].defaultValue)textarea01=""; <!--textarea02を取得--> if((textarea02 = formObj.elements["textarea02"].value)==formObj.elements["textarea02"].defaultValue)textarea02=""; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1：' + '\n'+ text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問２：' + '\n'+ text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+ textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+ textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" id="p1" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2：</strong><br> <input type="text" name="text02" value="2入力してください" id="p2" size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3：</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ３入力してください </textarea><br> <strong>・諮問4：</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"> <br> <textarea cols=60 rows=20 name="output" id="output"></textarea><br> <textarea id="text" cols="30" rows="5" wrap="soft"></textarea><br> <button onclick="save();">save</button><a id="anchor" href=""></a> </form> </body> </html>
- ベストアンサー
- JavaScript
- Javascriptで複数のフォームを連結したい
初めまして、 お世話になります。 Javascriptで複数のフォームを連結したいと考えています。 やっと２つのテキストエリアを連結させるところまで出来るようになりました。 やりたいことは、出力させるときに下記のようにしたいのですが、 どのようにすれば良いかご教授いただけば幸いです。 テキストエリア：text01とtext02を連結させて出力させる時に、 text01とtext02の間に”改行コード”を追加したいのです。 それとラジオボタンで選択をした値を取得するための、 スクリプの記述方法もご教授頂けないでしょうか？ また、可能であればテキストエリア：outputに出力するときうに、 下記のように出来ると希望通りの操作が出来助かります。 HTMLを勉強し始めたばかりの初心者ですが、 どうぞ何卒よろしくお願い申し上げます。 出力結果： ----------------------------------------------------------------------- 【入力欄１】改行コード text01 改行コード 【入力欄2】改行コード text02 改行コード 【ラジオボタン】 A01 改行コード ソース： ----------------------------------------------------------------------- <html> <head> <script language="JavaScript"> <!-- function textoutput() { var text01 = (document. form01. text01.value); var text02 = (document. form01. text02.value); document. form01. output.value = text01 + text02; } //--> </script> </head> <body> <form name="form01"> <!--入力欄1// --> 入力欄1<br> <textarea name="text01" cols="60" rows="10"></textarea><br> <!--入力欄2// --> 入力欄2<br> <textarea name="text02" cols="60" rows="10"></textarea><br> <!--ラジオボタン// --> <strong>・ OS確認</strong><br /> <input type="radio" name="A01" value="・OS ⇒ XP" id="radio1-1" > <label for="radio1-1">XP</label> <input type="radio" name="A01" value="・OS ⇒ Vista" id="radio1-2"> <label for="radio1-2">Vista</label> <input type="radio" name="A01" value="・OS ⇒ Win7" id="radio1-3"> <label for="radio1-3">Win7</label> <input type="radio" name="A01" value="・OS ⇒ Mac" id="radio1-4"> <label for="radio1-4">Mac</label> <input type="radio" name="A01" value="・OS ⇒ " id="radio1-5"> <label for="radio1-5">その他</label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- オブジェクトから値を取得する方法について
QNo.7391687 の続きで質問をもうひとつお願い致します。 いろいろと調べたり、試行錯誤しながら、 erlectオブジェクトの値を取得して、 取得した値の出力をしたいと考えています。 ご教授頂ければ幸いです。 どうぞよろしくお願いいたします。 【ソース】 ------------------------------------------------------- <head> <title>問合せ入力フォーム</title> <script type="text/javascript"> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- selectを取得// --> var select01 = formObj. select01; <!-- textを結合用の変数として準備// --> var text = '【select01】' + '\n'; text += select01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// --> formObj.output.value = text + '\n'; } </script> </head> <body> <form name="form01"> <!--セレクトボタン// --> <strong>・OS確認</strong><br /> <select name="select01"> <option value=""> <option value="Windows7">Windows7 <option value="WindowsVista">WindowsVista <option value="WindowsXP">WindowsXP <option value="WindowsMe">WindowsMe <option value="Windows2000">Windows2000 </select> <br> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- 追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？ あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？ <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>
- 締切済み
- JavaScript
- チェックボックスの表示・非表示 動作
はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB＝AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE－A＝BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <script type='text/javascript'> <!-- function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false）*/ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=''; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } //--> </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- チェックボックスの無効化、有効化
あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号（t1、t2、t3やc1、c2、c3）が振られている必要がありますが、 これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか？ nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化（false） */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } </script> <form name="form2" action="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>
- ベストアンサー
- JavaScript
- 入力フォームについて
ＦＣ２のホームページを利用しています 入力フォームのサンプルを手本にして、以下のように作成しましたが 「送信ボタン」をクリックしても、メールが届きません。 どうしてでしょうか？ <form action="mailto:xxx@xxx.ne.jp" enctype="text/plain" method="post"> <p><label>NAME：<br /> <input type="text" name="名前" value="" tabindex="1" accesskey="b"> </label></p> <p><label>E-MAIL：<br /> <input type="text" name="メールアドレス" value="" tabindex="2" accesskey="a"> </label></p> <p><label>感想・ご意見<br> <textarea name="title" rows="15" cols="30" tabindex="9" accesskey="i"> </textarea> </label></p> <p> <input type="reset" value="送信" tabindex="10" accesskey="s"> <input type="reset" value="取消" tabindex="11" accesskey="r"> </p> </form>
- 締切済み
- HTML
お礼
ご丁寧なご指導ありがとございます。 おっしゃり通り、一度にあれもこれもとせずに、 １つ１つを丁寧に理解を深め、JavaScriptが使えるようにしたいと思います。