Form ng-click is triggering ng-submit

Question

I have a form whose ng-submit is to move to the next question.

        <form ng-submit="BC.next()" novalidate>
            <input type="submit" value="Next Question"/>
            <button id="previous" ng-click="BC.previous()">Previous Question</button>

However, whenever I click on the previous button, after executing, it then triggers the BC.next() I'm so confused, does anyone know why this is happening? I even tried closing the <input type="submit"> tag with a </input> but that didn't fix it.

Prevent the default action of the form when you click the button — Sterling Archer, Sep 25 '15 at 16:40

score 15 · Accepted Answer · edited May 23 '17 at 12:00

15

Make sure that all other button in the form that are not submitting it will be from type="button".

 <form ng-submit="BC.next()" novalidate>
            <input type="submit" value="Next Question"/>
            <button type="button" id="previous" ng-click="BC.previous()">Previous Question</button>

You can see the details: How to prevent buttons from submitting forms

TL;DR for the post: HTML5 defaults <button> as <button type="submit"> so you need to change this manually.

edited May 23 '17 at 12:00

Community

1
1

answered Sep 25 '15 at 16:37

Shikloshi

3,761
7
32
58

Wow so interesting!! how did you know that? Is this doucmented somewhere? Or is it expected behavior of javascript? – Noitidart Sep 25 '15 at 16:41
Ah thanks for your edit! So that is javascript behavior huh? Stack wont let me accept slution for 8more minutes excuse that please. – Noitidart Sep 25 '15 at 16:41
1

This is one of the first problems when starting to work with Angular & Javascript so you are getting familiar with this really quickly. – Shikloshi Sep 25 '15 at 16:42
1

Thanks @Shiklosh! :) I didnt know HTML5 defaulted butto nto type submit this is awesome learning thank you! – Noitidart Sep 25 '15 at 16:56

Form ng-click is triggering ng-submit

1 Answers1