Quantcast
Viewing all articles
Browse latest Browse all 8245

bjones1985 on "Using Ajax in Wordpress to submit a MailChimp form using MailChimp API"

The problem is my call back function which is mailchimp_submit isn't working. Not sure why. This is what I have.

add_action('wp_enqueue_scripts', 'mailchimp_scripts');

function mailchimp_scripts() {
    wp_register_script( 'mailchimp', get_template_directory_uri().'/inc/plugins/mailchimp-single-sub/js/mailchimp-form-submit.js', array('jquery'), RARE_THEME_VERSION_NUMBER, true );
    wp_localize_script( 'mailchimp', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));

    wp_enqueue_script( 'mailchimp' );
}

add_action('wp_ajax_mailchimp_submit', 'mailchimp_submit');
add_action('wp_ajax_nopriv_mailchimp_submit', 'mailchimp_submit');

function mailchimp_submit() {

    require_once __DIR__.'/inc/MCAPI.class.php';
    require_once __DIR__.'/inc/config.php';

    $api = new MCAPI($apikey);

    $subscriberemailID = $_POST["EMAIL"];

    $retval = $api->listSubscribe( $listId, $subscriberemailID, $merge_vars = null );

    echo json_encode($retrval);

    die();

}

// MailChimp form shortcode

add_shortcode("mailchimp-single-sub-print", "mailchimp_single_sub");

function mailchimp_single_sub() {

    echo '<div id="newsletter mc_embed_signup">
            <!-- Begin MailChimp Signup Form -->
            <div id="mailchimp_single_sub_widget_form">
                <div id="status"></div>
                <form class="newsletter-form" action="\" method="post">
                    <h2 class="signup-title">Subscribe to our mailing list</h2>

                    <div class="mc-field-group">
                        <input type="text" name="EMAIL" class="email required" value="" id="mce-EMAIL" placeholder="Email Address">
                        <input type="submit" name="subscribe" id="mc-embedded-subscribe" value="Subscribe" class="btn submit button">
                    </div>
                    <p class="signup-small">Get the latest stories and blogs posts emailed to you each day.</p>
                </form>
            </div>
            <!-- End MailChimp Signup Form -->
            <div class="fix"></div>
        </div><!-- /#newsletter -->';

}

?>

The problem is the function mailchimp_submit is not working. The first file being required is the Mail Chimp API from MailChimp. The second file just includes the account API key and the list ID.

Here is the Js file.

jQuery(document).ready(function($) {
    $('#mc-embedded-subscribe').click(function() { 

        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var email = $("input.email").val();
        if (email == "") {
            alert('This is a required field');
            $("input.email").focus();
            hasError = true;
        }

        else if(!emailReg.test(email)) {
            alert('Please enter a valid email address');
            $("input.email").focus();
            hasError = true;
        }

        if(hasError == true) { return false; }

        $.ajax({
            type: 'POST',
            dataType : 'json',
            url: myAjax.ajaxurl,
            data: {action: 'mailchimp_submit'},
            success: function() {
                $('.mc-field-group, .newsletter-form, .signup-small').hide();
                $('#status').append('Thank you for subscribing.');
            }
         });
         return false;
    });
});

I have been reading the codex and tutorials on this specifically and can't find a solution. If I could get any help would be appreciated.


Viewing all articles
Browse latest Browse all 8245

Trending Articles