前回の質問で質問し忘れたものがありそのままベストアンサーを押してしまったのでもう一度質問します…

 <body>
   <h1>お問い合わせ</h1>
    <form action="sample.php" method="post" name="cancel">
     <p><label>お名前:<input type="text" name="i" id="uname"></label></p>
     <p><label>パスワード:<input type="password" name="ijk" size="20"></label><p>
    <p>
     <label>お住いの都道府県:</label>
     <select id="prefecture" name="j">
      <option selected value="todohuken">都道府県</option>
      <option value="茨城県">茨城県</option>
      <option value="栃木県">栃木県</option>
      <option value="群馬県">群馬県</option>
      <option value="埼玉県">埼玉県</option>
      <option value="千葉県">千葉県</option>
      <option value="東京都">東京都</option>
      <option value="神奈川県">神奈川県</option>
     </select>
     </p>
     <fieldset><legend>性別</legend>
      <input type="radio" name="k" value="Male" id="male"><label for="male">男性</label>
      <input type="radio" name="k" value="Female" id="female"><label for="female">女性</label>
     </fieldset>
     <label>メールアドレス:<input type="email" name="jj" id="email"></label>
    <p>
     <label for="demand">お問い合わせ内容:</label><br>
     <textarea id="demand" name="demand" cols="40" rows="4" maxlength="20"></textarea>
    </p>
       <input type="submit" value="送信" onClick="return check()"></p>
    </form>
 </body>

これはJavascriptでの登録フォームのHTMLの部分なのですが送信前に都道府県を入力すると同時にお問合せ内容の部分にその選択した都道府県が改行されて送信前に入力されるようにしたいです。どのようにしたらいいのでしょうか？？
ネットで調べたりしたんですが全くヒントとなるサイトも見つからず… おそらく<textarea></textarea>内に書くと思うのですが何をどのように書いたらいいかが全く分かりませんでした。
とりあえず書いてみたのは

<textarea id="demand" name="demand" cols="40" rows="4" maxlength="20">document.cancel.j</textarea>

や

<textarea id="demand" name="demand" cols="40" rows="4" maxlength="20" document.cancel.j></textarea>

ですが一番目はただお問い合わせの中にただのコードが入ったのみ、二番目は何も変化なしでした… どうしたらよかったのでしょうか…？

教えてもらったリンク先で書いてあったものを書いてみて

     <select id="prefecture" name="j" onChange="pre()";>

    function pre(){
          var index = document.cancel.j.selectedIndex;
        var value = document.cancel.j.options[index].value;
        
        document.cancel.demand.value = value;
       }

ここまでやっとできたんですがこれで選択するともともとお問い合わせに入っていた文が消えてしまうんですけど追加という形で表示するにはどうしたらいいでしょうか…？

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

回答1件

ベストアンサー

「やりたいこと」をJavaScriptの動作に近づけると下記のようになります。
参考URLをつけてますので、参考に組んでみてください。

都道府県のセレクトボックスが変更された時にイベントを発生させ、セレクトボックスの情報を取得する

フォーム変更時の処理(onChange) - イベント処理 - JavaScript入門
 [ Javascript ] select.onchange で変更された項目の値とテキストを取得
0. 1.のイベント内でtextareaに表示されている情報を取得する
0. 2.で取得した情報(文字列）に改行を付加しtextareaに情報を設定する
テキストエリアの値を取得・設定
 テキストエリアの改行について...

一応、これも。
文字列の連結

やってみて不明点ありましたら別途質問してください。

補足

<option selected value="todohuken">都道府県</option>

これは不要に思います。既にlabelも設置されているようですし、都道府県そのものではありませんよね。

補足２

ネットで調べたりしたんですが全くヒントとなるサイトも見つからず

とのことですが、「やりたいこと」があったときにそのものズバリの内容が出てくることは殆どないと思います。
ですのでその「やりたいこと」を細かく分解し、必要な部品はないか考え、その部品を集めるようにすると少しずつ「やりたいこと」実現に近づいていきます。
今回のようにJavaScriptで実現するという大枠の手段は決まっているようですので、そのJavaScriptでどんな動作をさせたら実現できそうかですね（その動作・部品がJavaScriptで可能かどうかも要調査）
部品を集めたらその部品毎に実際に組んでみて動かしてみて検証して、思うとおりの動作をしているか、次の段階に渡っていけそうかを検討する。
そうやって部品を完成品にもっていきます。
今回ですと僕が提示した1,2,3の動作が「部品」となります。この「部品に分解」することができるようになると一気に技術力が高まりますよ。
がんばってください。

投稿2017/05/25 22:43

編集2017/05/26 00:29

m.ts10806

総合スコア80850

退会済みユーザー

2017/05/26 06:23

リンク先の通りに　　select タグの中に　onChangeを入れたんですが　そのあとはどこに追加したらいいかよくわからず…　textareaに追加するには　textareaタグの中に書くわけではないんでしょうか？？

m.ts10806

2017/05/26 08:21

textareaタグの中に書く必要はありません。なぜならtextareaの内容は誰かによって書かれるものだからです。これも段階をおって進めていきましょう。 onchangeということは「変更されたときにイベントが実行される」となります。では、セレクトボックスから何か選んだ際にpre()が実行されるのを確かめて見てください。なんでもいいです。例えば function pre(){ alert(1); } とか。ダイアログで「１」と表示されれば「セレクトボックス選択時にイベントが発生した」ことが確認できます。

m.ts10806

2017/05/26 08:22

次に「セレクトボックスを変更したときに今何を選んでいるのか取得する」ですね。取得したら本当に取得できたか確認です。（上記のようにalert()を使って）

m.ts10806

2017/05/26 08:22

次に「今セレクトボックスされている情報をテキストエリアに書き込む（値を設定する）」

m.ts10806

2017/05/26 08:23

書き込まれた確認ができたらもう一度セレクトボックスで別の情報を選択してみてください。上書きされたと思います。これは「テキストエリアの値を取得・設定」の「設定」のやり方だと設定値を「書き換える」ことをしているからです。

m.ts10806

2017/05/26 08:31 編集

次に「textareaの設定値を取得して、セレクトボックスの現在の選択値を後ろに結合して、textareaに再度値を設定する」をしてみましょう。そのまま「茨城県栃木県」のようにくっついて表示されたら結合する際に「改行コード」を間に入れると改行して「茨城県栃木県」のように表示されるようになります。あとは何度も動かして動作確認です。

m.ts10806

2017/05/26 08:26

おそらくあまり理解が進んでいないようなので、「やるべきこと」を分解して１つ１つコメントにしてみました。１つずつ確実に進めてください。一気に全てしようとすると混乱のもととなります。

退会済みユーザー

2017/05/26 08:32

変更してやってみたんですけど　もともと書いてあったものが　消えちゃうんです…　どうしたらいいんでしょうか…？

m.ts10806

2017/05/26 09:43

そもそも document.cancel.j これ何のために入れてるんでしたっけ？実現のために必要かどうかも考えてみましょう。

退会済みユーザー

2017/05/26 13:32

jという場所を呼び出すためですよね？？　必要だと思ったんですが…　　どれがいらないんでしょうか…？

退会済みユーザー

2017/05/26 14:03

いろいろとdocument.cancel.j の一部を消したりしたんですけど　うまくいかず…　どこを直せばいいんでしょうか…

退会済みユーザー

2017/05/26 15:47

なんとか完成しました！　document の部分をとって　 document.cancel.demand.value = value; を　 document.cancel.demand.value += value; にしたらできました！　でも、なぜ　＋なのか　それをもし説明していただけたら　うれしいです…

m.ts10806

2017/05/26 20:36

まず、JavaScriptは<script></script>の中に書かれていないと動作しません。つまり<script></script>の中に書かれてないと、何もしないただの文字列です。何もしないただの文字列を置いておく理由はありませんよね？それに「document.cancel.j 」はdocument(HTML全体)の中のcancelという部品の中のjという要素を指すだけであり、何か動作の指示をしているわけでもなにもありません。あったところで何もしないものなので不要ではないかと思います。 += は　「左辺に追加で代入する」という意味合いで省略の記法です。例えば左辺が数字であれば「加算」となり、左辺が文字列であれば「文字列を末尾に追加」となります。覚えておくと便利ですが慣れるまで見た目に違和感があると思います。例１（数字）： var i = 1; i += 5; // ５を加算 alert(i); // 6 これは i = i + 5; の省略 var str = "りんご"; str += "バナナ";　//バナナを追加 alert(str); //りんごバナナこれは str = str + "バナナ";の省略

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