Q&A
HTMLをご提示ください。見た目だけではラジオボタンですよ。どこまで調べたのでしょうか。「外部js html 読み込み」「js チェックボックス 値取得」「js html 値表示」とかでほとんど片付きそうなものですが。
ラジオボタンがあり、チェックを入れると
フォームを表示させるようにしたいです。
JS初心者です。
下記のように はい にチェックが入るとJSが はい のidをgetElementByIDで受け取って
はいの場合ラジオボタンの下にフォームを出したいのですが、やり方が全くわかりません。
私自身、ずっとPHPを触ってきたのでJSに着手するのは初めてなので
どうして良いのか...
これから作ろうとしているフォームは、 日頃本を読んでいるかに対し、はいを選んだ際に どのような本を読んでいるかをUSERに入力してもらうというものです。いいえを選んだ際は、こちらのフォームは表示されません。
◉はい
◯いいえ
//はいの時フォームがでる
ーーーーーーーーーーーーーーーー
｜ |
ーーーーーーーーーーーーーーーー
Javascript
1function showForm(){ 2 var yes = document.getElementById("yes"); 3 if (yes){ 4 5 } 6}
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title>JS練習</title> 5 <script type="text/javascript" src="study.js"></script> 6</head> 7<body> 8 <form action="./" method="post"> 9 <input type=radio name="ans" value="1" id="yes">はい<br> 10 <input type=radio name="ans" value="0">いいえ<br> 11 <input type="submit" value="次へ"> 12 </form> 13</body> 14</html>
ここまでしかできてません。
HTMLとJSは別ファイルにしたいです。
JSないにHTMLを書いて表示させれば一番簡単なのでしょうが
JSの変数内にHTMLを書いても上手くできずに...
簡単で良いので、方法を教えてくださると助かります。
お願い致します。
「値表示」 じゃなく 「表示非表示切り替え」 ですね
ありがとうございます。外部JSは読み込めていて、JSでhtmlからのidも取得できています。>表示非表示切り替え こちら、調べてみます。ありがとうございます。
html提示ありがとうございます。やはり「ラジオボタン」ですね。PHPを扱ってきたのでしたら余程サーバーのみで完結するような仕組みだけを取り扱っていない限りはhtmlは必ず扱うものなので、用語は間違いなくおさえるようにしておいてください。
ラジオボタンです。。。すいません。
「ラジオボタン」なので質問タイトル・内容 修正しておいてください ちなみにその「フォーム」とは何でどのようなものでしょうか。html上にはないようですが。
仕事で使うために、簡易的にローカルで作って試そうとしているところです。
これから作ろうとしているフォームは、
日頃本を読んでいるかに対し、はいを選んだ際に どのような本を読んでいるかをUSERに入力してもらうというものです。いいえを選んだ際は、こちらのフォームは表示されません。
要件の理解に必要な背景部分となりますので、質問に追記いただけますか？あるかないかでそこまで大きく変わるものではないですが、「その先に何があるか」によって概念が違ってきます
おっしゃる通りでしたね。ありがとうございます。
回答しました、が解決してた・・・。何かの参考にしてみてください。
回答3件
0
質問とは直接関係ないのですが、1つ前提。
JavaScript記述及びJavaScriptファイルはなるべく</body>の前にしてください。
要件にもまだ含まれていない部分があると思います。
** 初期時点では「次へ」を押せない **
「はい」を選んだ場合はフォーム（テキスト？）を入力しないと「次へ」を押せない
「はい」を選んだ後に「いいえ」を押すとフォームが非表示になる(入力内容もクリア）
とか。
ということで、私が上記妄想を加えた上でのHTMLは下記。
html
1<input type=radio name="ans" value="1">はい<br /> 2<p style="display:none;" id="book_area"><input type="text" name="book" id="book"></p> 3<input type=radio name="ans" value="0">いいえ<br /> 4<input type="submit" id="submit" value="次へ" disabled>
yesからidを抜いていますが、それは「ラジオボタンが変更されたときのイベント」を
1つのイベントでとるためです。
「現在選択されているラジオボタン」が「選択時」のイベントで判定できるので、それでやります。
※あと細かいですが改行タグもちょっとかえてます。
あとは、ラジオボタンの値のとり方・フォーム情報が変更されたときのイベントのとり方・要素の表示非表示・要素の活性非活性
を組み合わせてJavaScript側を書きます。
※下記はあくま実装例です。ではありませんし、jQuery使うともう少し短く書けないこともないです。
js
1//それぞれ変数に入れておく 2var radios = document.getElementsByName("ans"); 3var submit_btn = document.getElementById("submit"); 4var book_area = document.getElementById("book_area"); 5var book = document.getElementById("book"); 6 7//ラジオボタンにchangeイベントを付与 8radios.forEach((e) => { 9 e.addEventListener("change",function(){ 10 showForm(this); 11 },false); 12 }); 13//ラジオボタンchange時に呼び出す 14function showForm (ele) { 15 //デフォルトはsubmitボタン非活性で入力部分も非表示 16 submit_btn.disabled = true; 17 book_area.style = "display:none;"; 18 //yes選択時に表示 19 if(ele.value == "1"){ 20 book_area.style = "display:block;"; 21 //no選択時にボタン活性化（入力内容空に） 22 }else{ 23 submit_btn.disabled = false; 24 book.value = ""; 25 } 26} 27//入力時のイベント（keyup） 28book.addEventListener("keyup",function(){ 29 if(this.value != ""){ 30 submit_btn.disabled = false; 31 }else{ 32 submit_btn.disabled = true; 33 } 34},false);
投稿2018/06/22 04:53
編集2018/06/22 05:00総合スコア80850
ありがとうございます！
こちらの方が、JS初心者の私にとても理解しやすいです。
試してみます！
かなり手続き的な書き方をしているので読みやすいとは思います。
ただ、お仕事としてやるならもっとモダンで簡潔なやり方を組み込んでいかないと、ですね。
そうですね...
おっしゃる通りです。試行錯誤しながら頑張って実装してみます！
ありがとうございます！
0
ベストアンサー
こんな感じでしょうか？
html
1<form class="form-elm" action="./" method="post"> 2 <input type=radio name="ans" value="1" id="yes">はい<br> 3 <input type=radio name="ans" value="0">いいえ<br> 4 <div class="what-book"> 5 <p>日頃読んでる本はなんですか？</p> 6 <textarea name="book" id="" cols="30" rows="10"></textarea> 7 </div> 8 <input type="submit" value="次へ"> 9</form>
css
1.what-book { 2 display: none; 3 border: 1px solid #000; 4 padding: 10px; 5}
↓ はい のidをgetElementByIDで受け取ってはいの場合ラジオボタンの下にフォームを出す場合
javascript
1window.addEventListener('DOMContentLoaded', function() { 2 3 var formElm = document.querySelector('.what-book'); 4 5 [].forEach.call(document.querySelectorAll('input'), function(el) { 6 el.addEventListener('change', function(e) { 7 console.log(e.target.getAttribute('id')); 8 if (e.target.getAttribute('id') === 'yes') { 9 formElm.style.display = 'block'; 10 } else { 11 formElm.style.display = 'none'; 12 } 13 }, false); 14 }); 15});
↓ idを使わなくてもvalueで判断することもできます。（getAttributeをvalueに変えます。）
javascript
1window.addEventListener('DOMContentLoaded', function() { 2 3 var formElm = document.querySelector('.what-book'); 4 5 [].forEach.call(document.querySelectorAll('input'), function(el) { 6 el.addEventListener('change', function(e) { 7 if (e.target.getAttribute('value') === '1') { 8 formElm.style.display = 'block'; 9 } else { 10 formElm.style.display = 'none'; 11 } 12 }, false); 13 }); 14});
投稿2018/06/22 04:22
総合スコア88
こちらコピペでできました！
しかし、コピペだとまったく理解できたことにならないので、
一つ一つコードを理解しながら再度、少しずつ変更を加えて実装していきたいと思います！
ありがとうございました！
とんでもありません。
if文の部分を三項演算子で書いた方がスッキリ感が出ますね。
formElm.style.display = (e.target.getAttribute('id') === 'yes') ? 'block' : 'none';
ご参考になれば幸いです。
三項演算子の方が確かに簡潔にかけますね！
ありがとうございます！
0
CSSの場合
CSS
1textarea { 2 display: none; 3} 4 5#yes:checked ~ textarea { 6 display: inline-block; 7}
HTML
1 <form action="./" method="post"> 2 <input type="radio" name="ans" value="1" id="yes" /><label for="yes">はい</label><br /> 3 <input type="radio" name="ans" value="0" id="no" /><label for="no">いいえ</label><br /> 4 <textarea cols="50" rows="10" name="detail"></textarea><br /> 5 <input type="submit" value="次へ" /> 6 </form>
投稿2018/06/22 04:19
編集2018/06/22 04:24
総合スコア13749
あなたの回答
tips
プレビュー
