Question

I have a bootstrap modal that have a form and it successfully submitted and get the success message, suppose I want to add a link to the same modal to load the same form from the current open modal.

When I click the link the modal hidden.

this is my link that links to the modal.

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

Thanks

Answer 1

The way I would approach this is to have the form data in a hidden div (let’s call it formData) that is completely separate from the modal div. For example:

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

Then create an event, so that when the modal shows, it loads the form data into the body of the modal:

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

Then finally, add an event to the button that reloads the form (here the button has an 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 here. (Ignore the code for the submit button, this is just to simulate form submission).