0

Hi there,

I am currently helping out a company with an eCommerce site in Magento Community Edition, but I'm struggling with embedding a Mailchimp email subscribe form into a page.

When I click Subscribe, literally nothing happens. The form is definitely validating, because I'm seeing error messages pop up when I click Subscribe without entering any details, but as soon as I enter details into each field, I click Submit and nothing happens.

Mailchimp's FAQs suggest that this is because of a Javascript conflict with another form that is already in the footer of the website.

Any idea how I could edit Mailchimp's code to get this to work?

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="http://electrix.us5.list-manage.com/subscribe/post?u=7dc5e83bd444f57b03b94a389&amp;id=ca12571cc2" method="post" name="mc-embedded-subscribe-form" target="_blank">
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input id="mce-EMAIL" class="required email" type="email" name="EMAIL" value="" /></div>
<div class="mc-field-group"><label for="mce-CNAME">Company Name <span class="asterisk">*</span> </label> <input id="mce-CNAME" class="required" type="text" name="CNAME" value="" /></div>
<div class="mc-field-group input-group"><strong>Preferred Language </strong>
<ul>
<li><input id="mce-group[257]-257-0" type="radio" name="group[257]" value="1" /><label for="mce-group[257]-257-0">English | UK</label></li>
<li><input id="mce-group[257]-257-1" type="radio" name="group[257]" value="2" /><label for="mce-group[257]-257-1">English | USA</label></li>
<li><input id="mce-group[257]-257-2" type="radio" name="group[257]" value="4" /><label for="mce-group[257]-257-2">Fran&ccedil;ais</label></li>
<li><input id="mce-group[257]-257-3" type="radio" name="group[257]" value="8" /><label for="mce-group[257]-257-3">Deutsch</label></li>
</ul>
</div>
<div id="mce-responses" class="clear">&nbsp;</div>
<div><input id="mc-embedded-subscribe" class="button" type="submit" name="subscribe" value="Subscribe" /></div>
</form></div>
<script type="text/javascript">// <![CDATA[
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='CNAME';ftypes[3]='text';fnames[7]='NBUS';ftypes[7]='dropdown';fnames[4]='COUNTRY';ftypes[4]='dropdown';fnames[6]='CURRENCY';ftypes[6]='dropdown';fnames[5]='CID';ftypes[5]='text';fnames[8]='UBPAGEID';ftypes[8]='text';fnames[9]='UBVARIANT';ftypes[9]='text';fnames[10]='UBDATE';ftypes[10]='date';
try {
    var jqueryLoaded=jQuery;
    jqueryLoaded=true;
} catch(err) {
    var jqueryLoaded=false;
}
var head= document.getElementsByTagName('head')[0];
if (!jqueryLoaded) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
    head.appendChild(script);
    if (script.readyState && script.onload!==null){
        script.onreadystatechange= function () {
              if (this.readyState == 'complete') mce_preload_check();
        }    
    }
}

var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = '#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}';
}
var head= document.getElementsByTagName('head')[0];
var style= document.createElement('style');
style.type= 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = err_style;
} else {
  style.appendChild(document.createTextNode(err_style));
}
head.appendChild(style);
setTimeout('mce_preload_check();', 250);

var mce_preload_checks = 0;
function mce_preload_check(){
    if (mce_preload_checks>40) return;
    mce_preload_checks++;
    try {
        var jqueryLoaded=jQuery;
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js';
    head.appendChild(script);
    try {
        var validatorLoaded=jQuery("#fake-form").validate({});
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    mce_init_form();
}
function mce_init_form(){
    jQuery(document).ready( function($) {
      var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
      var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
      $("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
      options = { url: 'http://electrix.us5.list-manage1.com/subscribe/post-json?u=7dc5e83b876503b94a389&id=ca12231cc2&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                    beforeSubmit: function(){
                        $('#mce_tmp_error_msg').remove();
                        $('.datefield','#mc_embed_signup').each(
                            function(){
                                var txt = 'filled';
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        var bday = false;
                                        if (fields.length == 2){
                                            bday = true;
                                            fields[2] = {'value':1970};//trick birthdays into having years
                                        }
                                        if ( fields[0].value=='MM' && fields[1].value=='DD' && (fields[2].value=='YYYY' || (bday && fields[2].value==1970) ) ){
                                            this.value = '';
                                        } else if ( fields[0].value=='' && fields[1].value=='' && (fields[2].value=='' || (bday && fields[2].value==1970) ) ){
                                            this.value = '';
                                        } else {
                                            if (/\[day\]/.test(fields[0].name)){
                                                this.value = fields[1].value+'/'+fields[0].value+'/'+fields[2].value;                                           
                                            } else {
                                                this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
                                            }
                                        }
                                    });
                            });
                        $('.phonefield-us','#mc_embed_signup').each(
                            function(){
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        if ( fields[0].value.length != 3 || fields[1].value.length!=3 || fields[2].value.length!=4 ){
                                            this.value = '';
                                        } else {
                                            this.value = 'filled';
                                        }
                                    });
                            });
                        return mce_validator.form();
                    }, 
                    success: mce_success_cb
                };
      $('#mc-embedded-subscribe-form').ajaxForm(options);


    });
}
function mce_success_cb(resp){
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        $('#mce-'+resp.result+'-response').show();
        $('#mce-'+resp.result+'-response').html(resp.msg);
        $('#mc-embedded-subscribe-form').each(function(){
            this.reset();
        });
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                $('#mce-'+resp.result+'-response').show();
                $('#mce-'+resp.result+'-response').html(msg);            
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';

                var input_id = '#mc_embed_signup';
                var f = $(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = $(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = $(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = $().parent(input_id).get(0);
                }
                if (f){
                    $(f).append(html);
                    $(input_id).focus();
                } else {
                    $('#mce-'+resp.result+'-response').show();
                    $('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            $('#mce-'+resp.result+'-response').show();
            $('#mce-'+resp.result+'-response').html(msg);
        }
    }
}
// ]]></script>
<!--End mc_embed_signup-->

Any help would be great.

Thanks,

Richard

2
Contributors
6
Replies
32
Views
4 Years
Discussion Span
Last Post by gon1387
0

I've never used the console before (I'm not really a programmer, as you can probably tell), but in Chrome, this is what shows when I open up the Console, enter some values and click Subscribe:

9b4f15ef8becdd9c34bac26af12d13ca

To clarify, if you can't see the picture above, here is the text:

Uncaught TypeError: Cannot call method 'hide' of null newsletter:345
mce_success_cb newsletter:345
options.success jquery.form-n-validate.js:149
k 7314ca446903a63da6418d96503dabab.0.js:7
l.fireWith 7314ca446903a63da6418d96503dabab.0.js:7
y 7314ca446903a63da6418d96503dabab.0.js:7
c.onload.c.onreadystatechange 7314ca446903a63da6418d96503dabab.0.js:7

Edited by hindu times: bigger picture

0

You have to check what causes this error "Uncaught TypeError: Cannot call method 'hide' of null newsletter:345" at line 345

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.