提交表单后关闭javascript弹出窗口并更新父页面？
我从index.ejs弹出窗口，称为math.ejs。按下Submit 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/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>
Ajax请求通常使用jQuery更容易。我将库包含在上面的代码中，但是理想情况下，您应该将其添加到<head>中。在这里，我正在使用$.post函数（documentation）
提交表单后关闭javascript弹出窗口并更新父页面？
我从index.ejs弹出窗口，称为math.ejs。按下Submit 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/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>
Ajax请求通常使用jQuery更容易。我将库包含在上面的代码中，但是理想情况下，您应该将其添加到<head>中。在这里，我正在使用$.post函数（documentation）