Clicking a button within a form causes page refresh

Question

I have a form in Angular that has two buttons tags in it  One button submits the form on ng-click  The other button is purely for navigation using ng-click  However  when this second button is clicked  AngularJS is causing a page refresh which triggers a 404  I   ve dropped a breakpoint in the function and it is triggering my function  If I do any of the following  it stops    If I remove the ng-click  the button doesn   t cause a page refresh    If I comment out the code in the function  it doesn   t cause a page refresh    If I change the button tag to an anchor tag   lt a gt   with href     then it doesn   t cause a refresh    The latter seems like the simplest workaround  but why is AngularJS even running any code after my function that causes the page to reload  Seems like a bug   Here is the form    lt form class  form-horizontal  name  myProfile  ng-switch-when  profile  gt     lt fieldset gt       lt div class  control-group  gt         lt label class  control-label  for  passwordButton  gt Password lt  label gt         lt div class  controls  gt           lt button id  passwordButton  class  secondaryButton  ng-click  showChangePassword    gt Change lt  button gt         lt  div gt       lt  div gt        lt div class  buttonBar  gt         lt button id  saveProfileButton  class  primaryButton  ng-click  saveUser    gt Save lt  button gt       lt  div gt     lt  fieldset gt   lt  form gt    Here is the controller method    scope showChangePassword   function        scope selectedLink    changePassword

User · Answer

You can keep  lt button type  submit  gt   but must remove the attribute action    of  lt form gt

User · Answer

This answer may not be directly related to the question  It s just for the case when you submit the form using scripts   According to ng-submit code   x000D   x000D   var handleFormSubmission   function event    x000D    scope  apply function     x000D      controller  commitViewValue    x000D      controller  setSubmitted    x000D        x000D   x000D    event preventDefault    x000D     x000D   x000D  formElement 0  addEventListener  submit   handleFormSubmission   x000D   x000D   x000D    It adds submit event listener on the form  But submit event handler wouldn t be called when submit is initiated by calling form submit    In this case  ng-submit will not prevent the default action  you have to call preventDefault yourself in ng-submit handler      To provide a reasonably definitive answer  the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method  which means it only dispatches a submit event if submitted by a button or other implicit method  e g  pressing enter while focus is on an input type text element     See Form submitted using submit   from a link cannot be caught by onsubmit handler

User · Answer

If you have a look at the W3C specification  it would seem like the obvious thing to try is to mark your button elements with type  button  when you don t want them to submit   The thing to note in particular is where it says      A button element with no type attribute specified represents the same thing as a button element with its type attribute set to  submit

User · Answer

You can try to prevent default handler   html    lt button ng-click  saveUser  event   gt    js    scope saveUser   function  event      event preventDefault         your code

User · Answer

You should declare the attribute ng-submit  expression  in your  lt form gt  tag    From the ngSubmit docs  http   docs angularjs org api ng directive ngSubmit     Enables binding angular expressions to onsubmit events       Additionally it prevents the default action  which for form means sending the request to the server and reloading the current page

User · Answer

Just add the FormsModule in the imports array of app module ts file  and add import   FormsModule   from   angular forms   at the top of this file   this will work

User · Answer

I wonder why nobody proposed the possibly simplest solution       don t use a  lt form gt    A  lt whatever ng-form gt  does IMHO a better job and without an HTML form  there s nothing to be submitted by the browser itself  Which is exactly the right behavior when using angular

User · Answer

Add action to your form     lt form action     gt

User · Answer

First Button submits the form and second does not   lt body gt   lt form  ng-app  myApp  ng-controller  myCtrl  ng-submit  Sub    gt   lt div gt  S  lt input type  text  ng-model  v  gt  lt br gt   lt br gt   lt button gt Submit lt  button gt    Dont Submit  lt button type  button  ng-click  Dont    gt Dont Submit lt  button gt   lt  div gt   lt  form gt    lt script gt  var app   angular module  myApp        app controller  myCtrl   function  scope     scope Sub function     alert  Inside Submit        scope Dont function      scope v 0         lt  script gt    lt  body gt

User · Answer

I use directive to prevent default behaviour   module directive  preventDefault   function         return function scope  element  attrs            angular element element  bind  click   function event                event preventDefault                event stopPropagation                            And then  in html    lt button class  secondaryButton  prevent-default gt Secondary action lt  button gt    This directive can also be used with  lt a gt  and all other tags

User · Answer

I also had the same problem  but gladelly I fixed this by changing the type like from type  quot submit quot  to type  quot button quot  and it worked

[javascript] Clicking a button within a form causes page refresh

Examples related to javascript

Examples related to angularjs