如何防止木兰形式重复提交

Posted 2023-02-16

【中文标题】如何防止木兰形式重复提交

【英文标题】：How to prevent double submission in magnolia form

【发布时间】：2020-04-16 13:07:47

【问题描述】：

我尝试向提交按钮添加处理程序

<input type="submit" value="Submit/ Soumettre" onclick='submitform(); this.disabled = true;'>

function submitform()

    let myForm = document.getElementById('MyForm');
    myForm.submit();

但这会杀死所有输入字段验证器（在我的情况下是电子邮件字段验证器）。

Magnolia 应该为这种常见的用例提供一些东西。

澄清：附加到“提交后的页面”的模型类执行耗时的服务请求。所以用户看不到新页面，可以多次点击提交按钮。

【参考方案1】：

我没有在提交按钮上附加处理程序，而是将处理程序放在 form.onsubmit 上

<div id='shadow' style="display: none; position: absolute; width:100%;height:100%;opacity:0.3;z-index:100;background:#000"></div>
<form id="MyForm" method="post" action="" enctype="multipart/form-data" onsubmit="blockScreen()"> ... </form>

function blockScreen()
    let elem = document.getElementById('shadow');
    elem.style.display = 'block';
    elem.addEventListener('click', function(), false);

那个阴影会挡住屏幕，只有在所有验证器都完成后才会激活