AJAX subscription form problems.

Hello,

I followed the directions. Everything seems to work fine. The form seems to submit and i get the confirmation message, but when i check subscribers list nothing has been add.

any help would be greatly appreciated. thank you.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter Signup</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    $(function()
    {
        $(":submit").click(function() {    
            
            // First, disable the form from submitting
            $('form').submit(function() { return false; });
            
            // Grab form action
            formAction = $("form").attr("action");

            // Hack together id for email field
            emailId = formAction.replace("http://artatthedump.createsend.com/t/r/s/siyti/", "");
            emailId = emailId.replace("/", "");
            emailId = emailId + "-" + emailId;
            
            // Validate email address with regex
            if (!checkEmail(emailId)) 
            {
                alert("Please enter a valid email address");
                return;
            }
            
            // Serialize form values to be submitted with POST
            var str = $("form").serialize();
            
            // Add form action to end of serialized data
            final = str + "&action=" + formAction;
            
            // Submit the form via ajax
            $.ajax({
                url: "proxy.php",
                type: "POST",
                data: final,
                success: function(html){
                    $("#theForm").hide(); // If successfully submitted hides the form
                    $("#confirmation").slideDown("slow");  // Shows "Thanks for subscribing" div
                }
            });
        });
    });
    function checkEmail(email)
    {    
        var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var emailVal = $("#" + email).val();
        return pattern.test(emailVal);
    }
</script>
</head>
<body>
<div id="theForm">
<!-- ////////////////////////////////////////////////
    Paste your subscribe form below this line
/////////////////////////////////////////////////////-->
<form action="http://artatthedump.createsend.com/t/r/s/siyti/" method="post">
<div>
<label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br />
<label for="siyti-siyti">Email:</label><br /><input type="text" name="cm-siyti-siyti" id="siyti-siyti" /><br />

<input type="submit" value="Subscribe" />
</div>
</form>
<!-- ////////////////////////////////////////////////
    Your subscribe form should be pasted above
/////////////////////////////////////////////////////-->
</div>
<div id="confirmation" style="display: none;">Thanks for subscribing</div>
</body>
</html>
Mathew Mathew, 7 years ago

Hi,

Are you testing with an address not already on the list? Your address may already be added or deleted perhaps.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
micahg, 7 years ago

I've tried several different addresses.

Benjip, 7 years ago

I'm having the same issue. Have tried the form by itself (without the Ajax/Proxy etc.) and it's adding subscribers, so it must be something to do with the Proxy file (as the form itself is returning the 'success' DIV)?

Mathew Mathew, 7 years ago

Hi,

Please contact support with some more details about where we can see the form in use, and we'll be able to help you out.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
amygail, 7 years ago

I'm also having this issue (works in 'non ajax mode' not with ajax/proxy.) Also works when I test it on my local server -the problem is with my host.

The error I'm getting is 
"<b>Warning</b>:  fopen() [<a href='function.fopen'>function.fopen</a>]: URL file-access is disabled in the server configuration in XXXXXX"

I'm on media temple and according to the knowledebase : allow_url_fopen has been disabled because
"If enabled, allow_url_fopen allows PHP's file functions to retrieve data from remote locations such as an FTP server or web site, and could lead to code injection vulnerabilities"

They suggest :
"There are many safer methods to accomplish the same desired results without this possible security issue.

    * Use a relative path to the file stored locally
    * Using the PHP environment variable $_SERVER['DOCUMENT_ROOT'], which returns the absolute path to the web root directory.
    * cURL is another method that could be used"

I did see that user vinci has posted a curl method on this thread (but it's beyond me)

http://www.campaignmonitor.com/forums/viewtopic.php?id=1030&p=2

DavidMartin, 7 years ago

Here's a Curl version.  Just replace the code in proxy.php with the following:

<?php
header('Content-type: text/javascript');

// Extract form action and assign to variable

    $action = $_POST['action'];

// Assign form array to single variable

    $arr = $_POST;
   
// Remove "action" key from array

    unset($arr['action']);

// Loop through and add keys and values to a single variable

    foreach ($arr as $key => $value) {
        $formVars .= $key."=".$value."&";
    }

// Remove last "&"

    $formVars = substr($formVars,0,-1);

// Add the action URL back in the mix
   
    //$url = $action.'?'.$formVars;

// Get the response

    $handle = curl_init($action);

// If there is something, read and return

    curl_setopt($handle, CURLOPT_POST, true);
    curl_setopt($handle, CURLOPT_POSTFIELDS, $formVars);
    curl_setopt ($handle, CURLOPT_FOLLOWLOCATION, 1);
    echo curl_exec($handle);
    curl_close($handle);
?>

micahg, 7 years ago

Thank you so much. It works now on my mediatemple account. But for some reason i still can't get it to work with my local server. I don't get any errors. Any ideas?

amygail, 7 years ago

Thanks so much! - this worked.

micahg - are you using firebug or something similar to test? - The reason I ask is that I also use the web dev toolbar extension for FireFox  & it doesn't give me all the info that firebug does.

Any change that you need to change the path to your proxy? (sometimes when I'm working both locally and remotely, I get the paths mixed up.

amygail, 7 years ago

I have this working - but now it's hijacking my search (submit) form..
When attempt to use my search I get the 'please enter a valid email address' message.

I'm assuming that it has something to do with the 'submit' element, but I don't know what to do about that.

Any ideas would be greatly appreciated.

DavidMartin, 7 years ago

If you have multiple forms on the same page, you'll need to make a couple slight modifications.  Basically, you'll need to add an ID to both your form tag (example, id="subscribeForm") and your submit input tag (example, id="submitButton").  In the javascript, you'll then want to point to those ID's.  I've included a sample below. 

Let me know if you get stuck.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter Signup</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>

    $(function()
    {
        $("#submitButton").click(function() {    
            
            // First, disable the form from submitting
            $('#subscribeForm').submit(function() { return false; });
            
            // Grab form action
            formAction = $("#subscribeForm").attr("action");
            
            // Hack together id for email field
            emailId = formAction.replace("http://YOURSITENAME.createsend.com/t/r/s/", "");
            emailId = emailId.replace("/", "");
            emailId = emailId + "-" + emailId;
            
            // Validate email address with regex
            if (!checkEmail(emailId)) 
            {
                alert("Please enter a valid email address");
                return;
            }
            
            // Serialize form values to be submitted with POST
            var str = $("form").serialize();
            
            // Add form action to end of serialized data
            final = str + "&action=" + formAction;
            
            // Submit the form via ajax
            $.ajax({
                url: "proxy.php",
                type: "POST",
                data: final,
                success: function(html){
                    // If successfully submitted hides the form
                    $("#theForm").hide();
                    // Shows "Thanks for subscribing" div
                    $("#confirmation").slideDown("slow");
                }
            });
        });
    });
    function checkEmail(email)
    {    
        var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var emailVal = $("#" + email).val();
        return pattern.test(emailVal);
    }
</script>
</head>
<body>
<div id="theForm">
<!-- ////////////////////////////////////////////////
    Paste your subscribe form below this line
/////////////////////////////////////////////////////-->
<form id="subscribeForm" action="http://YOURSITENAME.createsend.com/t/r/s/xxxxx/" method="post">
<div>
<label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br />
<label for="xxxxx-xxxxx">Email:</label><br /><input type="text" name="cm-xxxxx-xxxxx" id="xxxxx-xxxxx" /><br />

<input type="submit" id="submitButton" value="Subscribe" />
</div>
</form>
<!-- ////////////////////////////////////////////////
    Your subscribe form should be pasted above
/////////////////////////////////////////////////////-->
</div>
<div id="confirmation" style="display: none;">Thanks for subscribing</div>
</body>
</html>
amygail, 7 years ago

Hi again DavidMartin.
OK - I'm almost there - this works perfectly as is - but I have to use jQuery's no conflict mode and for some reason I can't make it work with this version.
Before I could just change all the '$' to 'jQuery' - now when I do that, I get the dreaded "Please enter a valid email address" alert.
Any thoughts? (should I just give up ;-)
thanks again for all your help!

DavidMartin, 7 years ago

Hey amygail,

I'm happy to take a look.  I can't promise anything, as I've never worked with no conflict mode.  Probably the easiest thing to do would be for you to submit a support ticket.  Just click "Contact us" from the links in the footer of this page. In the ticket please:

1) Ask that the ticket is forwarded to me (Dave Martin)
2) Include your source code, or a link to where I can check it out.

Thanks,

amygail, 7 years ago

Dave  - I finally have it working!
here's the script in 'no conflct'

 jQuery(function()
    {
        jQuery("#submitButton").click(function() {    
            
            // First, disable the form from submitting
            jQuery('#subscribeForm').submit(function() { return false; });
            
            // Grab form action
            formAction = jQuery("#subscribeForm").attr("action");
            
            // Hack together id for email field
            emailId = formAction.replace("http://xxxx.createsend.com/t/r/s/", "");
            emailId = emailId.replace("/", "");
            emailId = emailId + "-" + emailId;
            
            // Validate email address with regex
            if (!checkEmail(emailId)) 
            {
                alert("Please enter a valid email address");
                return;
            }
            
            // Serialize form values to be submitted with POST
            var str = jQuery("form").serialize();
            
            // Add form action to end of serialized data
            final = str + "&action=" + formAction;
            
            // Submit the form via ajax
            jQuery.ajax({
               url: "proxy.php",
                type: "POST",
                data: final,
                success: function(html){
                    // If successfully submitted hides the form
                    jQuery("#theForm").hide();
                    // Shows "Thanks for subscribing" div
                    jQuery("#confirmation").slideDown("slow");
                }
            });
        });
    });
    function checkEmail(email)
    {    
        var pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var emailVal = jQuery("#" + email).val();
        return pattern.test(emailVal);
    }

My issue was solved by leaving the "var pattern" '$' alone (rather than replacing it with 'jQuery'
I hope that makes sense - I'm obviously a cut, paste and repaste 'till it works coder.
Thanks so much for all your help!
a

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098