Question: I have a form with a submit button that will direct to a different URL/website when someone clicks on it. For example, the form is on domain1.com and it will redirect someone to domain2.com

The page that I am redirecting to is sometimes slow processing the information submitted in the form, so I'd like to open a Bootstrap modal that says "Please wait, redirecting" and will stay open until domain2.com loads.

How would I achieve this?

My form button is like this:

```
<form action="http://www.domain2.com" method="post" id="my_form">
<input name="my_form_submit" type="submit" value="Send" class="btn btn-primary">
</form>

```

The modal is like this:

```
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Please wait, redirecting you ...
      </div>
    </div>
  </div>
</div>

```

To launch the modal, I have to add

```
 data-toggle="modal" data-target="#myModal"

```

To the submit button, but that causes the submit button to open the modal instead of the link.

Answer: 
A possible solution could be using a button calling a javascript function (using onclick event) as the submit and in that function something like:

```
$('#myModal').modal('show'); 
document.forms['my_form'].submit();

```
Try this:

```
$('#my_form').submit(function () {
    if ($(this).valid()) {
        $('#my_form').modal('show');
    }
    else {
        $('#my_form').modal('hide');
    }
});

```