Angular form submitting twice (ajax get request)

Question

I have a controller that for some reason is submitting a form twice via a get request in AngularJs. I can see in my database that the form is being submitted twice, and also in the console network tab, it is logging the two submission, however, the first submission has the "Request Method" of OPTIONS, and the 2nd is GET. I think this may be a clue. I'm a bit confused, because i'm not passing in any 'options' into the get method, just the URL I am submitting to.

Html:

<div class="row">
    <div ng-controller="groupEditCtrl">
        <form class="span11" name="" novalidate ng-submit="createArtifact()">
            <legend>Create a new group</legend>
            <div class="row">
                <div class="span5">
                    <div class="control-group">
                        <div class="controls">
                            <input name="text" type="text" placeholder="Group Name" required ng-model="artifact.group_name" />
                        </div>
                    </div>
                </div>
                <div class="span5">
                    <p>
                        <small>What your artifact will look like:</small><br />
                        {{artifact.group_name}}
                    </p>
                </div>
            </div>

            <input name="token" type="hidden" required ng-model="window.token" />
            <div class="control-group">
                <div class="controls controls-row">
                    <button type="submit" class="btn" value="Submit" title="Submit">
                        <span>Submit</span>
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>

Controller:

'use strict';

function groupEditCtrl($scope, $http, $routeParams, $cookie) {

    $scope.createArtifact = function(){
        var requestURL = window.base_url + "/Group/CreateGroup?callback=JSON_CALLBACK&token=" + window.token + "&group_name=" + $scope.artifact.group_name;
        $http.get( requestURL ).
            success(function(data, status, headers, config) {
                console.log('You have successfully submitted a Cause/CreateCause');
            }).
            error(function(data,status,headers,config){
                console.log('You have FAILED submitting a Cause/CreateCause');
            });
    }
};

ryaanwells · Accepted Answer · 2013-09-13 15:32:38Z

2

A HTTP Options request is asking the server for the allowed methods that it can communicate with the server upon (amongst other things) so it's a normal thing to happen.

The Options request shouldn't change anything in your backend but it may well be logged as you're seeing. Double check that it isn't changing anything (and if it is then your backend may be configured wrong, and you should ask another question if it is!).

There's nothing wrong with your angular setup/use regarding the OPTIONS then GET.

answered Sep 13, 2013 at 15:32

ryaanwells

2801 gold badge2 silver badges13 bronze badges

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

5 Comments

flashpunk Over a year ago

@ryanwells, hmm, i was afraid of that. So you're saying that it's some kind of back end issue.

flashpunk Over a year ago

Should I be submitting the form in a different way? with a directive attached to the submit button perhaps? Is there a prevent default option that i'm missing here or something? I don't get it.

Zack Argyle Over a year ago

He is saying that it is not an issue. It just want to check that it the request type is available at the url you are requesting to.

flashpunk Over a year ago

@ZackArgyle Thanks, I realize that, but it's still submitting the form 2x.. I can add artifacts directly through a different web interface that we are building here, and it doesn't duplicate.

jjperezaguinaga Over a year ago

@flashpunk AngularJS doesn't submit the form twice; this HTTP OPTIONS request is something known as Preflighted Requests, most likely used for CORS.

selfclose · Accepted Answer · 2015-11-05 05:47:11Z

1

For me headers: {'Content-Type': undefined} Work, And I don't see it call twice again.

$http.post("index.php", {id : $scope.A},{
    headers: {'Content-Type': undefined}})
    .success(function (response) {
       $scope.OK = response.POLL;
    }
}

answered Nov 5, 2015 at 5:47

selfclose

113 bronze badges

Comments

flashpunk · Accepted Answer · 2013-09-20 14:39:17Z

0

Turns out this was an issue with the custom api being built that I wasn't aware of.

answered Sep 20, 2013 at 14:39

flashpunk

7822 gold badges13 silver badges38 bronze badges

Collectives™ on Stack Overflow

Angular form submitting twice (ajax get request)

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related