javascript - pagina - mostrar mensaje despues de enviar formulario php
Al hacer clic en un botón dentro de un formulario, la página se actualiza. (9)
Añade acción a tu formulario.
<form action="#">
Tengo un formulario en Angular que tiene dos etiquetas de botones en él. Un botón envía el formulario en ng-click . El otro botón es puramente para navegar usando ng-click . Sin embargo, cuando se hace clic en este segundo botón, AngularJS provoca una actualización de la página que activa un 404. He dejado caer un punto de interrupción en la función y está activando mi función. Si hago algo de lo siguiente, se detiene:
- Si quito la tecla
ng-click, el botón no causa una actualización de la página. - Si comento el código en la función, no provoca una actualización de la página.
- Si cambio la etiqueta del botón a una etiqueta de anclaje (
<a>) conhref="", entonces no se produce una actualización.
La última parece ser la solución más sencilla, pero ¿por qué AngularJS ejecuta cualquier código después de mi función que hace que la página se vuelva a cargar? Parece un error.
Aquí está la forma:
<form class="form-horizontal" name="myProfile" ng-switch-when="profile">
<fieldset>
<div class="control-group">
<label class="control-label" for="passwordButton">Password</label>
<div class="controls">
<button id="passwordButton" class="secondaryButton" ng-click="showChangePassword()">Change</button>
</div>
</div>
<div class="buttonBar">
<button id="saveProfileButton" class="primaryButton" ng-click="saveUser()">Save</button>
</div>
</fieldset>
</form>
Aquí está el método del controlador:
$scope.showChangePassword = function() {
$scope.selectedLink = "changePassword";
};
Debe declarar el atributo ng-submit={expression} en su etiqueta <form> .
De los documentos ngSubmit http://docs.angularjs.org/api/ng.directive:ngSubmit
Habilita las expresiones angulares de enlace para enviar eventos.
Además, evita la acción predeterminada (que para el formulario significa enviar la solicitud al servidor y volver a cargar la página actual).
El primer botón envía el formulario y el segundo no
<body>
<form ng-app="myApp" ng-controller="myCtrl" ng-submit="Sub()">
<div>
S:<input type="text" ng-model="v"><br>
<br>
<button>Submit</button>
//Dont Submit
<button type=''button'' ng-click="Dont()">Dont Submit</button>
</div>
</form>
<script>
var app = angular.module(''myApp'', []);
app.controller(''myCtrl'', function($scope) {
$scope.Sub=function()
{
alert(''Inside Submit'');
}
$scope.Dont=function()
{
$scope.v=0;
}
});
</script>
</body>
Esta respuesta puede no estar directamente relacionada con la pregunta. Es solo para el caso cuando envía el formulario utilizando scripts.
De acuerdo con el código ng-submit
var handleFormSubmission = function(event) {
scope.$apply(function() {
controller.$commitViewValue();
controller.$setSubmitted();
});
event.preventDefault();
};
formElement[0].addEventListener(''submit'', handleFormSubmission);
Se agrega enviar oyente de eventos en el formulario. Pero el controlador de eventos submit no se llamaría cuando se inicia submit llamando a form.submit (). En este caso, ng-submit no impedirá la acción predeterminada, debe llamar a preventDefault usted mismo en el controlador ng-submit;
Para proporcionar una respuesta razonablemente definitiva, el ítem 5 del algoritmo de envío de formulario HTML indica que un formulario solo envía un evento de envío si no se envió llamando al método de envío (lo que significa que solo envía un evento de envío si se envía mediante un botón u otro implícito). método, por ejemplo, presionando enter mientras el foco está en un elemento de texto de tipo de entrada).
Me pregunto por qué nadie propuso la solución posiblemente más simple:
no use un
<form>
Un <whatever ng-form> hace que mi trabajo sea mejor y sin un formulario HTML, no hay nada que enviar por el propio navegador. Que es exactamente el comportamiento correcto cuando se usa angular.
Puede mantener <button type="submit"> , pero debe eliminar el atributo action="" de <form> .
Puedes intentar evitar el controlador predeterminado:
html:
<button ng-click="saveUser($event)">
js
$scope.saveUser = function (event) {
event.preventDefault();
// your code
}
Si echa un vistazo a la especificación W3C , parece que lo más obvio es intentar marcar los elementos de los botones con type=''button'' cuando no desea que se envíen.
Lo que hay que tener en cuenta en particular es donde dice
Un elemento de botón sin atributo de tipo especificado representa lo mismo que un elemento de botón con su atributo de tipo establecido en "enviar"
Yo uso la directiva para evitar el comportamiento por defecto:
module.directive(''preventDefault'', function() {
return function(scope, element, attrs) {
angular.element(element).bind(''click'', function(event) {
event.preventDefault();
event.stopPropagation();
});
}
});
Y luego, en html:
<button class="secondaryButton" prevent-default>Secondary action</button>
Esta directiva también se puede utilizar con <a> y todas las demás etiquetas