need help merging old working jquery with new webform

Question

I apologize for the title of this question as I know it seems a little broad. Unfortunately, I am still really new to jquery and I had lots of help in the past to make this work, and now I am wanting to change things and I'm pretty in over my head.

I have a website that is live here: http://www.rattletree.com There is the newsletter signup form where when a user clicks on the email box, the name and city fields drop down to be populated as well. This all works fine, but the way it works now, the info is sent directly to my email address and I need to manually enter the person into our email marketing program. I am now wanting to have this info sent directly to our email marketing program by taking the needed info from the embed code provided by the program. I have been working on it for a few days, and sometimes I manage to get the info sent to the program and not hide the divs and sometimes I manage to hide the divs and not get the form properly sent. I'm a little lost. I'm hoping someone can help me properly merge these two things.

Here is the working code for the current live website that is sending to my own email address:

(in the header)

<div class="outeremailcontainer">
    <div id="emailcontainer">
        <?php include('verify.php'); ?>
        <form action="../index_success.php" method="post" id="sendEmail" class="email">
            <h3 class="register2">Newsletter Signup:</h3>
            <ul class="forms email">
                <li class="name">
                    <label for="yourName">Name: </label>
                    <input type="text" name="yourName" class="info" id="yourName" value="<?php echo $_POST['yourName']; ?>" /><br />
                </li>
                <li class="city"><label for="yourCity">City: </label>
                    <input type="text" name="yourCity" class="info" id="yourCity" value="<?php echo $_POST['yourCity']; ?>" /><br />
                </li>
                <li class="email">
                    <label for="emailFrom">Email: </label>
                    <input type="text" name="emailFrom" class="info" id="emailFrom" value="<?php echo $_POST['emailFrom']; ?>" />
                     <?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
                     ?>
                </li>
                <li class="buttons email">
                     <button type="submit" id="submit">Send</button>
                     <input type="hidden" name="submitted" id="submitted" value="true" />
                </li>
            </ul>
        </form>
    <div class="clearing">
    </div>
  </div>
</div>

The script:

$(document).ready(function () {
    $('#emailFrom').focus(function () {
        if ($('#overlay').length) {
            return;
        } // don't keep adding overlays if one exists

        $('#sendEmail').find('.name, .city').slideDown(300, function () {
            $(this).show();
        });

        $('.outeremailcontainer').css({
            position: 'relative',
            bottom: 0,
            left: 0,
            zIndex: 1001
        });

        $('<div id="overlay"></div>').appendTo('body');
    });

    $('#overlay').live('click', function () {
        $('#sendEmail').css({
            backgroundColor: 'transparent'
        }).find('.name, .city').slideUp(300);

        $('.outeremailcontainer').css({
            position: 'static'
        });
        $('#overlay').remove();
    });
});

in an include at the bottom of the page:

$(document).ready(function () {
    $("#submit").click(function () {
        $(".error").hide();
        var hasError = false;
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailFromVal = $("#emailFrom").val();

        if (emailFromVal == '') {
            $("#emailFrom").after('<span class="error"><br />You forgot to enter the email address to send from.</span>');
            hasError = true;

        } else if (!emailReg.test(emailFromVal)) {
            $("#emailFrom").after('<span class="error"<br />>Enter a valid email address to send from.</span>');
            hasError = true;
        }

        var yourNameVal = $("#yourName").val();
        if (yourNameVal == '') {
            $("#yourName").after('<span class="error"><br />You forgot to enter your name.</span>');
            hasError = true;
        }

        var yourCityVal = $("#yourCity").val();
        if (yourCityVal == '') {
            $("#yourCity").after('<span class="error"><br />You forgot to enter your city.</span>');
            hasError = true;
        }
        if (hasError == false) {
            $(this).hide();
            $("#sendEmail li.buttons").append('<img src="/wp-content/themes/default/images/template/loading.gif" alt="Loading" id="loading" />');
            $.post("/includes/sendemail.php",
                //emailTo: emailToVal, 
                {
                    emailFrom: emailFromVal,
                    yourName: yourNameVal,
                    yourCity: yourCityVal
                },
                function (data) {
                    $("#sendEmail").slideUp("normal", function () {
                        $("#sendEmail").before('<h3 class="register2">Thank you!  You\'re on the email list!</h3><p class="emailbox">Click <a href="http://rattletree.com/Songs/Live_EP/Chikende.mp3">HERE</a> for your free song.</p>');
                    });
                }
            );
        }
        return false;
    });
});

And lastly here is the code that the email marketing program is providing where I am wanting to send the above name, city, and email info to:

<form action="https://madmimi.com/signups/subscribe/66160" method="post" id="mad_mimi_signup_form">
    <fieldset>
        <div class="mimi_field text email required">
            <label for="signup_email">Email</label>
            <input id="signup_email" name="signup[email]" type="text" placeholder="[email protected]" class="required">
            <div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
        </div>
        <div class="mimi_field text required">
            <label for="signup_name" id="wf_label">Name</label>
            <input id="signup_name" name="signup[name]" type="text" class="required">
            <div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
        </div>
        <div class="mimi_field text required">
            <label for="signup_city" id="wf_label">City</label>
            <input id="signup_city" name="signup[city]" type="text" class="required">
            <div class="mimi_field_feedback"></div><span class="mimi_funk"></span>
        </div>
        <div class="mimi_field action">
            <input id="webform_submit_button" value="Sign up!" type="submit" class="submit" data-default-text="Sign up!" data-submitting-text="Sending…" data-invalid-text="? You forgot some required fields">
        </div>
    </fieldset>
</form>

Thank you greatly for any help!

Answer 1

There's an easy way to achieve this, using MadMimi's API and their official PHP wrapper which is available here on GitHub.

It doesn't involve any changes to the jQuery, or CORS.

They have an example of how to add new subscribers to lists which is what you're looking for.

I've customised the example for you: (add this to /includes/sendemail.php)

<?php
require('MadMimi.class.php');
$mailer = new MadMimi('YOUR USERNAME (OR E-MAIL ADDRESS)', 'YOUR API KEY'); 
$user = array('email' => $_REQUEST['emailFrom'], 'name' => $_REQUEST['yourName'], 'city' => $_REQUEST['yourCity'], 'add_list' => 'My List');
$mailer->AddUser($user);
?>

This assumes that you have placed the MadMimi.class.php and Spyc.class.php files in the same directory as your current handler, /includes/sendemail.php.

Be sure to plug in your real username and API key (which you should be able to get from MadMimi when you're signed in).

You could even leave the existing email script in there and simply add the API call to MadMimi, and be notified every time someone subscribes, but not have to do anything :)