show modal after form submission until next page loads... does not work on safari?

Question

I have a button like this

<form action="/category" method='GET'>
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>

and I have some javascript which starts a modal whenever the button gets clicked... this is just to let the user know that the next page is loading.

<script type='text/javascript'>
    $(document).ready(function(){
        $(".render").click(function(evt){
            $('#render_page').modal('show');
        });
    });
</script>

Here is the html for the modal

<div class="modal fade" id="render_page" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="form-horizontal">

                <div class="modal-body">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <div id="user_msg" align="left">Rendering Page... </div>
                </div>

            </div>                                  
        </div>
    </div>
</div>

This all works fine on Firefox and Chrome, but Safari does not show the modal? If I put the form within the button, it starts the modal, but it does not submit the form. So both aspects, the form submission and the modal do work, but safari does not want to do both?

Answer 1

There some other ways as given below

1: you can call a function on form submission. Just Add onsubmit="myFunction()" with function name (e.g myFunction) in form tag. As given below

<form action="/category" method='GET' onsubmit="myFunction()">
    <button type="submit" class="btn btn-default render">
        name
    </button>
</form>





<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>

2: you can also call this function by adding onclick="myFunction()" in submit button.

<form action="/category" method='GET'>
    <button type="submit" class="btn btn-default render" onclick="myFunction()">
        name
    </button>
</form>




<script>
function myFunction() {
    $('#render_page').modal('show');
}
</script>

I am sure one of these will solve your issue.

Answer 2

try this

<script type='text/javascript'>
    $(document).ready(function(){
        $(".render").click(function(evt){
            evt.preventDefault();
            $('#render_page').modal('show');
        });
    });
</script>

https://jsfiddle.net/y64qyjzo/

Update: added a timer to allow the user to notice the modal:

$(document).ready(function() {
  $(".render").click(function(evt) {
    evt.preventDefault();
    $('#render_page').modal('show');
    setTimeout(function() {
      $('#testForm').submit();
    }, 1000)
  });
});

(add the id 'testForm' to the form)

https://jsfiddle.net/y64qyjzo/3