AJAX jQuery form submit sending twice POST & OPTIONS

Question

I'm having difficulty working out why my AJAX code is being sent twice on form submit.

OPTIONS request and a POST request - both 200 status messages. The POST request is successful and returns what I want so that is all good. I do not want the OPTIONS request to occur.

Thought it might have something to do with CORS or unbinding the submit event handler?

If anyone can help that would be great.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form id="loginform">
        Username: <input type="text" class="rname" name="username" value=""/>
        Password:  <input type="text" class="rpass" name="password" value=""/>
        <input type="submit" value="Submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

scripts = function () {
    var _t = this;
    var authenticateUrl = "http://...";
    this.events = function () {
        $('#loginform').submit(_t.loginEvent);
    };
    this.loginEvent = function (event) {
            event.preventDefault();
            var $form = $(this);

            var _name = $form.find(".rname").val();
            var _pass = $form.find(".rpass").val();

            var submitData= {username: _name,password: _pass};
            submitData = JSON.stringify(submitData);

            $.ajax({
                type: 'POST',
                contentType: "application/json",
                dataType: 'json',
                url: authenticateUrl,       
                data: submitData,
                success: function(data) {
                    console.log("Success loginEvent");
                    if (data.error) {
                        console.log("Unsuccessful Login");
                    } else {
                        console.log("successful Login");
                    }
                }
            });
        };

    this.init = function () {
        _t.events();
    };
    this.init();
    return (this);
};

var LZ = new scripts();
</script>
</body>
</html>

possible duplicate of [Why am I getting an OPTIONS request instead of a GET request?](http://stackoverflow.com/questions/1256593/why-am-i-getting-an-options-request-instead-of-a-get-request) — Drazen Bjelovuk, Sep 11 '15 at 04:42

score 1 · Accepted Answer · answered Sep 11 '15 at 04:32

1

Its nothing weird about it if you are getting the response correctly.

Options request is used to allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

OPTIONS requests are what we call pre-flight requests in Cross-origin resource sharing (CORS).

They are necessary when you're making requests across different origins.

answered Sep 11 '15 at 04:32

maddygoround

2,145
2
20
32

Hi mate, thanks for your answer. Makes sense, I got a bit confused as I used POSTMAN and a normal form with method and action and only got the POST status message, so it has to do with the AJAX request itself? – roshambo Sep 11 '15 at 04:43
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.so you want need pre-flight request in case of POSTMAN as it is extension – maddygoround Sep 11 '15 at 04:45
It has to do with server. – maddygoround Sep 11 '15 at 04:45
Ah ok thanks. So assuming I have my files on the same domain (my http:// url) the options cross domain shouldn't show? – roshambo Sep 11 '15 at 05:11

AJAX jQuery form submit sending twice POST & OPTIONS

1 Answers1