CODEWITHSUNDEEP
jqueryformssubmitbootstrap-modal
Chris
Chris

Reputation: 435

Bootstrap load remote form into modal

I'm using a bootstrap modal to load a remote FORM into the modal. But When I click the submit button from the form the on.submit function is not execute ! The click on the submit button send me directly to the page located in the action tag !

The html

    <a href="v1_users.inc.php" data-toggle="modal" data-target="#myUsers"><i class="fa fa-users" aria-hidden="true" style="font-size:2em"></i></a>

    <div id="myUsers" class="modal fade move-horizontal" data-backdrop="static" data-keyboard="false">
      <div class="modal-dialog custom-connect modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 id="connectLabel" class="modal-title" style="color:#818181"><i class="fa fa-users" style="color:#818181"></i> Comptes utilisateurs </h3>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

The javascript

  $('a[data-toggle="modal"]').on('click', function(e) {
    var target_modal = $(e.currentTarget).data('target');
    var remote_content = e.currentTarget.href;

    var modal = $(target_modal);
    var modalBody = $(target_modal + ' .modal-body');

    modal.on('show.bs.modal', function () {
            modalBody.load(remote_content);
        }).modal();

    return false;
  });

    $(".myRemoteForm").on("submit", function(e) {
        alert('TEST');
    });

Thanks for your help...

Upvotes: 0

Views: 1469

Answers (1)

steven
steven

Reputation: 104

The on.submit binding will not working because it might happen that the remote page still not finished loading and put into the DOM, while the binding already executed.

Just ensure the on.submit binding event are executed after the remote DOM are loaded.

E.g. change your load into:

modal.on('show.bs.modal', function () {
        modalBody.load(remote_content, function(){
            $(".myRemoteForm").on("submit", function(e) {
                alert('TEST');
            });
        });
    }).modal();

Upvotes: 2

Related Questions