CODEWITHSUNDEEP
angularjs
Dave
Dave

Reputation: 2765

Angular JS - Cancel button on form suppress form submission

Consider a form with three buttons:

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
    <button class="btn" ng-click="cancelEdit()">Cancel</button>
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

When I click cancel, cancelEdit() is being called, then updateUser() is being called. I don't want the updateUser() method to be called. Is there a way to suppress this form submission (preferebly wtihout jQuery?)

Note: I'd still like to be able to hit enter and default to the Save action.

Upvotes: 27

Views: 29844

Answers (4)

Shimon Rachlenko
Shimon Rachlenko

Reputation: 5517

There is a type attribute for the <button> which defaults to submit - see this spec. Thus every button in your form is a submit button. You need to specify the button type for buttons which should not trigger the form submission, like this:

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary">Save</button>
    <button type="button" class="btn" ng-click="cancelEdit()">Cancel</button>
    <button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

And also no need to put the submit action to both ng-click and ng-submit - it will trigger double submit. I would advise to use ng-submit because it catches all ways of form submission, like pressing ENTER and not only clicking on submit button.

Upvotes: 98

S.p
S.p

Reputation: 1059

I was having same problem.I used anchor instead of button.

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
<a class="btn btn-danger"  ng-click="cancelEdit()" role="button">Cancel</a>
    <button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>

  </div>
</form>

Upvotes: 1

zxxc
zxxc

Reputation: 61

You can use for cancel button type="reset": 

<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>

The button is a reset button (resets the form-data to its initial values)

http://www.w3schools.com/tags/att_button_type.asp

Upvotes: 6

Fresheyeball
Fresheyeball

Reputation: 30015

Try this

<form ng-submit="updateUser()">
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary">Save</button>
    <a class="btn" ng-click="cancelEdit()">Cancel</a>
    <a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a>
  </div>
</form>

or this

<form>
  <div>Name <input type="text" ng-model="userToEdit.name" /></div>
  <div>
    <button class="btn btn-primary" ng-click="updateUser()">Save</button>
    <button class="btn" ng-click="cancelEdit()">Cancel</button>
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
  </div>
</form>

ultimately I don't think you need updateUser() twice in the html

Upvotes: 13

Related Questions