CODEWITHSUNDEEP
javascriptjqueryajaxformsangularjs
flashpunk
flashpunk

Reputation: 772

Angular form submitting twice (ajax get request)

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');
            });
    }
};

Upvotes: 1

Views: 925

Answers (3)

selfclose
selfclose

Reputation: 11

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;
    }
}

Upvotes: 1

flashpunk
flashpunk

Reputation: 772

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

Upvotes: 0

ryaanwells
ryaanwells

Reputation: 280

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.

Upvotes: 2

Related Questions