如何使用PHP + JS获取名称以保存到mailchimp列表？

Question

I am only getting the email address even though I entered my name on the form. Please forgive me I am not an expert in coding. I only know basic html and I just get some codes I find on the internet.

My newsletter form looks like this:

 <form id="subscribe" class="form" action="<?=$_SERVER['PHP_SELF']; ?>" method="post">
        <div class="form-group form-inline">
          <input size="15" type="text" class="form-control required" id="NewsletterName" 
  name="NewsletterName" placeholder="Your name" /> 
          <input size="25" type="email" class="form-control required" id="NewsletterEmail" 
 name="NewsletterEmail" placeholder="your@email.com" /> 
          <input type="submit" class="btn btn-default" value="SUBSCRIBE" />
          <span id="response">
            <? require_once('assets/mailchimp/inc/store-address.php'); if($_GET['submit']){ echo 
 storeAddress(); } ?>
          </span>
        </div>
      </form>

my js file looks like this:

jQuery(document).ready(function() {
jQuery('#subscribe').submit(function() {
    // update user interface
    jQuery('#response').html('<span class="notice_message">Adding email address...</span>');


    var name = jQuery('#NewsletterName').val().split(' ');

    var fname = name[0];
    var lname = name[1];

    if ( fname == '' ) { fname=""; }
    if ( lname == '' || lname === undefined) { lname=""; }
    // Prepare query string and send AJAX request
    jQuery.ajax({
        url: 'assets/mailchimp/inc/store-address.php',
        data: 'ajax=true&email=' + escape(jQuery('#NewsletterEmail').val()),
        success: function(msg) {

            if (msg.indexOf("Success") !=-1) {
                jQuery('#response').html('<span class="success_message">Success! You are now 
subscribed to our newsletter!</span>');
            } else {
                jQuery('#response').html('<span class="error_message">' + msg + '</span>');
            }
        }
    });

    return false;
});
});

and my php file looks like this:

<?php

function storeAddress(){

require_once('MCAPI.class.php');  // same directory as store-address.php

// grab an API Key from http://admin.mailchimp.com/account/api/
$api = new MCAPI('mymailchimpapi');

$merge_vars = Array( 
    'EMAIL' => $_GET['email'],
    'FNAME' => $_GET['fname'], 
    'LNAME' => $_GET['lname']
);

// grab your List's Unique Id by going to http://admin.mailchimp.com/lists/
// Click the "settings" link for the list - the Unique Id is at the bottom of that page. 
$list_id = "myuniqueid";

if($api->listSubscribe($list_id, $_GET['email'], $merge_vars , $_GET['emailtype']) === true) {
    // It worked!   
    return 'Success!&nbsp; Check your inbox or spam folder for a message containing a 
confirmation link.';
}else{
    // An error ocurred, return error message   
    return '<b>Error:</b>&nbsp; ' . $api->errorMessage;
}

}

// If being called via ajax, autorun the function
if($_GET['ajax']){ echo storeAddress(); }
?>

I don't know if i should also add

 if($api->listSubscribe($list_id, $_GET['fname'], $merge_vars , $_GET['fname']) === true)

on the php file. Does anyone know where the problem is? Or is there something wrong in the JS file?

Answer 1

Your ajax query string only includes ajax=true&email= so $_GET['fname'] will be undefined. It would help if you did some validation of user input at server for security

A simpler way to compile the data from form is to use serialize()

jQuery('#subscribe').submit(function() {
    var formData= $(this).serialize() ;
    jQuery.ajax({
        url: 'assets/mailchimp/inc/store-address.php',
        data: formData,
        success: function(....
     ........................

    return false;
});

Reference: serialize() API Docs

Answer 2

Fixed!!!! Thanks Charlietfl for pointing out the problem. I Googled that part and was able to find a solution. I tried adding the serialize() code, but it's giving a page error upon clicking the submit button.

I added this on my JS file:

data: 'ajax=true&email=' + escape(jQuery('#NewsletterEmail').val()) + '&fname=' + escape(jQuery('#NewsletterName').val()),

so the whole code is:

jQuery(document).ready(function() {
jQuery('#subscribe').submit(function() {
    // update user interface
    jQuery('#response').html('<span class="notice_message">Adding email address...</span>');


    var name = jQuery('#NewsletterName').val().split(' ');

    var fname = name[0];
    var lname = name[1];

    if ( fname == '' ) { fname=""; }
    if ( lname == '' || lname === undefined) { lname=""; }
    // Prepare query string and send AJAX request
    jQuery.ajax({
        url: 'assets/mailchimp/inc/store-address.php',
        data: 'ajax=true&email=' + escape(jQuery('#NewsletterEmail').val()) + '&fname=' + 
escape(jQuery('#NewsletterName').val()),
        success: function(msg) {

            if (msg.indexOf("Success") !=-1) {
                jQuery('#response').html('<span class="success_message">Success! You are now 
subscribed to our newsletter!</span>');
            } else {
                jQuery('#response').html('<span class="error_message">' + msg + '</span>');
            }
        }
    });

    return false;
});
});