WEBの入力フォームについて
- WEBの入力フォームについて改善したい点や疑問について質問いたします。
- テキストボックスＡに入力後、ラジオボタンで２を選択すると、テキストボックスＢに自動的に入り、１及び２の場合はブランク（入力不可）というものです。改善したい点としては、最初にこのファイルを呼び出したときにはテキストボックスＢに入力できてしまうところです。
- ２を選択後、テキストボックスＢにカーソルを当てると左下のステータスバーにエラーと表示されるのはしかたのないことでしょうか。２を選択した場合は自動で入りつつ修正もできるようにしたいです。
- ベストアンサー
WEBの入力フォームについて
昨年の同じ時期に入力フォームについて質問し、回答をいただいたのですが、少し使い勝手を改善したく再度質問いたします。 テキストボックス Ａ ラジオボタン １、２、３ テキストボックス Ｂ テキストボックスＡに入力後、ラジオボタンで２を選択すると、テキストボックスＢに自動的に入り、１及び２の場合はブランク（入力不可）というものです。 以下が前回回答をいただいたものです。 改善したいところは、最初にこのファイルを呼び出したときにはテキストボックスＢに入力できてしまうところです。その後ラジオボタンを動かすと２選択以外には入力はできなくなりますが、はじめから入力不可にしたいと思っています。（ラジオボタンの初期値は１です。） また、２を選択後、テキストボックスＢにカーソルを当てると左下のステータスバーにエラーと表示されるのはしかたのないことでしょうか。（テキストを修正することもありえるので、２を選択した場合は自動で入りつつ修正もできるようにしたいです。） 以上、よろしくお願いします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <script language="JavaScript" type="text/JavaScript"> function copyab(f){ f.elements["name3"].disabled=false; f.elements["name4"].disabled=false; f.elements["name3"].value=f.elements["name1"].value f.elements["name4"].value=f.elements["name2"].value; } function clearb(f){ f.elements["name3"].value=""; f.elements["name4"].value=""; f.elements["name3"].disabled=true; f.elements["name4"].disabled=true; } </script> <FORM>A1 <INPUT type="text" name="name1"> A2<INPUT type="text" name="name2"><BR> 区分 <INPUT name="address" type="radio" value="1" onclick="clearb(this.form)" checked> 1 <INPUT name="address" type="radio" value="2" onclick="copyab(this.form)"> 2 <INPUT name="address" type="radio" value="3" onclick="clearb(this.form)"> 3<BR> B1<INPUT type="text" name="name3" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> B2<INPUT type="text" name="name4" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> </FORM> </BODY> </HTML>
- hiro7589
- お礼率100% (16/16)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 初回表示時にB1を入力不可にするのであれば disabled="disabled" を追加してください。 B1<input type="text" name="name3" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';" disabled="disabled"> >また、２を選択後、テキストボックスＢにカーソルを当てると左下のステータスバーにエラー 前回の回答内容がわからないので何ともいえませんがagreeという変数が無いためにエラーが表示されています。 以下のようにすればエラーは表示されなくなります。 (ただし、agreeが実際何に使われているかまでは検証していません。) ==== <html> <head> <title>WEBの入力フォームについて</title> <script language="JavaScript" type="text/JavaScript"> var agree; function copyab(f){ f.elements["name3"].disabled=false; f.elements["name4"].disabled=false; f.elements["name3"].value=f.elements["name1"].value f.elements["name4"].value=f.elements["name2"].value; agree = true; } function clearb(f){ f.elements["name3"].value=""; f.elements["name4"].value=""; f.elements["name3"].disabled=true; f.elements["name4"].disabled=true; } </script> </head> <body> <form> A1<input type="text" name="name1"> A2<input type="text" name="name2"><br> 区分 <input name="address" type="radio" value="1" onclick="clearb(this.form)" checked> 1 <input name="address" type="radio" value="2" onclick="copyab(this.form)"> 2 <input name="address" type="radio" value="3" onclick="clearb(this.form)"> 3<br> B1<input type="text" name="name3" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';" disabled="disabled"> B2<input type="text" name="name4" onfocus="if (!agree)this.blur();" onchange="if (!agree)this.value='';"> </form> </body> </html>
関連する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
- 選択肢によって入力必須が変わるフォームの入力チェックJavaScrip
選択肢によって入力必須が変わるフォームの入力チェックJavaScript フォームの入力チェックのJavaScriptを作成しています。 特定のラジオボタンにチェックを入れた場合のみ、 入力必須になるテキストボックスの 入力チェックJavaScriptを教えてください。 ラジオボタンが複数あるフォームで、 <input type="radio" name="type" value="type1" /> <label>タイプ1</label> <input type="radio" name="type" value="type2" /> <label>タイプ2</label> タイプ2を選んだ場合のみ、必須項目にしたいテキストボックスがあります。 <input type="text" name="name1" /> テキストボックスが空白だった場合にアラートを出すJavaScriptは 現在このようになっています。 （参考にしていたサイトがあるのですが、忘れてしまいました・・・。） $(function(){ $("form1").submit(function(){ if($("input[name='name1']").val()==""){ $("input[name='name1']").css("border","1px solid #A70F00"); alert('必須項目に未入力があります'); return false; }) }) このJavaScriptをさらに、if文で括って、 name="type" の value が type2 であれば・・・、という処理を追加すればよいのだと 思いますが、書き方が分からず困っています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptでフォーム要素の状態を制御
いつもお世話様です。 phpでフォームを構成しています。 フォーム内のradioボタンの状態で、以降のラジオボタン、プルダウン、テキスト入力を 制御したいです。 ＜制御内容（やりたいこと）＞ situmon.phpで、 q1のラジオボタンが1の場合は、q2は回答しなくていい。 （2の場合だけ回答させる。） q3のチェックボックスが1でない場合は、プルダウンとテキストは入力しなくていい。 （1の場合だけ回答させる。） ＜現状のソース＞ ちなみに、該当するjavascript部分は、いろいろなサイトをみて、 いろいろ書き換えて試しましたが、どうもうまくいかず、 断念した段階そのままの状態です。 よって、ご回答はこれをベースにしなくても大丈夫です。 よろしくお願いします。 ---situmon.php--- <script type="text/javascript"> <!-- function Check() { document.form.elements["q2"][1].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2"][2].disabled = (!document.form.elements["q1"][2].checked); document.form.elements["q2t"].disabled = (!document.form.elements["q1"][2].checked); } // --> </script> <body> <form name="form"> <!-- q1 --> <input type="radio" name="q1" id="q1" value="1" onclick="check();"/>はい <input type="radio" name="q1" id="q1" value="2" onclick="check();"/>いいえ <!-- q2 --> <input type="radio" name="q2" id="q2" value="1" />なぜ１ <input type="radio" name="q2" id="q2" value="1" />なぜ２ （その他： <input type="text" name="q2t" id="q2t" value="<php echo h(@$q2t); ?>" />） <!-- q3 --> <input type="checkbox" name="q3c" value="1" />楽しかった <select name="q3s"> <option value="" />▼選んで <option value="1" />めちゃめちゃ <option value="2" />めっちゃ <option value="3" />めちゃ </select> その他なにかあったら書いて <textarea name="q3t" id="q3t"><?php echo h(@$q3t); ?></textarea> </body>
- ベストアンサー
- JavaScript
- フォームに入力したデータの受け渡しについて
左右に分かれたフレームを使用したページ作成を検討しています。 左フレーム内のフォームへ入力したテキストやチェックボックスのデータを、 右フレームに設置した1つのテキストエリアへコピーボタンで受け渡しを行う方法を探しています。 テキストボックス1行だけの受け渡しはできるのですが、 複数のテキストエリアやチェックボックスを使用した場合の受け渡し方法をご教示いただきたけますでしょうか？ 左フレームとしては↓のような内容を想定しています。 <html> <form> テキスト：</br> <input type="text" name="aaa" /></br> ラジオ：</br> <input type="radio" name="bbb" value="radio1" checked="checked" /> ラジオ1 <input type="radio" name="bbb" value="radio2" /> ラジオ2</br> チェック：</br> <input type="checkbox" name="ccc" value="check1" /> チェック1 <input type="checkbox" name="ccc" value="check2" /> チェック2</br> 選択項目：</br> <select name="ddd"> <option>Ａ</option> <option>Ｂ</option> </select></br> テキストエリア</br> <textarea name="eee" rows="2" cols="15">テキストエリア1</textarea> </br> <input type="submit" value="送信" /> <input type="reset" value="リセット" /> </form> </html> よろしくお願いいたします。
- 締切済み
- JavaScript
- 特定のラジオボタンが選択されたらテキストフィールドを入力可
下のような6つのラジオボタンと1つのテキストフィールドのあるフォームがあります。 「あ・い・う・え・お」のラジオボタンが選択されたらテキストフィールドをdisabledに、「か」なら入力可能にしたくて、JavaScriptで次のように記述しました。 一応動作しているように見えるのですが、見よう見まねで書いた初めてJavaScriptなので大丈夫なのか不安です。これで良いのでしょうか。 function txtClose () { if (document.f_frm.motive[5].checked) { document.f_frm.motive_add.disabled = false; } else { document.f_frm.motive_add.disabled = true; } } <form name="f_frm"> <input type="radio" name="motive" value="あ" onclick="txtClose();" />あ<br /> <input type="radio" name="motive" value="い" onclick="txtClose();" />い<br /> <input type="radio" name="motive" value="う" onclick="txtClose();" />う<br /> <input type="radio" name="motive" value="え" onclick="txtClose();" />え<br /> <input type="radio" name="motive" value="お" onclick="txtClose();" />お<br /> <input type="radio" name="motive" value="か" onclick="txtClose();" />か<br /> <input type="text" name="motive_add" size="20" maxlength="40" onclick="txtClose();" /> </form>
- ベストアンサー
- JavaScript
- ラジオボタンを選択したらテキストに数字入力
ラジオボタンを選択してvalueが1だったら、テキスト欄（Q1_TEXT）に0を入力し、それ以外だったら何もしない、というJavascriptを書きたいです。ラジオボタンによって、テキスト欄の有効化、無効化に関する書き方は見つけられたのですが、このような挙動について見つけることができませんでした。 ご存じの方がおられましたらご教示いただけますと助かります。 よろしくお願いいたします。 <body> <form> <INPUT type="radio" name="Q1" value="1"> <INPUT type="radio" name="Q1" value="2"> <INPUT type="radio" name="Q1" value="3"> <INPUT type="text" name="Q1_TEXT" value="_Q1_TEXT_CHK_" SIZE="7"> </form> </body>
- ベストアンサー
- JavaScript
- (続)ラジオボタンの選択でチェックボックスのON/OFFを連動
前回（http://okwave.jp/qa5476132.html）とは全く違うものを参考に作成してみましたが、「ラジオボタンを選択するたびにチェックボックスのチェックが初期化される」というのがまだ出来ておりません。 どなたか教えていただけるとありがたいです＞＜ <html> <head> <script language="javascript"> function classDisable(f,cn,fl){ for (var i=0;i<f.elements.length;i++){ if(f.elements[i].className==cn){f.elements[i].disabled=fl} } } function classCheck(f,cn){ for (var i=0;i<f.elements.length;i++){ if(f.elements[i].className==cn && f.elements[i].checked==true && f.elements[i].disabled==false){return true;} } return false; } </script> </head> <body> <form> ■分類<br> <input type="radio" value="アリ" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));">アリ （ <input type="checkbox" value="DXF" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">DXF <input type="checkbox" value="ガーバ" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">ガーバ <input type="checkbox" value="PDF" name="Kind01[]" class="Kind01" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">PDF ） <input type="radio" value="ナシ" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));" checked>ナシ <input type="radio" value="相談" name="fpcdata" class="fpcdata" onClick="classDisable(this.form,'Kind01',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind01'));"> 相談 ■分類<br> <input type="radio" value="ナシ" name="print" class="print" onClick="classDisable(this.form,'Kind04',this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind04'));" checked>ナシ <input type="radio" value="アリ" name="print" class="print" onClick="classDisable(this.form,'Kind04',!this.checked);classDisable(this.form,'nofruit',classCheck(this.form,'Kind04'));">アリ （ <input type="checkbox" value="銀シールド" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銀シールド <input type="checkbox" value="銀ペースト" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銀ペースト <input type="checkbox" value="銅ペースト" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">銅ペースト <input type="checkbox" value="シルク" name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))">シルク 色 <SELECT name="Kind04[]" class="Kind04" disabled onClick="classDisable(this.form,'nofruit',classCheck(this.form,this.className))"> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> ） </form> </body> </html>
- 締切済み
- JavaScript
- ラジオボタンでフォームの送信先を切り替える
<script type="text/javascript"> <!-- function setDisabledTextbox(F,N1,N2,N3) { if(N1 == "OrderPayment0") { F[N2].disabled = true; F[N3].disabled = false; } else { F[N2].disabled = false; F[N3].disabled = true; } } //--> </script> //フォームの１の記述 <form method="post" action="送信先１"> //ラジオボタン１の記述 <input type="radio" name="payment1" value="値１" onclick="setDisabledTextbox(this.form,this.id,'tbox0','tbox1')" <?php if($payment_name == "値１") echo "checked"; ?> id="OrderPayment0" /> <label for="OrderPayment0">値１</label><br /> //ラジオボタン２の記述 <input type="radio" name="payment2" value="値２" onclick="setDisabledTextbox(this.form,this.id,'tbox0','tbox1')" <?php if($payment_name == "値２") echo "checked"; ?> id="OrderPayment1" /> <label for="OrderPayment1">値２</label><br /> 送信１の入力フォームの記述 <input type="submit" name="tbox0" value="送信１" disabled /> </form> //フォームの２の記述 <form method="post" action="送信先２"> 送信２の入力フォームの記述 <input type="submit" name="tbox1" value="送信２" disabled /> </form> 上記の記述で、最初、送信ボタン１及び送信ボタン２をdisabled状態にしておいて、ラジオボタンの１が押されたら送信ボタンの１を活性化、ラジオボタンの２を押したら送信ボタンの２を活性化するというように切り替えたいのですが、今のところ送信ボタンの１の切り替えはうまくいっているのですが、送信ボタンの２の方がdisabledされたままにまります。フォームの有効範囲の問題かな？と思って、ラジオボタンの２の記述をフォームの２の記述の方に移してみたりしたのですが、結果は同じようです。 両方とも切り替えるようにするには、どのように記述すればよいのでしょうか？ 御教示願えればと思います。
- ベストアンサー
- JavaScript
- テキストボックスを無効にすると値が取得できない
javascriptでこのようにテキストボックスを無効に してフォームを送信するとphp側でvalueの値が取得できないのですが、入力無効にすると valueは送られないんでしょうか？ <form> <input type="text" id="sample" name="sample" value="値" /> </form> スクリプト .document.getElementById('sample').disabled = true; valueにはphpで値をセットし、それをテキストボックスで編集できないようにして 値を飛ばそうとしたのですがテキストボックスのvalueの値が来てないようです。 自分なりに考えたんですが、送信する瞬間だけ（submitボタンが押された時） テキストボックスを有効に戻すようにコードを書いているのですが これ以外で何かありますか？ ---このように対処--- <form onsubmit="return disb()"> <input type="text" name="sample" value="値" /> </form> スクリプト document.getElementById('sample').disabled = true; function disb(f){ f.sample.disabled = false; }
- 締切済み
- JavaScript
- disabledの点で。２
また同じソースでの質問なのですが、以下のようなソースで、１のテキストボックスに過去に入力したもの（プルダウンみたいに下がって出てくる履歴のようなもの）を選択すると、２の方の入力ができなくなります。履歴の数字を入れても２の方に記入できるようにするにはどのようにしたら良いのでしょうか。また、これらの処理を行うとき、onChange以外のものを使ってできるのでしょうか？大変困っております、よろしくお願いします。 <html> <head> <title></title> <script language="JavaScript"> <!-- function setTF(){ if(document.form1.text1.value=="") document.form1.text2.disabled = true; else document.form1.text2.disabled = false; } //--> </script> </head> <body> <form name="form1"> １<INPUT type="text" name="text1" onChange="setTF()"> ２<INPUT type="text" name="text2" disabled> <INPUT type="submit" value="登録" onClick="return setTF()" name="submit"> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
こんばんは、返信ありがとうございます。 内容を確認しまして、うまくいきました。 agreeに関しましては、前回回答をいただいたものにはついてなかったので、私が別のものを参考にしていたものを意味もわからずに追加してしまっていたようです。 エラーが出なくなりましたので助かりました。 逆にいえば、agreeがなくてもよいものか、もう一度確認していきます。 これで締めさせていただきます。ありがとうございました。