Mailchimp ajax SyntaxError on form submission

Question

As I can see there is no errors in code, but still its showing this SyntaxError: missing ; before statement screenshot

Here is the Form:

<form id="bildo_mc_form" action="https://stylishcreativity.us3.list-manage.com/subscribe/post-json?u=7c7040d58ca368b8f8063c1ea&amp;id=f67dfc67a4" method="post">
    <input id="mc-email" type="email" name="EMAIL" placeholder="Your Email">
    <label for="mc-email"></label>
    <button type="submit">Send</button>
</form>

Here is the Js:

jQuery("#bildo_mc_form").submit(function(e){
    
    console.log("form submitted");
    
    function callbackFunction(data){
        window.location.href = "http://thanks.com";
        console.log("sucess result" + data.result);
        console.log("sucess msg" + data.msg);
    }

    var url = jQuery(this).prop('action'); // the script where you handle the form input.
    jQuery.ajax({
           type: "GET",
           url: url,
           data: jQuery("#bildo_mc_form").serialize(), // serializes the form's elements.
           dataType: "jsonp",
           contentType: "application/json; charset=utf-8",
           error: function(error){
                // According to jquery docs, this is never called for cross-domain JSONP requests
                console.log("Error Result" + error.result);
            },
           success: callbackFunction
        });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

How can I get rid of this issue? Pls help :)

I have validated your code in jshint, there are no issues there. Have you checked [this similar question](https://stackoverflow.com/questions/19456146/ajax-call-and-clean-json-but-syntax-error-missing-before-statement)? This might be the same issue. — Kukic Vladimir, Jul 08 '17 at 00:20
I've already tried all those possible fixes they mentioned on the similar question, still not working! For MailChimp form you have to set dataType to JSONP or the form will not submit http://prntscr.com/ftf6gj — Mashiur Rahman, Jul 09 '17 at 08:16

score 0 · Answer 1 · answered Jul 08 '17 at 00:35

Since you receive JSON by ajax, you should set dataType: "json".

Not jsonp.

jsonp response is being executed as a function and it causes the error.

jQuery("#bildo_mc_form").submit(function(e){

    console.log("form submitted");

    function callbackFunction(data){
        window.location.href = "http://thanks.com";
        console.log("sucess result" + data.result);
        console.log("sucess msg" + data.msg);
    }

    var url = jQuery(this).prop('action'); // the script where you handle the form input.
    jQuery.ajax({
           type: "GET",
           url: url,
           data: jQuery("#bildo_mc_form").serialize(), // serializes the form's elements.
           dataType: "json",
           contentType: "application/json; charset=utf-8",
           error: function(error){
                // According to jquery docs, this is never called for cross-domain JSONP requests
                console.log("Error Result" + error.result);
            },
           success: callbackFunction
        });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="bildo_mc_form" action="https://stylishcreativity.us3.list-manage.com/subscribe/post-json?u=7c7040d58ca368b8f8063c1ea&amp;id=f67dfc67a4" method="post">
    <input id="mc-email" type="email" name="EMAIL" placeholder="Your Email">
    <label for="mc-email"></label>
    <button type="submit">Send</button>
</form>

if I set the dataType to JSON, it will show another error `Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://stylishcreativity.us3.list-manage.com/subscribe/post-json?u=7c7040d58ca368b8f8063c1ea&id=f67dfc67a4&EMAIL=asashfasf%40gmail.com. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).` http://prntscr.com/ftf6gj — Mashiur Rahman, Jul 09 '17 at 08:10
@Mashiur Rahman, It's another question how to do `Cross-Origin` requests. Basically, The host `https://stylishcreativity.us3.list-manage.com` should send a valid `‘Access-Control-Allow-Origin’` response header. The way to set it up depends on the webserver you use. — Kosh, Jul 09 '17 at 17:01

Mailchimp ajax SyntaxError on form submission

1 Answers1