如何在提交表单后延迟弹出窗口关闭？

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'); 
    }); 
});