使用 angular.js 防止多个表单提交 - 禁用表单按钮 [英] prevent multiple form submissions using angular.js - disable form button

问题描述

我想防止使用 angular.js 提交多个表单.该问题与此问题有关.

I want to prevent multiple form submissions using angular.js. The question is related to this question.

当用户点击表单提交按钮时，提交按钮的值/标签应更改为正在加载.."，按钮的状态将设置为禁用并且提交事件应以正常方式触发，导致对服务器的提交调用.这样用户会看到以下效果:

When the user clicks on a form submit button the value / label of the submit button should change to "loading..", status of the button will be set to disabled AND the submit event should be triggered in the normal way, leading to a submit call to the server. This way the user would see the following effect:

1. 立即:提交按钮值更改为正在加载.."并被禁用

1. Immediately: The submit button value changes to "loading.." and gets disabled

一旦服务器响应:用户就会收到服务器请求的结果(而服务器响应是在没有角度干预的情况下处理的)

As soon as the server responds: user gets presented the result of the server request (whereas server responds are handled without angular intervention)

我创建了这个 plunk 来表达我的意思.我的问题与这一行有关: elm.attr('disabled',true); .这不仅会禁用按钮，还会阻止传播提交事件.因此，我得到一个禁用的按钮(所需结果)，但未提交表单(非预期结果).

I created this plunk to show what I mean. My issue relates to this line: elm.attr('disabled',true); . This does not only disable the button, but also prevent to propagate the submit event. Thus I get a disabled button (desired result), but the form does not get submitted (undesired result).

如果您注释/取消注释此行，您可以看到变化的行为:elm.attr('disabled',true);

You can see the changing behavior if you comment / uncomment this line : elm.attr('disabled',true);

知道如何改变这一点吗?

Any idea how to change this?

推荐答案

尝试 $timeout(angularjs 函数)

Try a $timeout (the angularjs function)

$timeout(function(){
    elm.attr('disabled',true);
}, 0)

这篇关于使用 angular.js 防止多个表单提交 - 禁用表单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！