How to post data in AJAX?

Question

I'm integrating a simple Mailchimp signup to the website I'm working on.

When clicking on submit, instead of being redirected, I want the form just to send the email address to Mailchimp using AJAX. I'm near totally ignorant concerning AJAX. I found a solution here but it still doesn't work. Clicking on the submit button still redirect, now to a page not found (404).

Here is my HTML :

<!-- Begin Mailchimp Signup Form -->
            <div id="mc_embed_signup">
                <form action="https://outlook.us10.list-manage.com/subscribe/post-json?u=46fbb562c588c268ad0d3f670&amp;id=007ec4fc87&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
                    <div id="mc_embed_signup_scroll">

                        <div class="mc-field-group">
                            <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter your email adress">
                        </div>
                        <div id="mce-responses" class="clear">
                            <div class="response" id="mce-error-response" style="display:none"></div>
                            <div class="response" id="mce-success-response" style="display:none"></div>
                        </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_46fbb562c588c268ad0d3f670_007ec4fc87" tabindex="-1" value=""></div>
                        <div class="clear"><button type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"><img src="./assets/svg/arrow-white.svg" alt=""></button></div>
                    </div>
                </form>
<!--End mc_embed_signup-->

And JS :

$(document).ready(function() {
        var $form = $('mc-embedded-subscribe');
        if ($form.length > 0) {
            $('button input[type="submit"]').bind('click', function(event) {
                if (event) event.preventDefault();
                register($form);
            });
        }
    });

    function register($form) {
        $.ajax({
            type: $form.attr('method'),
            url: $form.attr('action'),
            data: $form.serialize(),
            cache: false,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            error: function(err) {
                alert("Could not connect to the registration server. Please try again later.");
            },
            success: function(data) {
                if (data.result != "success") {
                    // Something went wrong, do something to notify the user. maybe alert(data.msg);
                } else {
                    // It worked, carry on...
                }
            }
        });
}

score 0 · Answer 1 · answered Jun 05 '20 at 07:51

0

Cased close !

The problem came from a little mistake : var $form = $('mc-embedded-subscribe');-> var $form = $('#mc-embedded-subscribe-form');

I was missing the #and not selecting the right ID.

answered Jun 05 '20 at 07:51

isUnknown

59
8

score -1 · Answer 2 · answered Jun 05 '20 at 07:06

-1

<form action="https://outlook.us10.list-manage.com/subscribe/post-json?u=46fbb562c588c268ad0d3f670&amp;id=007ec4fc87&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>

I think an HTML entity managed to sneak into your URL (& → &), so your URL should probably be https://outlook.us10.list-manage.com/subscribe/post-json?u=46fbb562c588c268ad0d3f670&id=007ec4fc87&c=?

answered Jun 05 '20 at 07:06

Andrei Mustata

1,013
1
9
21

Thanks for your answer but the problem is already solved. It just came from a mistake of syntax : $('mc-embedded-subscribe') -> $('#mc-embedded-subscribe-form') – isUnknown Jun 05 '20 at 07:45
It's a URL in an HTML attribute. `&` characters in HTML **should** be represented as `&`! – Quentin Jul 28 '20 at 19:16

How to post data in AJAX?

2 Answers2