Как задержать закрытие всплывающего окна после отправки формы?

Question

Я использую всплывающее окно для заполнения формы и отправки данных в MySQL. Если я вручную закрываю всплывающее окно после отправки данных, он отлично работает. Однако, если я закрою окно, используя «onsubmit» для запуска «window.close», окно немедленно закрывается, но много раз данные не сохраняются. Я думаю, окно закрылось слишком быстро, даже до того, как данные были отправлены на сервер. Я попытался задержать закрытие окна, используя функцию setTimeout. Я не могу заставить его работать, я имею в виду задержку закрытия всплывающего окна.

Это код родительского окна:

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

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

код всплывающего окна. Окно закрывается после нажатия «сохранить». Но большую часть времени данные не сохраняются.

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

Попробуйте задержать закрытие окна. он не работает.

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

Answer 1

Просто отключить кнопку отправки, ждать ответ от сервера, а затем закрыть модальный с помощью обещаний: 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'); 
    }); 
});