表单提交后关闭javascript弹出窗口并更新父页面?



我有一个来自index.ejs的弹出窗口,叫做math.ejs。按下提交 Ok 按钮后,我希望 math.ejs 弹出窗口关闭并在 index.ejs 上显示计算值。但是现在,当我按下提交按钮时,弹出窗口会转到 index.ejs 并在那里更新它;它不会关闭。它不会在正常的 index.ejs 浏览器页面上更新它。我必须刷新该页面才能更新。

这是我用我的代码尝试过的内容:

<form class="" action="/index" method="post" name="mathform">
<p>Value: <%= myValue %></p>
<button class="btn btn-md" name="button" value="confirm" onclick="CloseAndRefresh();">Ok</button>
</form>
<script language="javascript">
function CloseAndRefresh() {
opener.location.reload(true);
setTimeout(function() {
window.close();
}, 3000);
}
</script>

我确信这会起作用,因为它告诉父窗口重新加载,我什至在弹出窗口关闭之前设置了一个计时器。感谢您的任何帮助!

这里有一些东西可以帮助你开始。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form class="" action="/index" method="post" name="mathform" onsubmit="submitForm(event)">
<p>Value: <%= myValue %></p>
<button class="btn btn-md" name="button" value="confirm">Ok</button>
</form>
<script language="javascript">
function submitForm(e) {
e.preventDefault(); // Prevents the form from getting submitted and navigating to /index
$.post("/index",{
// add your post field values here
field1: "value1",
field2: "value2",   
})
.done(function(data){ // ajax request completed successfully
CloseAndRefresh();
})
.fail(function(error) { // ajax request failed
// TODO: handle error accordingly
CloseAndRefresh();
});
}
function CloseAndRefresh() {
opener.location.reload(true);
// this timeout can be removed since the page refresh has already started at this point
setTimeout(function() {
window.close();
}, 3000);
}
</script>

使用jQuery 通常更容易使用 Ajax 请求。我在上面的代码中包含库,但理想情况下,您应该将其添加到<head>中。在这里,我使用的是$.post函数(文档(

最新更新