javascript - How to prevent submitng-submit event from triggering when using multiple buttons inside a form - Stack Overflow

admin管理员组

文章数量:1208153

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...

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...

• javascript
• android
• jquery
• angularjs
• ionic-framework

Share Improve this question Follow edited Jan 15, 2015 at 3:12 PSL 124k2121 gold badges256256 silver badges243243 bronze badges asked Jan 15, 2015 at 1:49 Asr008Asr008 3311 silver badge33 bronze badges 2

• Please share your controller code – scniro Commented Jan 15, 2015 at 1:53
• Do you mean that your form submits on clicking the Get Photo button? – progrAmmar Commented Jan 15, 2015 at 1:53

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 11

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.

use :

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

Because <button> automatically call ng-submit.

<button type="button"..>

Did the trick for me.

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>

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.

本文标签：