提交表格后如何延迟弹出窗口的关闭？

Question

I use popup window to fill out form and submit data to MySQL. If I manually close the the popup window after submitting the data, it works fine. However, if I close the window by using "onsubmit" to trigger "window.close", the window is immediately closed, but many times the data is not saved. I guess the window closed too fast, even before the data has been sent to the server. I tried to delay the close of the window by using setTimeout function. I cannot make it to work, I mean the delay of closing of popup window.

This is the parent window code:

<input type="submit" value="my phsical template" onclick="popupUploadForm()"/> 

<script type="text/javascript"> 
function popupUploadForm(){
    var newWindow = window.open('physical.php');
} 
</script>

The popup window code. Window is closed after pushing "save". But most of the time, data is not saved.

  <form  method="post" action="physical.php" onsubmit="closeSelf()">
  <textarea name="text" id="textarea" cols="45" rows="10"></textarea>
  <div><input type="submit" value="Save"/></div>

<script type="text/javascript">
 function closeSelf(){
     self.close();
  };   
 </script>

Try to delay the close of the window. it doesn't work.

 function closeSelf(){
 setTimeout(function(){
self.close();
},1000);  }; 

Answer 1

Simply disable the submit button, wait for the server response and then close your modal using promises: http://jsfiddle.net/5L52o0Le/

<div id="modal">
    <form id="myform" class="ui form">
        <div class="field">
            <label>Username</label>
            <input type="text"/>
        </div>
        <div class="field">
            <label>Password</label>
            <input type="password"/>
        </div>
        <button class="ui primary button">Save</button>
    </form>
</div>

javascript

$('#myform').submit(function(e) {
    // Prevent normal submit to server, use JavaScript instead
    e.preventDefault(); 

    // Check if save already in progress
    if ($('#myform .primary').hasClass('disabled')) {
        return;
    }

    $('#myform .primary').addClass('disabled');

    // Send form data to server...
    var promise = $.ajax({
        url: 'https://api.github.com/repos/laravel/laravel/issues?state=closed',
        method: 'GET'
    });

    // Ran after success
    promise.done(function() {
        console.log('closing modal... TODO');
    });

    promise.fail(function() {
        console.log('failed... something went wrong');
    });

    // Regardless of fail or success
    promise.always(function() {
        $('#myform .primary').removeClass('disabled');
    });
});