Q&A
「一見ページ移動したかのような動作」というのは？ 送信していないのでしょうか？ Ajaxの話ですか？
プロフィールなどの情報をフォームで入力し、登録ボタンを押すと、フォームで入力した内容が出力されて、フォーム自体は消えるという、一見ページ移動したかのような動作を実現しようとしています。
ファイルは、.html,.css,.jsそれぞれ１つだけで、jQueryは使わない方法でお願いいます。
現状ですが、フォームの内容を出力まではできたのですが、出力先をdisplay:none;にするとおもうので送信しても何も変化がない感じになっています。ページ切替がどうにもわかりません。
なにかアドバイスなどいただけると助かります！よろしくお願いいたしますm(__)m
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <link rel="stylesheet" type="text/css" href="test09_04.2.css"> 7 <script type="text/javascript" src="task2_0905_2.js"></script> 8</head> 9 10<body> 11 <legend class="form"><h1>投稿フォーム</h1> 12 <form onsubmit="return false;" name="form1" class="page1" id="page1"> 13 <div> 14 <label for="textForm">名前：</label> 15 <input type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" id="textForm"> 16 </div> 17 <div> 18 <label for="radioForm" class="gender">性別：</label> 19 <label for="gender1">男性</label><input type="radio" name="gender" value="男性" id="gender1"> 20 <label for="gender2">女性</label><input type="radio" name="gender" value="女性" id="gender2"> 21 <label for="gender3">その他</label><input type="radio" name="gender" value="その他" id="gender3" checked="checked"> 22 </div> 23 <div class="age"> 24 年齢：<select name="age" id="selbox"> 25 <option value="～20代">~20代</option> 26 <option value="30代～40代">30代~40代</option> 27 <option value="50代～60代">50代~60代</option> 28 <option value="70代～">70代~</option> 29 </select> 30 </div> 31 <div class="questionnaire"> 32 アンケート：好きな色（複数選択可） 33 <input type="checkbox" name="q1" value="赤" id="color1" ><label for="color1">赤</label> 34 <input type="checkbox" name="q1" value="青" id="color2" ><label for="color2">青</label> 35 <input type="checkbox" name="q1" value="黄" id="color3" ><label for="color3">黄</label> 36 <input type="checkbox" name="q1" value="緑" id="color4" ><label for="color4">緑</label> 37 <input type="checkbox" name="q1" value="紫" id="color5" ><label for="color5">紫</label> 38 </div> 39 <div class="free_space"> 40 自由記入欄：<br> 41 <textarea id="freeSpace" name="free_space" cols="50" rows="6" placeholder="ご自由にご記入して下さい" ></textarea> 42 </div> 43 <div> 44 <input type="button" id="button" value="取得する" onclick="getRadioValue();"> 45 <input type="reset" value="クリア"> 46 </div> 47 </form> 48 <div class="page2" id="page2"> 49 <div> 50 <label for="resultForm">取得した名前：</label> 51 <output type="text" id="resultForm"> 52 </div> 53 <div> 54 <label for="resultRadio">取得した性別：</label> 55 <output type="text" id="resultRadio"></output> 56 </div> 57 <div> 58 <label for="resultselbox">取得した年齢：</label> 59 <output type="text" id="resultselbox"></output> 60 </div> 61 <div> 62 <label for="resultcheckbox">取得した色：</label> 63 <output type="text" id="resultcheckbox"></output> 64 </div> 65 <div> 66 <label for="resultFreeSpace">取得した自由記入欄：</label> 67 <output type="text" id="resultFreeSpace"></output> 68 </div> 69 </div> 70 </legend> 71</body> 72</html> 73
js
1function getRadioValue(){ 2 // 入力フォームの値を取得 3 var textForm = document.getElementById("textForm").value; 4 5 // 取得した値を別の入力フォームに表示 6 var resultForm = document.getElementById("resultForm"); 7 resultForm.value = textForm + "さん" ; 8 if(document.form1.name_form.value == ""){ 9 resultForm.value = "記入なし"; 10 } 11 12 //ラジオボタンオブジェクトを取得する 13 var radios = document.getElementsByName('gender'); 14 15 //取得したラジオボタンオブジェクトから選択されたものを探し出す 16 var result; 17 for(var i=0; i<radios.length; i++){ 18 if (radios[i].checked) { 19 //選択されたラジオボタンのvalue値を取得する 20 result = radios[i].value; 21 break; 22 } 23 } 24 25 //value値を表示する 26 // alert("value値は" + result + "です"); 27 resultRadio.value = result; 28 29 var obj = document.getElementById('selbox'); 30 var idx = obj.selectedIndex; //インデックス番号を取得 31 var val = obj.options[idx].value; //value値を取得 32 var txt = obj.options[idx].text; //ラベルを取得 33 34 // alert('選択したのは「インデックス:' + idx + ' 値:' + val + ' ラベル:' + txt + '」です'); 35 resultselbox.value = txt ; 36 // ここからチェックボックス 37 var str =""; 38 var color2 = document.getElementsByName("q1"); 39 40 for (var i = 0; i < color2.length; i++){ 41 if(color2[i].checked){//(color2[i].checked === true)と同じ 42 str = str + color2[i].value + " "; 43 } 44 } 45 if(str === ""){ 46 str = "チェックなし"; 47 } 48 document.getElementById("resultcheckbox").innerHTML = str; 49 //テキストエリア 50 var freeSpace = document.getElementById("freeSpace").value; 51 // テキストエリアを別場所に表示 52 var resultFreeSpace = document.getElementById("resultFreeSpace"); 53 resultFreeSpace.value = freeSpace; 54 if(document.form1.freeSpace.value == ""){ 55 resultFreeSpace.value = "記入なし"; 56 } 57 //ページ切替 58 var elementPage1 = document.getElementById( "page1" ); 59 var elementPage2 = document.getElementById( "page2" ); 60 switch( page ) { 61 case 1: 62 elementPage1.style.display = 'block'; 63 elementPage2.style.display = 'none'; 64 break; 65 66 case 2: 67 elementPage1.style.display = 'none'; 68 elementPage2.style.display = 'block'; 69 break; 70 } 71} 72
css
1html{ 2 background: red; 3} 4h1{ 5 text-align: center; 6} 7.form{ 8 background: orange; 9 margin: auto; 10 padding: 10px; 11 width: 700px; 12 border: 1px solid black; 13} 14.form input{ 15 /* display: none; */ 16} 17form{ 18 margin-left: 120px; 19} 20.form3{ 21 display: none; 22} 23.page1 { 24 display:block; 25 font-weight:bold; 26} 27.page2 { 28 display:none; 29 font-weight:bold; 30}
見ていただいてありがとうございます！Ajaxではないです！勉強したてで間違ってるかもですが送信はしていないと思います。投稿ボタンを押したら、内容を下の方に出力する。と同時に投稿入力箇所を非表示にするといったアクションを加える感じです！
回答1件
0
ベストアンサー
したいことの捉え方を間違っているかもですが、、、
最後のswitch( page ) の分岐は不要では？
取得するボタンのクリック時の最後は、必ず以下の処理でよいかと思います。
JavaScript
1elementPage1.style.display = 'none'; 2elementPage2.style.display = 'block';
やりたいことが違ったらまたコメントください。
投稿2018/09/11 09:01
総合スコア54
回答ありがとうございます！
本当ですね！余計なものが多かったみたいです＞＜
重ねて申し訳ないのですが、今実装してみたところ、チェックボックスの出力のところが、チェックしても、”チェックしてません”になるのですが、ｊｓの何がいけないかでわかりそうでしょうか？
ぱっと見た感じですが、
forで繰り返し処理を行っていますが、最後のチェックボックスがチェックされていないと、それまでの処理に関係なくstrに"チェックなし"が入って上書きされてしまうからだと思います。
ありがとうございます！
確かに最後のチェックは反応するんですね、”チェックなし”も一緒に出力されますが、、、
もしわかりそうでしたらこちらもお願いします！
すみません、あれから解決できました！なぜ最後のチェックだけそんな挙動なのかは未だ理解できていませんが問題は解決しました！質問箇所で直しておきます！
ありがとうございましたm(__)m
あなたの回答
tips
プレビュー
