CODEWITHSUNDEEP
javascriptandroidjqueryangularjsionic-framework
Asr008
Asr008

Reputation: 33

How to prevent submit/ng-submit event from triggering when using multiple buttons inside a form

Clicking take photo button that performs the function getPhoto(), the form performs the function of funcSubmit() ng-submit automatically. What would need to change to prevent this from happening? It performs only the function getPhoto() without running ng-submit the form.

Ps .: This code is part of an app android mobile, developed with ionic framework

<ion-view title="OS">
    <form ng-submit = "funcSubmit()">
        <ion-content class="has-header"> 
            <ion-list >
                <ion-item >
                    <button name="fota" class="button button-block button-positive" ng-click="getPhoto()">
                        <i class="icon ion-ios7-camera"> Photo</i>                      
                    </button>
                </ion-item >
            </ion-list >
        </ion-content>
        <div class="bar bar-footer bar-stable">
            <button name="canc" class="button button-light" ui-sref="app.padronis">Cancel</button>
            <button name="subm" class="button button-light" type="submit">Save</button>     
        </div>
    </form>      
</ion-view>

Thanks for all...

Upvotes: 3

Views: 9159

Answers (5)

Daniel S.
Daniel S.

Reputation: 840

<button type="button"..>

Did the trick for me.

Upvotes: 4

Hugh Barnard
Hugh Barnard

Reputation: 352

This is in one of my current Ionic apps:

    <form name="myForm">
        <div class="item">
            <button class="button button-block button-positive icon-left ion-ios7-camera" ng-click="takePicture()">Camera</button>
        </div>
        <div class="item">
            <button class="button button-block button-positive icon-right ion-chevron-right" ng-click="update(obj)">Upload</button>

        </div>
    </form>

There are two javascript functions, one to take the picture and another using:

ft.upload($scope.mypicture, encodeURI(Urlforupload), uploadSuccess, uploadError, options);

to upload the picture and some form fields. Most of this work is borrowed from: https://github.com/yafraorg/ionictests who deserves more of the credit than myself.

Upvotes: 0

Cyril CHAPON
Cyril CHAPON

Reputation: 3747

Because button automatically call ng-submit.

I believe this is more about the type attribute of your buttons, than the button tag itself.

I guess default is submit and your browser is triggering submit because you ommited the (required?) type attribute. One should try <button type="button"></button> along with a <button type="submit"></button>.

Those are assumptions, but every time I wonder how Angular deals with HTML, I always choose semantic and it just works. This case shouldn't be an exception.

Upvotes: 11

Julia Mitchelmore
Julia Mitchelmore

Reputation: 89

In an angular form you are only meant to have one button - this calls ng-submit.

If you want to have multiple button-like elements, you will need to style a div or input to look like a button.

For example:

<div class="button button-block button-positive" ng-click="getPhoto()">
    <i class="icon ion-ios7-camera"> Photo</i>                      
</div>

Upvotes: 1

squiroid
squiroid

Reputation: 14037

use :

<input type="button" name="fota"  ng-click="getPhoto()">

Because <button> automatically call ng-submit.

Upvotes: 6

Related Questions