php按钮触发本页面刷新,javascript - 单击表单中的按钮会导致页面刷新

javascript - 单击表单中的按钮会导致页面刷新

我在Angular中有一个表单，里面有两个按钮标签。 一个按钮在上提交表单。另一个按钮纯粹用于使用href=""进行导航。但是，当单击第二个按钮时，AngularJS会导致页面刷新，触发404.我在函数中删除了一个断点，它是 触发我的功能。 如果我执行以下任何操作，它将停止：

如果我删除，该按钮不会导致页面刷新。

如果我注释掉函数中的代码，它不会导致页面刷新。

如果我将按钮标记更改为带有href=""的锚标记()，则不会导致刷新。

后者似乎是最简单的解决方法，但为什么AngularJS甚至在我的函数之后运行任何代码导致页面重新加载？ 好像是一个bug。

这是表格：

Password

Change

Save

这是控制器方法：

$scope.showChangePassword = function() {

$scope.selectedLink = "changePassword";

};

9个解决方案

427 votes

如果您看一下W3C规范，那么看起来很明显的事情就是在您不希望它们提交时用type='button'标记您的按钮元素。

值得特别注意的是它所说的地方

未指定type属性的button元素表示与其type属性设置为“submit”的button元素相同的元素

LOAS answered 2019-03-19T07:03:26Z

69 votes

您可以尝试阻止默认处理程序：

HTML：

JS：

$scope.saveUser = function (event) {

event.preventDefault();

// your code

}

antage answered 2019-03-19T07:03:55Z

18 votes

您应该在

标记中声明属性ng-submit={expression}。

来自ngSubmit文档[http://docs.angularjs.org/api/ng.directive:ngSubmit]

启用将角度表达式绑定到onsubmit事件。

此外，它还可以防止默认操作(表单意味着将请求发送到服务器并重新加载当前页面)。

Shane Stillwell answered 2019-03-19T07:04:41Z

17 votes

我使用指令来防止默认行为：

module.directive('preventDefault', function() {

return function(scope, element, attrs) {

angular.element(element).bind('click', function(event) {

event.preventDefault();

event.stopPropagation();

});

}

});

然后，在html中：

Secondary action

该指令也可以与和所有其他标签一起使用

pleerock answered 2019-03-19T07:05:20Z

5 votes

您可以保留，但必须删除action=""属性。

Anderson Ferreira answered 2019-03-19T07:05:47Z

2 votes

我想知道为什么没有人提出最简单的解决方案：

不要使用

恕我直言更好的工作，没有HTML表格，浏览器本身没有提交任何内容。 使用角度时，这是正确的行为。

maaartinus answered 2019-03-19T07:06:27Z

1 votes

这个答案可能与问题没有直接关系。 这仅适用于使用脚本提交表单的情况。

根据ng-submit代码

var handleFormSubmission = function(event) {

scope.$apply(function() {

controller.$commitViewValue();

controller.$setSubmitted();

});

event.preventDefault();

};

formElement[0].addEventListener('submit', handleFormSubmission);

它在表单上添加了提交事件监听器。但是，通过调用form.submit()启动提交时，不会调用提交事件处理程序。 在这种情况下，ng-submit不会阻止默认操作，你必须在ng-submit处理程序中自己调用preventDefault;

为了提供合理明确的答案，HTML表单提交算法第5项规定，如果未通过调用submit方法提交表单，则表单仅调度提交事件(这意味着它仅在按钮或其他隐式提交时调度提交事件 方法，例如，当焦点在输入类型文本元素上时按下输入)。

请参阅onsubmit处理程序无法捕获链接中使用submit()提交的表单

user1577263 answered 2019-03-19T07:07:29Z

0 votes

第一个按钮提交表单，第二个按钮没有

S:

Submit

//Dont Submit

Dont Submit

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.Sub=function()

{

alert('Inside Submit');

}

$scope.Dont=function()

{

$scope.v=0;

}

});

Amay Kulkarni answered 2019-03-19T07:07:56Z

0 votes

向表单添加操作。

Swapnil Patwa answered 2019-03-19T07:08:30Z