HTMLにてFormのテキストエリアで入力した内容をモーダルで表示させたい

###前提・実現したいこと
HTMLのテキストエリアで受け取った内容をBootstrap3のモーダルで表示させたいのですが方法が思いつきません。
知っている方がいればご教授お願いします。

参考

Bootstrap3で用意されているモーダルウィンドウ Modalsの使い方の説明
http://bootstrap3-guide.com/javascript/modal.html

###該当のソースコード
HTML, javascript

・
・
・
////////////////入力部分////////////////////////////////////////////////////////
<div class="form-group">
            <label for="aaa" class="">内容</label>
            <div class="ccc">
                {{ Form::textarea('content', null, array('class' => '')) }}
                <script>
                    var element = document.getElementById('content');
                    element.innerHTML = content;
                </script>
            </div>
        </div>
///////////////////////////////////////////////////////////////////////////////

・
・
・
        <!--   投稿ボタン   -->
        <div class="form-group" align="right">

            <!-- モーダルウィンドウを呼び出すボタン -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">投稿</button>

            <!-- モーダルウィンドウの中身 -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                            <!-- 確認メッセージ -->
                            <center>
                                <h4 class="modal-title">この内容で投稿します。<br>よろしいですか。</h4>
                            </center>
                        </div>



                        ////モーダル内で表示////////////////////////////
                        <!-- 投稿内容 -->
                        <div id="content" class="modal-body">
                            <script>
                                document.open();
                                document.write(element);
                                document.close();
                            </script>
                        </div>
                        //////////////////////////////////////////////


                        <div class="modal-footer">

                            <!-- 左寄せキャンセルボタン -->
                            <div class="btnLeft">
                                <div class="form-group">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">キャンセル</button>
                                </div>
                            </div>

                            <!-- 右寄せOKボタン -->
                            <div class="btnRight">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">OK</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

kei344

2017/09/13 05:36

テンプレートのような記述がありますが、何かフレームワークなどを利用されていますか？その場合その情報も質問文に追記されたほうがよいと思います。

matsudairare

2017/09/13 05:44

回答ありがとうございます。Bootstrap3で用意されているモーダルウィンドウを使用しています。質問文内にURLと合わせて追記しました。

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

回答1件

ベストアンサー

「モーダルウィンドウを呼び出すボタン」をクリック時のイベントを書いて、その中でtextareaの入力情報を取得してモーダル内に設置すれば良いと思います。

サンプル：(※未検証につき参考程度にお願いします)

HTML
1ボタンにIDを振る（javascriptで扱いやすくするため）
2<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="modal_confirm">投稿</button>
3
4モーダルBODYのIDを変更（textareaとIDが重複するため）
5<div id="modal_content" class="modal-body">
6</div>
7

javascript
1$(function (){
2  $("#modal_confirm").on("click", function(){
3    var content_value = $("#content").val();
4    $("#modal_content").html(content_value);
5  });
6});
7