如何防止双表单提交而不丢失任何数据？
我有一个带有两个按钮的HTML表单
<form action="...">
...
<input type="submit" name="button1" value="Localized button 1">
<input type="submit" name="button2" value="Otro botón">
<form>并遵循JavaScript代码
// prevent double submit and display a nice animation while submitting
$(document).on("submit", "form", function(event)
{
$(this).find("input[type=submit], button").each(function()
{
var $button = $(this);
$button.attr("disabled", "disabled");
$button.addClass("submitting");
setTimeout(function()
{
$button.removeAttr("disabled");
$button.removeClass("submitting");
}, 10000); // remove disabled status after timeout (ms)
});
});(加上一些CSS转换和动画，使.submitting看起来很漂亮)
上面的代码试图阻止双表单提交，因为有些人似乎误解了web，并继续双击“普通表单提交”按钮。另外一些人因为握手或者鼠标按钮坏了，所以触摸屏也有问题，所以这也是关于可用性的问题。
问题是Google在收集提交表单时要发送的数据之前运行事件处理程序on("submit")。因此，如果禁用输入值的控件，则不发送输入值的HTML5规则会妨碍并防止在服务器可以看到的请求中包含任何提交按钮。(服务器正在寻找参数button1或button2，但忽略了实际值，因为它是一个本地化字符串，具有历史的HTML规则。)
如何在符合HTML5规则的浏览器上禁用提交按钮，并且仍然可以获得有关按下的实际按钮的信息？，我非常希望有一个具有语义正确的HTML5源代码的解决方案。是否有一种方法可以在收集表单数据并将其传输到服务器后运行代码？
有些相关的非副本(请不要将此标记为其中任何一份的副本)：
附加要求：
submission.
- No
- 允许在延迟后(在上面的示例中为10秒)重新提交表单，以允许用户解决中断的网络连接或有意识的双
- 解决方案(例如，在实际的
on("submit")事件之后运行上述代码，并在短时间内超时，希望浏览器已经收集到数据，但用户还不够快，无法双击按钮。
- 仍应禁用JavaScript )--在这种情况下没有双重表单提交预防措施是可以的。
- No hacks例如将包含缺失参数的隐藏表单输入添加到DOM.
中。
回答 2
Stack Overflow用户
发布于 2020-04-27 10:27:03
下面是一个看起来足够健壮的实现，可以用于生产：
// prevent double submit and display a nice animation while submitting
$(document).on("submit", "form", function(event)
{
$(this).find("input[type=submit], button").each(function()
{
var $button = $(this);
if ($button.attr("disabled"))
return; // this button is already disabled, do not touch it
setTimeout(function()
{
$button.attr("disabled", "disabled");
$button.addClass("submitting");
setTimeout(function()
{
$button.removeAttr("disabled");
$button.removeClass("submitting");
}, 10000); // remove disabled status after timeout (ms)
}, 0); // let the event loop run before disabling the buttons to allow form submission to collect form data (and emit "formdata" event) before disabling any buttons and hope that user is not fast enough to double submit before this happens
});
});setTimeout(..., 0)是允许Chrome运行其事件循环一次的黑客，在禁用按钮之前让Chrome收集表单数据，这将从提交的数据中删除有关按钮的信息。据我所知，这对用户输入是不合理的，因为我们可以在这里使用0的延迟，并且用户无法输入任何具有零延迟的输入。
Stack Overflow用户
发布于 2020-02-11 17:16:38
在禁用按钮之前，使用onClick()劫持单击并提交表单如何？
未测
$('input[type=submit]').click(function(e) {
var $submitButton = $(e.target);
// prevent automatic form submission
e.preventDefault();
// prevent double click without disabling
if (! $submitButton.hasClass('submitting')) {
$submitButton.addClass('submitting');
// submit your form contents
$('#your-form-id').submit();
// disable all submit buttons
$(this).find("input[type=submit], button").each(function()
{
var $button = $(this);
$button.attr("disabled", "disabled");
$button.addClass("submitting");
setTimeout(function()
{
$button.removeAttr("disabled");
$button.removeClass("submitting");
}, 10000); // remove disabled status after timeout (ms)
});
}
});https://stackoverflow.com/questions/60171869
复制相似问题
腾讯云开发者
