Angular form submitting twice

Question

so I am making a user registration form with angular js using ng-submit and ng-model. The problem is when the user submits the form its triggers twice.

I looked around for common causes and none of them fit the bill. I haven't declared my controller twice and my submit button doesn't have any ng-click events.

Here is the form code (likely something wrong here that I am missing)

<form class="form"  ng-submit="registerUser()">
    <div class="form-group row">
       <label for="user-fname">First Name</label>
       <div class="two-for-one">
          <input type="text" id="user-fname" name="user-fname" class="form-control" placeholder="first name" ng-model="userData.fname">
      </div>
      <label for="user-lname">Last Name</label>
      <div class="two-for-one">
        <input type="text" id="user-lname" name="user-lname" class="form-control" placeholder="last name" ng-model="userData.lname">
      </div>
    </div>
    <label for="email">Email</label>
    <input class="form-control" type="text" id="email" name="email" placeholder="Email" rel="popover" data-content="What’s your email address?" ng-model="userData.email">
     <label for="reg_password">Password</label>
     <input class="form-control" type="password" id="reg_password" name="reg_password" placeholder="Password" rel="popover" data-content="Please choose a password (minimum of 6 characters)" ng-model="userData.pw">
     <label for="reg_password_confirm">Confirm Password</label>
     <input class="form-control" type="password" id="reg_password_confirm" name="reg_password_confirm" placeholder="Confirm Password" rel="popover" data-content="Please confirm your password" ng-model="userData.cpw">
     <label for="mail">Want to be apart of our mailing list?</label>
     <input type="checkbox" id="mail" name="mail" value="1" ng-model="userData.mail">
     <button class="btn btn-success">Next</button>
 </form>

And although I don't think its the js here it is:

       $scope.userData = {
            acc_type: "user",
            mail:false,
        };
        $scope.registerUser = function() {
            loginRegsterService.registerUser($scope.userData).then(function(response){
                console.log(response);
            });
        };

And the last part is a service which uses http to post data. Its pretty standard

        this.registerUser = function(data) {
            var req = {
                method: 'POST',
                url: location.protocol + '//' + location.host + '/models/register.php',
                headers: {
                    'Content-Type': 'application/json'
                },
                data: data
            }
            return $http(req).then(function(response) {
                return response.data;
            });
        };

Thanks for reading and your help!

Oh and I forgot to mention that all this is work fine except it submits twice :\

And the html is valid except for the angular directives.

Submit twise you mean you enter registerUser function twise or it redirects the page also? — dfsq
– dfsq, Commented Apr 8, 2015 at 18:00
Well you code is fine, so the issue is not reproducible with the code you posted. I suggest that you add more code. Or make a demo. — dfsq
– dfsq, Commented Apr 8, 2015 at 18:03

Vincente · Accepted Answer · 2021-10-22 18:17:23Z

3

It can happen if you create a child component which has a form and emits submit/search event to the parent component with EventEmitter. Then parent component will receive both your event and a native one. You should rename eventEmmiter in the child component, eg:

// Child component
@Output() submitForm = new EventEmitter();
@Output() searchSomething = new EventEmitter();

instead of

@Output() submit = new EventEmitter();
@Output() search = new EventEmitter();

answered Oct 22, 2021 at 18:17

Vincente

4655 silver badges15 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:54:07Z

0

Maybe because you tag has no type attribute specified - and it's treated as submit intialy? See here also :https://stackoverflow.com/a/4667996/405623 ?

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 8, 2015 at 17:56

shershen

10k11 gold badges44 silver badges62 bronze badges

Comments

Kevin Wilhelm · Accepted Answer · 2023-07-10 18:20:15Z

0

check if your API is in the same domain as your application.

If the api ist on a webServer and your application is on localhost the form submitted twice

answered Jul 10, 2023 at 18:20

Kevin Wilhelm

1

Collectives™ on Stack Overflow

Angular form submitting twice

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related