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

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

ただいまの
回答率

88.78%

前回の質問の追加 Javascript

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 677
退会済みユーザー

退会済みユーザー

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

 <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;
       }


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

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

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

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

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

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

 補足

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

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

 補足2

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/26 23:03

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

    キャンセル

  • 2017/05/27 00:47

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

    キャンセル

  • 2017/05/27 05:36

    まず、JavaScriptは<script></script>の中に書かれていないと動作しません。つまり<script></script>の中に書かれてないと、何もしないただの文字列です。何もしないただの文字列を置いておく理由はありませんよね?
    それに「document.cancel.j 」はdocument(HTML全体)の中のcancelという部品の中のjという要素を指すだけであり、何か動作の指示をしているわけでもなにもありません。あったところで何もしないものなので不要ではないかと思います。

    += は 「左辺に追加で代入する」という意味合いで省略の記法です。
    例えば左辺が数字であれば「加算」となり、左辺が文字列であれば「文字列を末尾に追加」となります。覚えておくと便利ですが慣れるまで見た目に違和感があると思います。
    例1(数字):
    var i = 1;
    i += 5; // 5を加算
    alert(i); // 6

    これは
    i = i + 5; の省略

    var str = "りんご";
    str += "バナナ"; //バナナを追加
    alert(str); //りんごバナナ

    これは
    str = str + "バナナ";の省略


    キャンセル

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

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

関連した質問

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