Angular.js ng-submit fired twice and didn't get the values from form

Question

I have a form in angularjs

<form ng-submit="addNewNote(noteData)">
        <button type="submit"  class="md-icon-button ion-nav-button-right md-button md-default-theme" aria-label="Setting" tabindex="0">
            {{noteTxt}}
        </button> 
 <ion-content>
<div id="note-detail-content">
                <md-input-container md-no-float>
                    <input required name="noteTitle" placeholder="Note Title (Required)" ng-model="noteData.title">
                </md-input-container>
                <textarea rows="7" ng-model="noteData.description" maxlength="250"
                          placeholder="Write something here ...."></textarea>
                <span>
                </span>
            </div><!--end content section-->
        </ion-content>
    <!--end note detail section-->
      </form>

The problem is ng-submit fired two times, also noteData.title doesn't read any value even if a value is present. I'm getting this error

Cannot read property 'title' of undefined

I've checked this question but my code doesn't include angular twice, if it is, how can i check it?

$scope.addNewNote=function(noteData){
    alert(noteData.title);
}

index.html links

    <!-- Ionic javascript lib -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- end Ionic javascript lib -->

    <!-- Angular javascript lib -->
    <script src="lib/angular-messages.js"></script>
    <script src="lib/angular-aria.js"></script>
    <script src="lib/angular-material.js"></script>
    <!-- end Angular javascript lib -->

    <!-- Cordova script (this will be a 404 during development) -->
    <script src="lib/ng-cordova.js"></script>
    <script src="cordova.js"></script>

UPDATE app.js file

.state('app.addnote', {
                url: "/addnote",
                cache: false,
                views: {
                    'menuContent': {
                        templateUrl: "templates/note/html/note-add.html",
                        controller: 'AddNotesCtrl'
                    }
                }
            })
            .state('app.notelist', {
                url: "/notelist",
                params:{
                    isAnimated:true
                },
                cache: false,
                views: {
                    'menuContent': {
                        templateUrl: "templates/application-storage/local-application-db/html/note-list.html",
                        controller: 'noteListCtrl'
                    }
                }
            }

)

Controller.js

  var appControllers = angular.module('starter.controllers', []); // Use for all controller of application.
    var appServices = angular.module('starter.services', []);// Use for all service of application.

appControllers.controller('AddNotesCtrl',function($scope,$rootScope,$state,$mdToast){


}

but you have close tag for the div try adding before that div — Erez, May 30 '16 at 06:08

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

I don't know why it would fire/submit twice (Are you sure there is no double function declarations or declaring the controller twice for example in html and routes etc?). It does not do that for me, but for the second problem that it does not submit the data. Have you declared the variable noteData anywhere in your controller? If you set it in your controller and then catch the submit function like this then it will show data:

$scope.noteData = [];

$scope.addNewNote = function(noteData) {
  console.log('form submitted');
  console.log(noteData);
};

EDIT:

Please check this post on SO for the problem that the form is submitted twice. Your problem is not duplicating with the code you provided in your question so you must have something else somewhere that is causing this problem.

edited May 23 '17 at 12:16

Community

1
1

answered May 30 '16 at 06:09

thepio

6,193
5
35
54

Thanks one problem is solved now form data can read,but the function executes twice – Blessan Kurien May 30 '16 at 06:24
1

Have you tried to see if you have declared your controller both in the HTML somewhere and in routeprovider? Or could you update your question with more code? Like more HTML and perhaps app.js also? – thepio May 30 '16 at 06:25
@BlessanKurien I added a useful link to my answer for your first problem with the form submitting twice. See if any of those answers help you. – thepio May 30 '16 at 06:33
Updated my question – Blessan Kurien May 30 '16 at 06:33

Angular.js ng-submit fired twice and didn't get the values from form

1 Answers1