MailChimp Ajax Integration

Question

I am trying to custom mailchimp signup form.

I want to the form not got to the mailchimp landing page, after the form submit. I want it reload the form and display the message, if the submission success or failed.

I have tried what have been discussed on https://stackoverflow.com/a/15120409, but it is failed.

This my html & 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>

If success, mailchimp will produce this :

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

If failed, mailchimp will produce this :

?({"result":"error","msg":"0 - An email address must contain a single @"})