MailChimp Ajax Integration

Question

MailChimp Ajax Integration

I am trying to customize an email registration form.

I want to prevent the form from hitting the mailchimp landing page after the form is submitted. I want it to reload the form and display a message if the submit succeeds or fails.

I've tried what was discussed in this stackoverflow question , but it didn't work.

This is my html and javascript for the form:

//newsletter -start

    var $form = $('#mc-embedded-subscribe-form');

    if ( $form.length > 0 ) {
        $('form button[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            register_newsletter($form);
            return false;
        });

    }

    function register_newsletter($form) {
        $.ajax({

            type: $form.attr('method'),
            url: $form.attr('action'),
            data: {EMAIL:.find('#mce-EMAIL').val()},
            //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") {
                  $( "#mc-embedded-subscribe-form .form-group, #mc-embedded-subscribe-form button" ).remove();
                  $( "#mc-embedded-subscribe-form" ).append('<p>Pendaftaran Anda berhasil.</p>');
                } else {                
                  $( "#mc-embedded-subscribe-form .form-group, #mc-embedded-subscribe-form button" ).remove();
                  $( "#mc-embedded-subscribe-form" ).append('<p>Pendaftaran anda <strong>gagal</strong>.</p>');
                }
            }
        });
    }

//newsletter -end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-sub">
  <div class="row">
    <div class="col-md-24 col-sm-24 col-xs-24">
      <div id="mc_embed_signup">
        <p><strong>Daftar &amp; Dapatkan VOUCHER 75,000<br/>serta penawaran spesial dari MatahariMall</strong></p>
        <form action="http://mataharimall.us10.list-manage.com/subscribe/post-json?u=ce402de87bc4303ab82a36695&amp;id=912ec37292&amp;c=?" class="form-search-opps" id="mc-embedded-subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" role="search" target="_blank">
          <div class="form-group">
            <input class="form-control" id="mce-EMAIL" name="EMAIL" placeholder="Masukkan email Anda di sini" type="text" value="" />
          </div>
          <button class="btn btn-red pria" id="mce-GENDER-0" name="GENDER" type="submit" value="Pria">Pria</button>
          <button class="btn btn-red wanita" id="mce-GENDER-1" name="GENDER" type="submit" value="Wanita">wanita</button>
        </form>
      </div>
    </div>
  </div>
</div>

Run code Hide result

If successful, mailchimp will produce this:

? ({"result": "success", "msg": "Almost done ... We need to verify your email address. To complete the subscription process, click the link in the email we just sent you."})

If that fails, mailchimp will do the following: