javascript - functions - ¿Cómo deshabilita el botón de envío después de un solo clic para evitar los envíos múltiples en Angularjs?
ng-model (10)
He buscado en toda la web, incluidos varios ejemplos de desbordamiento de pila para encontrar una solución a la pregunta. Para ser específico, he intentado esto:
var disableButton = function() {
document.getElementById(''<%= btnSubmit.ClientID %>'').disabled = true;
}
$scope.isDisabled = false;
var someFunc = function() {
$scope.isDisabled = true;
}
<button OnClientClick="disableButton()" type="submit">Submit</button>
<button ng-disabled="isDisabled" type="submit">Submit</button>
Ninguno funcionó como lo anuncian. ¿Cualquier otra sugerencia? Por favor sugerencias angulares solamente. Gracias.
Agregue <input type="checkbox" ng-model="isDisabled"> y agregue isDisabled en el atributo ng-disabled="isDisabled" , así que cuando selecciona el botón de la casilla de verificación se desactiva y desactiva la casilla de verificación, habilite el botón
Por favor vea el enlace http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview
Aquí está la respuesta que tengo que trabajar para mi escenario de envío de formulario único:
$scope.increment = 0;
$scope.someFunc = function() {
$scope.increment++
if($scope.increment > 1) {
return;
} else {
//do something else
}
}
No hay directivas o HTMl necesario.
Debido a razones históricas, solo (o) se envía dentro del formulario si el tipo no es ''enviar''.
Según MDN , el botón puede tener atributo de tipo.
<button type="button">Your button</button>
Hace que el botón no tenga un comportamiento por defecto.
Here está la respuesta más detallada.
Encuentra el ejemplo de trabajo también.
HTML
<body ng-app="DisableButtonApp">
<div ng-controller="MyAppCtrl">
<button ng-click="someFunc()" ng-disabled="isDisabled" ng-model="isDisabled"type="submit">Submit</button>
</div>
</body>
JS:
angular.module(''DisableButtonApp'', [])
.controller(''MyAppCtrl'',[''$scope'', function($scope){
$scope.isDisabled = false;
$scope.someFunc = function(){
alert("Clicked!");
$scope.isDisabled = true;
return false;
};
}]);
Estuviste muy cerca de la respuesta. Lo único que se perdió fue llamar a la función someFunc() en el botón usando ng-click .
El otro problema es que, en su controlador, la función debe ser $scope.someFunc() y no var someFunc()
Ejemplo de trabajo: su index.html debería ser como:
<html>
<head>
<script data-require="[email protected]" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="application.js"></script>
</head>
<body ng-app="demo" ng-controller="demoController">
<button type="submit" ng-disabled="isDisabled" ng-click="disableButton()"> Click me to disable myself</button>
</body>
</html>
Y tu controlador application.js será como:
angular.module(''demo'', [])
.controller(''demoController'',function($scope){
$scope.isDisabled = false;
$scope.disableButton = function() {
$scope.isDisabled = true;
}
});
Intenta usar esto:
<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>
También hay diferentes enfoques para lograr esta funcionalidad, puede ir a través de los siguientes enlaces, seguramente le ayudarán.
https://.com/a/21638542/4373895
https://.com/a/22720438/4373895
https://.com/a/17083781/4373895
No me gustó ninguna de las respuestas proporcionadas, ya que todas ellas isDisabled el alcance global con la variable isDisabled , ¿por qué no hacerlo de esta manera?
<button type="submit" ng-click="disableButton($event)">Submit</button>
.
$scope.disableButton = function($event) {
$event.currentTarget.disabled = true;
};
si si necesita enviar un formulario antes de deshabilitar.
este código no está probado
<form ng-submit="disableFormSubmitButton($event)">
<button type="submit">Submit</button>
</form>
.
$scope.disableFormSubmitButton = function($event) {
$($event).find(''[type=submit]'').prop(''disabled'',true);
};
Otra forma es escribir una directiva que deshabilita el botón de envío.
angular.module(''myApp'').directive(''clickedDisable'', function(){
return {
restrict: ''A'',
link: function(scope, ele, attrs){
$(ele).click(function(){
$(ele).attr(''disabled'', true);
});
}
};
Y en el HTML
<button type="submit" clicked-disable></button>
Para lo que valga, puedes hacer eso directamente en la plantilla:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<button ng-disabled="isDisabled" ng-click="isDisabled=true" type="submit">Submit</button> isDisabled={{isDisabled}}
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
<button type="submit" name="submit" class="btn btn-success" ng-disabled="isDisabled" ng-click="isDisabled=true">Hochladen</button> isDisabled={{isDisabled}}
</body>