pcs pcs - 1 year ago 208
jQuery Question

Mailchimp signup form is not working subscribe button

Here is my JSFIDDLE:

When i run this code, when i click subscribe button, Nothing happened.

I m trying to change the location placing code, but still i couldn't find the mistake.

<div class='popup'>
<div class='cnt223'>
<img src='http://s14.postimg.org/w3j8ay2bh/1440412582_cross_24.png'
alt='quit' class='x' id='x' />
<div id="mc_embed_signup">
<form action"//wafytech.us11.list-manage.com/subscribe
/post?u=4cc1d72c9827dd3ef80675e4c&amp;id=4d5daa8c14" method="post" id="mc-
embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
<input type="email" value="" name="EMAIL" class="required email" id="mce-
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
<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;"><input type="text"
name="b_4cc1d72c9827dd3ef80675e4c_4d5daa8c14" tabindex="-1" value=""></div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-
subscribe" class="button"></div>

Answer Source

The error is because you have http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js loading before the document finishes loading.

On line 196, you have the following:

    getAjaxSubmitUrl: function() {
        var url = $("form#mc-embedded-subscribe-form").attr("action");
        url = url.replace("/post?u=", "/post-json?u=");
        url += "&c=?";
        return url;

It is giving me errors on url = url.replace("/post?u=", "/post-json?u="); because $("form#mc-embedded-subscribe-form") can't fetch the right element due to the document not being loaded. As a consequence, .attr("action") will return undefined. Try adding a .ready event listener to the whole code.

Also, the right way is $("#mc-embedded-subscribe-form").

To add on that, you also have this on your HTML:

<form action"[...]">

You forgot the = between action and its value. It should look like this:

<form action="[...]">

Notice the = there!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download