AJAX form sends GET & sends form to current page instead of POST jquery

Question

I'm trying to submit a google doc form through AJAX, but it's not working. It keeps trying to send the form to the page I am on as a GET, rather than the google form POST url request I am trying.

My form looks like

<form id="ss-form" target="_self" onsubmit="" action="">

.....
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action ">
</form>

and my JS looks like:

 <script>
$('#ss-form').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: "https://docs.google.com/a/example.com/forms/d/e/1FAI324B_-XUt0dQ-0AmlfwdfUu5dbEefwjVNud_hNlOKQ/formResponse",
        data: $(this).serialize(),
        type: "POST",
        dataType: "xml",
        success: function(data) {
            console.log('Submission successful');
        },
        error: function(xhr, status, error) {
            console.log('Submission failed: ' + error);
        }
    });
});
</script>

But this just reloads my page like example.com?entry.1850833=test and it's as a GET request.

Any ideas why this is happening? How do I get it to send it through the AJAX code, and stop the form just refreshing on the current page as a GET?

Possible duplicate of [event.preventDefault() vs. return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) — Mike Cluck, Oct 04 '16 at 17:24
Did you try removing `onsubmit=""`? Did you add `return false;` to the *end* of your handler? Are you waiting for the DOM to be ready before adding your handler? — Mike Cluck, Oct 04 '16 at 17:34
No, I had the script just above the form, schoolboy error. Thanks for your help @MikeC :) — user1180888, Oct 04 '16 at 18:45

score 0 · Answer 1 · answered Oct 04 '16 at 17:26

0

try add return false

$.ajax({
    url: "https://docs.google.com/a/example.com/forms/d/e/1FAI324B_-XUt0dQ-0AmlfwdfUu5dbEefwjVNud_hNlOKQ/formResponse",
    data: $(this).serialize(),
    type: "POST",
    dataType: "xml",
    success: function(data) {
        console.log('Submission successful');
    },
    error: function(xhr, status, error) {
        console.log('Submission failed: ' + error);
    }
});
return false;

answered Oct 04 '16 at 17:26

Andrew Z

139
4

No it still just sends through the get request to the same page. Should the JS be after the form or anything? I have it at the top of my page. – user1180888 Oct 04 '16 at 17:32
1

Yes it does, unless your wrapping it with $(document).ready or something similar. If the script is before the form, than when you try to register the submit handler the form does not exists yet, and the browser's default behavior will take place. – fistuks Oct 04 '16 at 18:05
Thanks @fistuks, that was the problem. I had the script at the top. Thank you!! – user1180888 Oct 04 '16 at 18:43

score 0 · Answer 2 · answered Oct 04 '16 at 17:53

0

Remove "_self", there should be no target since you're submitting the form through AJAX.

answered Oct 04 '16 at 17:53

DanielTheGeek

183
1
16

AJAX form sends GET & sends form to current page instead of POST jquery

2 Answers2