• 締切済み

入力フォームの表示、非表示

ラジオボタンのオン、オフで入力フォームの表示、非表示ができ、入力フォームのラジオボタンのチェック有り無しの表示もできるようにできるjavascriptが知りたいです。

みんなの回答

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

>表示・非表示 http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view2&f=2063&no=3 >チェックの有無 ele.checked 下は参考までに。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>FORM Test</title> <script type="text/javascript"> //@cc_on function nextSiblingElement(n){ return n && (n = n.nextSibling) ? n.nodeType == 1 ? n : arguments.callee(n) : null; } var currentTarget = null; // for IE function switchNextElement(evt){ try{ var trigger = evt.target || evt.srcElement; var target = nextSiblingElement(evt.currentTarget || currentTarget); switch(trigger.value){ case 'SHOW' : target.style.display = 'block'; break; case 'HIDE' : target.style.display = 'none'; break; default : } }catch(exp){ throw exp; } } function getCheckedRadio(form){ try{ var inputs = form.getElementsByTagName('INPUT'); var checkedRadio = []; for(var i=0; i<inputs.length; ++i){ inputs[i].type == 'radio' && inputs[i].checked && checkedRadio.push(inputs[i].name); } return checkedRadio; }catch(exp){ throw exp; } } // 単品で調べるなら function getCheckedValue(a, i){ i=i||0; return a && a[i] ? a[i].checked ? a[i].value : arguments.callee(a, ++i) : null; } </script> </head> <body> <form action="#" onsubmit="alert(getCheckedRadio(this)); alert(getCheckedValue(this.elements['Q1']));"> <fieldset onclick="/*@ currentTarget = this; @*/ switchNextElement(event);"> <legend>フォーム表示切替</legend> <input type="radio" name="VISIBLE" value="SHOW" id="FORM.SHOW" checked><label for="FORM.SHOW">表示</label> <input type="radio" name="VISIBLE" value="HIDE" id="FORM.HIDE"><label for="FORM.HIDE">非表示</label> </fieldset> <fieldset> <fieldset> <legend>Q1</legend> <input type="radio" name="Q1" value="YES" id="Q1.YES" checked><label for="Q1.YES">YES</label> <input type="radio" name="Q1" value="NO" id="Q1.NO"><label for="Q1.NO">NO</label> </fieldset> <fieldset> <legend>Q2</legend> <input type="radio" name="Q2" value="YES" id="Q2.YES"><label for="Q2.YES">YES</label> <input type="radio" name="Q2" value="NO" id="Q2.NO"><label for="Q2.NO">NO</label> </fieldset> <input type="submit" value="送信"> </fieldset> </form> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 入力フォームの作成について

    現在、入力フォームを作成しています。 テキストボックス「Ａ」 ラジオボタン（またはチェックボックス）「１」「２」「３」 テキストボックス「Ｂ」 Ａのテキストボックスに文字を入力し、ラジオボタン（またはチェックボックス）の２を選択した時のみにＢにＡの内容をコピーさせるにはどのように記述すればよろしいでしょうか。 JavaScript 関係の書籍を読みましたが、具体的に書いてあるものはなく、組み合わせが必要だとは思うのですが、うまくいきません。 webでも調べてみましたが、テキストボックスに入力するとラジオボタンがチェックされるというのは見つけましたが、この質問のことは見つけられませんでした。 逆に言えば、難しいということでしょうか・・・ 以上、よろしくお願いします。

  • 選択肢によって入力必須が変わるフォームの入力チェック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については全く素人の為、どなたか助けてください。 お願いします。

  • フォームで入力した値を別のフォームにコピーする

    はじめまして！ javascriptでフォームAに入力した内容を ボタンが押されたら同一ページのフォームBに ペーストされるscriptを作りたいのですが そういったスクリプトを公開しているものがあれば 教えていただきたいです。よろしくお願いいたします。 やりたい事： [フォームA]--------------------- 　お名前：テキスト 　性別：ラジオボタン 　趣味：セレクトボックス 　コメント：テキストエリア 　[コピーボタン]←内容をコピーするボタン -------------------------------- ↓コピーボタンが押されたら↓ [フォームB]--------------------- 　お名前：テキスト 　性別：ラジオボタン 　趣味：セレクトボックス 　コメント：テキストエリア -------------------------------- Aフォームに入力した内容Bフォームに反映される よろしくお願いいたします。

  • ACCESSフォームでのキーボード入力

    ACCESSのフォームで、チェックボックスにチェックを入れたり外したりするとき、キーボードのスペースキーを利用していますが・・・ 日本語入力オフの状態では利用できるのですが、日本語入力オンの状態では効きません。 日本語入力オンのときは、どのキーボードを使えばよいのでしょうか？

  • フォームの入力履歴を消せないですか？

    テキストフォームでいろいろ入力していくと勝手に履歴がたまります。 javascriptなどでこの入力履歴をOFFにしたり、削除したりできないでしょうか？

  • フォームへの入力リアルタイムチェック

    現在、メールフォームを作成しております、 プルダウン、チェックボックス、ラジオボタン、テキストエリア を利用しておりますが、リアルタイムチェックし、 入力・選択に入力がない、選択がない、入力内容に問題がある場合は、 独自の画像（×等）＋エラーテキストを表示し、 問題がなければ、○の画像＋エラーテキストを非表示にしたいです。 おすすめなライブラリなどはございませんでしょうか。

  • フォーム入力チェックはCGI（サーバ）で行う必要がありますか？

    漠然と思ったのですが、HTMLの入力フォーム値のチェックをCGIでは行わずに、Javascriptのみで済ませる方法はないでしょうか？ Javascirptだけでチェックできればサーバ側の言語が、Perl、PHP、JSPのどれであっても同じ入力チェックを使えるので楽だなぁと思いました。 ただ、JavascriptをOFFにして直接URLに値を埋め込んだ場合、入力チェックを素通りしてしまいます。 Javascriptの有無をサーバ側で判定は不可能？な為、やはりサーバ側で入力チェックを行うしかないでしょうか？ よろしくお願いします。

    • 締切済み
    • CGI
  • Javascript 入力フォーム＆コピー

    ホームページに下のような仕組みを取り入れたいと思っています。 各質問に対する回答をフォームに入力もしくはラジオボタンから選択して、回答ボタンをクリックすると、その下の大きなテキストボックスに質問と回答がまとめて表示される仕組みです。 その回答結果をクリップボードにコピーできるようにもしたいです。 お詳しい方よろしくお願いします。 好きな芸能人は？ [入力フォーム１] 嫌いな芸能人は？ [入力フォーム２] 気になるCMは？　 [入力フォーム３] あなたの性別は？ [ラジオボタンで選択] [回答ボタン] ──────────────── （回答が表示されるテキストボックス） 好きな芸能人：○○ 嫌いな芸能人：○○ 気になるCM：○○ 性別：○○ ──────────────── [回答まとめをコピー]　[回答まとめをクリア]

  • フォームの表示が消えてしまう・・・

    初歩的なことでつまづいております。 フォームを利用して「入力」フォームに文字を入れ、「入力！」ボタンを押すと「結果」フォームにその文字を表示させたいのですがうまくいきません。 やりたいことは、 １．「入力」フォームに文字を入れます（たとえば"123"） ２．「入力！」ボタンを押します ３．すると「結果」フォームに"123"と表示させたいです　 ４．また、「入力」フォームにはそのまま"123"が表示されたままにしたいです なぜか下記の記述だとボタンを押した瞬間にすべてのフォームの文字表示が消えてしまいます。 これはどうしてなのでしょうか？すみませんがよろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"><!-- function calcButton() { var inputValue = document.calc.input.value; document.calc.result.value = inputValue; } //--></SCRIPT> </HEAD> <BODY> <FORM name="calc" action=""> 入力<INPUT type="text" size="5" name="input"><BR> 結果<INPUT type="text" size="5" name="result"><BR> <INPUT type="submit" value="入力！" onClick="calcButton()"> </FORM> </BODY></HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する