onBeforeUnload 和多种形式
我希望有一个功能可以在用户离开页面时在页面上提交多个表单。有一个“你想拯救吗？”问题和我到目前为止的代码是这样的：
function checkForChanges( ) {
if (window.formform1Changed == true) {
if (window.asked == false) {
window.asked=true;
doSave = confirm("Wanna save? Click OK")
}
if (window.doSaveForms || doSave) {
window.doSaveForms = true;
document.forms.form1.submit();
}
}
if (window.formform2Changed == true) {
if (window.asked == false) {
window.asked=true;
doSave = confirm("Wanna save? Click OK.")
}
if (window.doSaveForms || doSave) {
window.doSaveForms = true;
document.forms.form2.submit();
}
}
}
它可能看起来有点矫枉过正，但它是由我们的模板引擎自动生成的，并且可以扩展到更多形式。
正文标签：
<body
onLoad="init();
window.formform1Changed=false;
window.asked=false;
window.doSaveForms=false;
window.formform2Changed=false;"
onbeforeunload="checkForChanges();">
其中一个表单的有趣部分（另一个看起来相同：
<input value="xyz" id="la" onchange="window.formform1Changed=true;" />
<input name="save" onclick="window.formform2Changed=false; window.formform1Changed=false;" type="submit" value="save" />
现在解决问题： 如果我更改两个表单中的值并离开页面，则会弹出第一个表单中的问题。我单击“确定”，表单已保存，但 form1.submit() 触发了一个新的 onBeforeUnload 事件，这打破了我想法的整个逻辑。
现在的问题是，是否有一种方法可以在用户离开时只询问一次而提交页面上的所有表单？
非常感谢任何帮助！
谢谢。
I want to have a feature to submit several forms on a page when the user leaves the page. There is this "do you wanna save?" question and my code so far is like this:
function checkForChanges( ) {
if (window.formform1Changed == true) {
if (window.asked == false) {
window.asked=true;
doSave = confirm("Wanna save? Click OK")
}
if (window.doSaveForms || doSave) {
window.doSaveForms = true;
document.forms.form1.submit();
}
}
if (window.formform2Changed == true) {
if (window.asked == false) {
window.asked=true;
doSave = confirm("Wanna save? Click OK.")
}
if (window.doSaveForms || doSave) {
window.doSaveForms = true;
document.forms.form2.submit();
}
}
}
It may seem a little bit of overkill but it is generated automatically by our template engine and may be extended to more forms.
The body tag:
<body
onLoad="init();
window.formform1Changed=false;
window.asked=false;
window.doSaveForms=false;
window.formform2Changed=false;"
onbeforeunload="checkForChanges();">
And interesting part of one of the forms (the other one looks identically:
<input value="xyz" id="la" onchange="window.formform1Changed=true;" />
<input name="save" onclick="window.formform2Changed=false; window.formform1Changed=false;" type="submit" value="save" />
Now to the problem:
If I change values in both forms and navigate away from the page, the question from the first form pops up. I click OK, the form is saved but the form1.submit() triggers a new onBeforeUnload event which breaks the whole logic of my idea.
The question now would be if there is a way to submit all forms on a page when only asking one time when the user navigates away?
Any help is highly appreciated!
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
表单提交需要回发，一旦您提交第一个表单，您的页面将重定向到该表单的“操作”，并且您将丢失其余表单中的信息。
在页面上拥有多个表单并不是最好的主意，但是，如果您绝对必须拥有它们，则保存所有表单的方法是将完整的回发替换为对 Web 服务（或站）的 AJAX 调用- 单独页面，接受查询字符串参数，尽管它不是那么安全或灵活的方式）。这样您就可以通过 AJAX 调用提交每个表单，而无需页面重定向。
Form submissions requires post-back, once you submit the first form, your page is redirected to the "action" of that form and you will lose the information in the rest of the forms you have.
Having multiple forms on the page is not the best idea, however, if you absolutely have to have them, the way to save all of them would be to replace full post-back with an AJAX call to a web-service (or a stand-alone page, that accepts query string parameters, though it's not as secure or flexible way). That way you can submit each form over the AJAX call without page redirecting.
正如 SLAks 所说，您将无法按照您尝试的方式提交多个表单。不过，您确实还有其他一些选择。您可以进行某种 ajax 调用来保存您关心的表单数据，而不是传统的表单提交。这是使用 jquery 和 php 的示例（链接)
As SLaks said, you will not be able to submit multiple forms in the way you are trying. You do have some other options though. Instead of traditional form submits you could make some kind of ajax calls to save the form data you care about. Here is an example using jquery and php (link)