投稿フォーム　投稿内容の表示の仕方

Javascriptの初歩の初歩だと思うんですが、独学で勉強したてで早速つまづいてしまったので、よろしければアドバイスなどいただければと思い質問させていただきます。

まづHTMLだけでアンケート投稿フォームを作りまして、その内容を反映させたいのですが、うまくいきません。

http://jsdo.it/Ituki/uRBLのサイトを参考にしました。やりたいことが若干ちがうんですがとても近いと思うのでここから正解にたどりつけるかな？と思って試行錯誤しています。

上記サイトでは入力して即下に内容を表示させていますが、やりたいのは、登録ボタンを押したら下のほうに入力した内容がでてくるというものです。

現在の状況です

htmlファイル

<!DOCTYPE html>
<html>
    <head>
        <title>Javascriptの勉強</title>
        <link rel="stylesheet" type="text/css" href="test_css.css">
        <script type="text/javascript" src="test_js.js"></script>
    </head>
        <body>
          <legend class="form"><h1>入力フォーム</h1>  
            <form method="get" id="form" name="main_form">
                <p class="name">
                    名前：<input type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" value="">
                </p>
                <p class="gender">
                    性別：
                    <label for="gender1">男性</label><input type="radio" name="gender" value="male" id="gender1">
                    <label for="gender2">女性</label><input type="radio" name="gender" value="female" id="gender2">
                    <label for="gender3">その他</label><input type="radio" name="gender" value="another" id="gender3" checked="checked">
                </p>
                <p class="age">
                    年齢：<select name="age">
                        <option>~20代</option>
                        <option>30代~40代</option>
                        <option>50代~60代</option>
                        <option>70代~</option>
                    </select>
                </p>
                <p 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>
                </p>
                <p class="free_space">
                    自由記入欄：<br>
                    <textarea name="free_space" cols="50" rows="6" placeholder="ご自由にご記入して下さい" ></textarea>
                </p>
                <p>
                    <input type="submit" value="送信する">
                    <input type="reset" value="クリア">
                </p>
            </form>
                <div id="output">
                    <br />
                    名前：<span id="OutputName"></span>

                </div>
          </legend>  
        </body>
</html>

jsファイル


window.onclick = function getValue() {
    var $formObject = document.getElementById( "form" );

    //input[name=text]
    document.getElementById( "OutputName" ).innerHTML = $formObject.name_form.value;

}

まとめて出力は難しいと思ったのでとりあえず最初の名前だけ出力しようとした記述です。

以上です。もしよろしければアドバイスいただけると助かります！自分でも直そうとしているのでうまくいけば記入したいとおもいます。よろしくお願いいたしますm(__)m

m.ts10806

2018/09/06 12:00

タグにあることでJavaScriptに関することであることはわかるので、タイトルはもう少し要件に寄った内容にしていただけると質問一覧から見た時に伝わりやすくなります。「できないこと」「やりたいこと」を簡潔に書く感じですね。

takeke

2018/09/06 12:50

失礼しました。その通りですね！修正いたしましたm(__)m

行動規範の内容に同意します

回答1件

ベストアンサー

いくつかやりたいことがあるようなので全ての回答になっているかは分かりませんが。

type="submit"はその名の通り、formの内容を送信するボタンです。
押したら送信をしてしまいます。
return false;とするかpreventDefaultを導入してSubmitを止める必要があります。

もしかしたら要件と違うかもしれませんが、
つまるところ「下に入力した内容がでてくる」「別のページに内容が反映される」は同時にはできません。
ボタンを押して入力内容を同じ画面に出してからもう一度送信・・となります。
つまり1つ目のボタンがtype=submitである意味がないわけです。

「別のページに内容が反映される」部分についてはJavaScriptで対応するより、PHPなどサーバー側の言語で対応するほうが適切かと思います。
form送信は基本はサーバーに向けて送信するものですので。
できればmethodもgetではなくpostにしたいところですね。

投稿2018/09/06 13:21

m.ts10806

総合スコア80850

takeke

2018/09/06 18:28

回答ありがとうございます！同時実装は考えてないので安心してください！下に表示する場合にはｊｓファイルにreturn false; を書き足すということですね？というか、下に表示するだけならtype="submit"は使わないほうがいいですか？buttonでしょうか？できたらとりあえずはJavascriptとHTMLだけで実装したいのです＞＜送信はpostですね！こちらも色々調べたのですがgetとpostのどちらが適切なのか判断できませんでしたので助かります。デフォルトがgetというのは分かったのですがｗ実装できる記述の方がまだわからないので引き続きよろしくお願いいたします。

m.ts10806

2018/09/06 20:55

送信しないのでsubmitは不適当です。色々なことが一気に書いてあるので要件が汲み取りにくいところがありますね。やりたいことがたくさんあるのは良いことですが、一度流れを整理された方がいいかもしれません。そうすると何を組み込むのが適切か見えてきます。 GETもPOSTもそれぞれ適材適所(メリットデメリット)があるので、要件によって考えて決めていきましょう。

takeke

2018/09/09 16:46

度々ありがとうございます！おっしゃるとおり、一つづつ解決していこうと思います。ひとまづ、記入した内容を下の方に出力ということだけに焦点を当てて実装を目指したいと思います。おそらくコメント記入欄やラジオボックス、セレクトボックス等で記述の仕方が変わると思うので少しづつ解決していって、こちらの質問文のところを修正していこうと思っています。もしお時間ありましたら引き続きよろしくお願いいたします。

行動規範の内容に同意します