Ajax request submitting get instead of post

Question

I have a form:

<form onsubmit="return sendEmail()" id="emailForm" name="emailForm">
                   <input type="hidden" name="_cc" value="email2@gmail.com" />
                    <div class="row">
                        <p class="left">
                            <label for="name">Name*</label>
                            <input type="text" required="required" name="name" id="name" value="" />
                        </p>
                        <p class="right">
                            <label>Email*</label>
                            <input type="email" required="required" name="_replyto">
                        </p>
                    </div>

                    <div class="row">
                        <p class="left">
                            <label for="phone">Phone/Mobile</label>
                            <input type="text" required="required"  name="phone" id="phone" value="" />
                        </p>
                        <p class="right">
                            <label for="company">Organization</label>
                            <input type="text" name="company" id="company" value="" />
                        </p>
                    </div>

                    <p>
                        <label for="message" class="textarea">Queries</label>
                        <textarea class="text" name="message" id="message"></textarea>
                    </p>
                <br />
                    <div style="background-color: mediumaquamarine;margin-bottom: 2%" id="success"></div>
                    <button type="submit" class="btn btn-xl">Send</button>

</form>

and jquery code to submit the form using ajax post:

    function sendEmail(){
        $.ajax({
            url: "http://formspree.io/email1@gmail.com",
            method: "POST",
            data: $('#emailForm').serialize(),
            dataType: "json",
            success: function(result){
                $("#success").html("Message successfully sent");
            },
            error: function (request, status, error) {
                $("#success").html("Oops! Something went wrong. Please try again");
            }
        });
        return false
    }

but it always submits get request and results in error response that get method is not allowed, use post only.(405 response code).

Can't figure out whats wrong here.

Answer 1

ajax is asynchronus Your form submit is triggered as soon as the button is clicked and the ajax method runs in background. That's why it is triggering get .

As GET is default http method. look here: https://www.w3.org/TR/html401/interact/forms.html#h-17.3 If you have a look at the console it should also trigger(post) after that.

Try this instead:

<form id="emailForm" name="emailForm">

And in js:

$('#emailForm').submit(function (e){
    // stop the default form submit behaviour
    e.preventDefault();
    $.ajax({
        url: "http://formspree.io/email1@gmail.com",
        method: "POST",
        data: $('#emailForm').serialize(),
        dataType: "json",
        success: function(result){
            $("#success").html("Message successfully sent");
        },
        error: function (request, status, error) {
            $("#success").html("Oops! Something went wrong. Please try again");
        }
    });
    return false
});

Answer 2

The error you are getting might be related to something in your server or your server code.

Try copying the request headers and parameters to a json poster and try sending the request from there, if you still get an error that means it's in your server or that your request is missing some headers maybe.

After you will manage to send a valid post request it will be match easier to convert it into ajax request.

Answer 3

change method to type as following

function sendEmail(){
        $.ajax({
            url: "http://formspree.io/email1@gmail.com",
            type: "POST",
            data: $('#emailForm').serialize(),
            dataType: "json",
            success: function(result){
                $("#success").html("Message successfully sent");
            },
            error: function (request, status, error) {
                $("#success").html("Oops! Something went wrong. Please try again");
            }
        });
        return false
    }