form does not submit when using ng-click

Question

I have a simple form which need to submit when click button and hide stuff with ng-click, it does submit the form when I don't add the ng-click for the hide stuff purpose, when I add the ng-click the form don't submit:

the form head :

 <form class="form" name="form" ng-submit="edit(form)" novalidate ng-show="editorEnabledView">

the button :

<button analytics-on analytics-event="Bouton Terminer" analytics-category="Profil" ng-click="disableEdditing()" class="btn btn-lg btn-primary" type="submit">{{ step == 2 ? 'Terminer' : 'Enregistrer' }}</button>

CTRL

$scope.editorEnabledView = false;

                $scope.showEdditing = function () {
                    $scope.editorEnabledView = true;
                    console.log("YES TRUE");
                }

                $scope.disableEdditing = function () {
                    $scope.editorEnabledView = false;
                }

my edit function :

$scope.edit = function (form) {
        if (!form.$valid) return;

        $scope.errors = {};
        if (!$scope.address.input) $scope.errors.address = 'Votre adresse de travail est obligatoire.';

        var data = {
            gender: $scope.user.gender,
            name: {
                first: $scope.user.name.first,
                last: $scope.user.name.last
            },
            phone: $scope.user.phone,
            job: {
                name: $scope.user.job.name,
                status: $scope.user.job.status
            },
            about: $scope.user.about,
            interests: $scope.user.interests
        };

        getAddress(function (response) {
            data.address = {
                full: response.formatted_address,
                city: getCity(response.address_components),
                latitude: response.geometry.location.lat(),
                longitude: response.geometry.location.lng(),
                timestamp: new Date()
            };

            User.update(data, function (user) {
                submit = true;
                Auth.update(user);
                if ($scope.step == 1) return $scope.step++;
                $location.path($scope.step == 2 ? '/' : '/users/view/' + user._id);
            }, function (err) {
                Auth.update(originalUser);
                $scope.user = originalUser;

                angular.forEach(err.data.errors, function (error, field) {
                    $scope.errors[field] = error.message;
                });
            });
        });
        //$scope.editorEnabledView = false;
    };

I discovered that when go to another page and come back to the user profile I see that the form get submitted !! but I want to see it after the submit

You sure you didn't make a type, and meant disbaleEditing instead? Otherwise please paste some more code, especially the angular logic. — Phillip
– Phillip, Commented Apr 18, 2016 at 11:44
no the ng-click does work and hide the contentent , but the form don't get submitted — Mouheb
– Mouheb, Commented Apr 18, 2016 at 11:45
This code seems incomplete; could you post a snippet that has both and then mark the relevant form/button code lines? Currently I can't find a connection between form and button. — cst1992
– cst1992, Commented Apr 18, 2016 at 11:52
Can you show full code? Which means controller function also — Praveen Srinivasan
– Praveen Srinivasan, Commented Apr 18, 2016 at 11:53

Sarantis Tofas · Accepted Answer · 2016-04-18 12:56:07Z

1

I had to change my answer cause now its clear that all you want to do is to hide your form after submit. This can be done with the use of form.$submitted and ng-hide

<div ng-controller="MyCtrl">
<form class="form" name="form" ng-submit="edit(form)" ng-hide="form.$submitted" ng-show="!form.$submitted" novalidate >
</div>

<button analytics-on analytics-event="Bouton Terminer" analytics-category="Profil"  class="btn btn-lg btn-primary" type="submit">{{ step == 2 ? 'Terminer' : 'Enregistrer' }}</button>

edited Apr 18, 2016 at 12:56

answered Apr 18, 2016 at 11:46

Sarantis Tofas

5,1871 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sarantis Tofas Over a year ago

if you already have the submit function then hide the things you want from inside this function, why do u need the ng-click any way

Sarantis Tofas Over a year ago

ng-click will override the ng-submit thats why your form is not getting submitted...

Bruno João Over a year ago

This is not rigth. The ng-click does not override ng-submit. You can see it in my snippet.

Sarantis Tofas Over a year ago

@vinagreti you can read here on the angular documentation that only ng-click or ng-submit must be used, you cannot have both. please read : docs.angularjs.org/api/ng/directive/ngSubmit

Sarantis Tofas Over a year ago

@Mouheb alright mate you told me that it worked, you can hide the form with this way ng-hide="form.$submitted". No need for click event or anything

|

Bruno João · Accepted Answer · 2016-04-18 12:20:02Z

I did a snippet and everything seems to be working... I think you are doing something wrong. Maybe you are missing the ng-submit in the form tag. See my snippet and change your code.

var $scope = {};

var myApp = angular.module('myApp', []);

myApp.controller('ngSubmitCtrl', ['$scope', function($scope){
  
  $scope.editorEnabledView = true;
  
  $scope.showEdditing = function () {
      $scope.editorEnabledView = true;
      alert("showEdditing");
  }
  
  $scope.disableEdditing = function () {
      $scope.editorEnabledView = false;
    alert("disableEdditing");
  }
  
  $scope.edit = function (form) {
    alert("submitForm");
  }
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app='myApp' ng-controller="ngSubmitCtrl">
  <form class="form" name="form" ng-submit="edit(form)" novalidate ng-show="editorEnabledView">
    <button 
            analytics-on analytics-event="Bouton Terminer" 
            analytics-category="Profil" 
            ng-click="disableEdditing()" 
            class="btn btn-lg btn-primary" 
            type="submit">{{ step == 2 ? 'Terminer' : 'Enregistrer' }}
    </button>
  </form>
</div>

Praveen Srinivasan · Accepted Answer · 2016-04-18 13:18:45Z

0

Why do you send form inside edit call?

<form class="form" name="form" ng-submit="edit()">
  <input type="text" ng-model="formData.name">
</form>

in your controller

$scope.edit = function() {
   console.log($scope.formData)
}

Or if you want to call edit function with parameter means

<form class="form" name="form" ng-submit="edit(form)">
  <input type="text" ng-model="form.name">
</form>

in your controller

$scope.edit = function(data) {
   console.log(data)
}

This should work. But we don't get your problem. If you show full code, we will help.

edited Apr 18, 2016 at 13:18

answered Apr 18, 2016 at 11:58

Praveen Srinivasan

1,6204 gold badges28 silver badges55 bronze badges

Collectives™ on Stack Overflow

form does not submit when using ng-click

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related