twitter-bootstrap - 最初の送信後に同じ Twitter ブートストラップ モーダルをロードする

Question

現在開いているモーダルから同じフォームをロードするために、同じモーダルにリンクを追加したいとします。

リンクをクリックすると、モーダルが非表示になります。

これは、モーダルにリンクする私のリンクです。

<a class="registerBtn" data-toggle="modal" href="#registerModalForm" >Register</a>

ありがとう

Answer 1

formDataこれにアプローチする方法は、モーダル div とは完全に分離された非表示の div (これを と呼びましょう) にフォーム データを配置することです。例えば：

<div id="formData" class="hide">
   <form href="#" action="post">
      Name: <input id="nameText" type="text"/>
      <a href="#" id="mySubmit" class="btn btn-primary">Submit</a>
   </form>
</div>

次に、モーダルが表示されたときにフォーム データをモーダルの本体にロードするように、イベントを作成します。

$("#myModal").on("show", function() {
    // load the modal with content from the div formData
    $(".modal-body", this).html($("#formData").html());
});

最後に、フォームをリロードするイベントをボタンに追加します (ここでは、ボタンには id = がありますmyReload:

$("body").on('click', 'a.btn-primary', function() {
      // A button with the class btn-primary was clicked. If this is the reload button
      // reload the HTML into the modal
      if ($(this).attr("id") == "myReload") {
                 $(this).parent().html($("#formData").html());
      }
});

ここで JSFiddle。(送信ボタンのコードは無視してください。これは、フォームの送信をシミュレートするためのものです)。