質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.91%

投稿フォーム 投稿ボタンで表示切替、htmlファイルは1つ

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,173

score 59

プロフィールなどの情報をフォームで入力し、登録ボタンを押すと、フォームで入力した内容が出力されて、フォーム自体は消えるという、一見ページ移動したかのような動作を実現しようとしています。
ファイルは、.html,.css,.jsそれぞれ1つだけで、jQueryは使わない方法でお願いいます。

現状ですが、フォームの内容を出力まではできたのですが、出力先をdisplay:none;にするとおもうので送信しても何も変化がない感じになっています。ページ切替がどうにもわかりません。

なにかアドバイスなどいただけると助かります!よろしくお願いいたしますm(__)m

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="test09_04.2.css">
    <script type="text/javascript" src="task2_0905_2.js"></script>
</head>

<body>
    <legend class="form"><h1>投稿フォーム</h1>    
        <form onsubmit="return false;" name="form1" class="page1" id="page1">
            <div>
                <label for="textForm">名前:</label>
                <input type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" id="textForm">
            </div>
            <div>
                <label for="radioForm" class="gender">性別:</label>
                <label for="gender1">男性</label><input type="radio" name="gender" value="男性" id="gender1">
                <label for="gender2">女性</label><input type="radio" name="gender" value="女性" id="gender2">
                <label for="gender3">その他</label><input type="radio" name="gender" value="その他" id="gender3" checked="checked">
            </div>
            <div class="age">
                    年齢:<select name="age" id="selbox">
                                <option value="~20代">~20代</option>
                                <option value="30代~40代">30代~40代</option>
                                <option value="50代~60代">50代~60代</option>
                                <option value="70代~">70代~</option>
                            </select>
            </div>
            <div class="questionnaire">
                    アンケート:好きな色(複数選択可)
                    <input type="checkbox" name="q1" value="赤" id="color1" ><label for="color1"></label>
                    <input type="checkbox" name="q1" value="青" id="color2" ><label for="color2"></label>
                    <input type="checkbox" name="q1" value="黄" id="color3" ><label for="color3"></label>
                    <input type="checkbox" name="q1" value="緑" id="color4" ><label for="color4"></label>
                    <input type="checkbox" name="q1" value="紫" id="color5" ><label for="color5"></label>
            </div>
            <div class="free_space">
                    自由記入欄:<br>
                    <textarea id="freeSpace" name="free_space" cols="50" rows="6" placeholder="ご自由にご記入して下さい" ></textarea>
            </div>
            <div> 
            <input type="button" id="button" value="取得する" onclick="getRadioValue();">
            <input type="reset" value="クリア">
            </div>
        </form>
    <div class="page2" id="page2">    
      <div>
            <label for="resultForm">取得した名前:</label>
            <output type="text" id="resultForm">
        </div>
        <div>
            <label for="resultRadio">取得した性別:</label>
            <output type="text" id="resultRadio"></output>
        </div>
        <div>
            <label for="resultselbox">取得した年齢:</label>
            <output type="text" id="resultselbox"></output>
        </div>
        <div>
            <label for="resultcheckbox">取得した色:</label>
            <output type="text" id="resultcheckbox"></output>
        </div>
        <div>
            <label for="resultFreeSpace">取得した自由記入欄:</label>
            <output type="text" id="resultFreeSpace"></output>
        </div>
    </div>
    </legend>
</body>
</html>
function getRadioValue(){
    // 入力フォームの値を取得
    var textForm = document.getElementById("textForm").value;

    // 取得した値を別の入力フォームに表示
    var resultForm = document.getElementById("resultForm");
    resultForm.value = textForm + "さん" ;
    if(document.form1.name_form.value == ""){
        resultForm.value = "記入なし";
    }

    //ラジオボタンオブジェクトを取得する
    var radios = document.getElementsByName('gender');

    //取得したラジオボタンオブジェクトから選択されたものを探し出す
    var result;
    for(var i=0; i<radios.length; i++){
        if (radios[i].checked) {
        //選択されたラジオボタンのvalue値を取得する
        result = radios[i].value;
        break;
        }
    }

    //value値を表示する
    //   alert("value値は" + result + "です");
    resultRadio.value = result;

    var obj = document.getElementById('selbox');
    var idx = obj.selectedIndex;       //インデックス番号を取得
    var val = obj.options[idx].value;  //value値を取得
    var txt  = obj.options[idx].text;  //ラベルを取得

    //   alert('選択したのは「インデックス:' + idx + ' 値:' + val + ' ラベル:' + txt + '」です');
    resultselbox.value = txt ;
    //  ここからチェックボックス
    var str ="";
    var color2 = document.getElementsByName("q1");

    for (var i = 0; i < color2.length; i++){
        if(color2[i].checked){//(color2[i].checked === true)と同じ
            str = str + color2[i].value + " ";
            }
    }
  if(str === ""){
      str = "チェックなし";
 }   
    document.getElementById("resultcheckbox").innerHTML = str;
    //テキストエリア
    var freeSpace = document.getElementById("freeSpace").value;
    // テキストエリアを別場所に表示
    var resultFreeSpace = document.getElementById("resultFreeSpace");
    resultFreeSpace.value = freeSpace;
    if(document.form1.freeSpace.value == ""){
        resultFreeSpace.value = "記入なし";
    }
    //ページ切替
    var elementPage1 = document.getElementById( "page1" );
    var elementPage2 = document.getElementById( "page2" );
    switch( page ) {
    case 1:
        elementPage1.style.display = 'block';
        elementPage2.style.display = 'none';
        break;

    case 2:
        elementPage1.style.display = 'none';
        elementPage2.style.display = 'block';
        break;
    }
}
html{
    background: red;
}
h1{
    text-align: center;
}
.form{
    background: orange;
    margin: auto;
    padding: 10px;
    width: 700px;
    border: 1px solid black;
}
.form input{
    /* display: none; */
}
form{
    margin-left: 120px;
}
.form3{
    display: none;
}
.page1 {
    display:block;
    font-weight:bold;
}
.page2 {
    display:none;
    font-weight:bold;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/09/11 18:07

    「一見ページ移動したかのような動作」というのは? 送信していないのでしょうか? Ajaxの話ですか?

    キャンセル

  • takeke

    2018/09/11 18:17

    見ていただいてありがとうございます!Ajaxではないです!勉強したてで間違ってるかもですが送信はしていないと思います。投稿ボタンを押したら、内容を下の方に出力する。と同時に投稿入力箇所を非表示にするといったアクションを加える感じです!

    キャンセル

回答 1

checkベストアンサー

0

したいことの捉え方を間違っているかもですが、、、
最後のswitch( page ) の分岐は不要では?

取得するボタンのクリック時の最後は、必ず以下の処理でよいかと思います。

elementPage1.style.display = 'none';
elementPage2.style.display = 'block';

やりたいことが違ったらまたコメントください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/11 18:37

    回答ありがとうございます!

    本当ですね!余計なものが多かったみたいです><

    重ねて申し訳ないのですが、今実装してみたところ、チェックボックスの出力のところが、チェックしても、”チェックしてません”になるのですが、jsの何がいけないかでわかりそうでしょうか?

    キャンセル

  • 2018/09/11 18:55

    ぱっと見た感じですが、
    forで繰り返し処理を行っていますが、最後のチェックボックスがチェックされていないと、それまでの処理に関係なくstrに"チェックなし"が入って上書きされてしまうからだと思います。

    キャンセル

  • 2018/09/11 19:55

    ありがとうございます!
    確かに最後のチェックは反応するんですね、”チェックなし”も一緒に出力されますが、、、

    もしわかりそうでしたらこちらもお願いします!

    キャンセル

  • 2018/09/11 20:20

    すみません、あれから解決できました!なぜ最後のチェックだけそんな挙動なのかは未だ理解できていませんが問題は解決しました!質問箇所で直しておきます!

    ありがとうございましたm(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る