New AJAX form requesting for a valid email all the time

Hi guys,

I've been reading the posts in regards to the AJAX form, I have a similar problem as http://www.campaignmonitor.com/forums/viewtopic.php?id=2286 but I don't see that a solution has been posted.

Anyway, I have implemented the AJAX form on my site. I followed all the steps specified on the instructions (pretty much a copy and paste) but every time I try to submit the form, it asks for a valid email address. There is something in the Javascript that is failing.

Here is my JavaScript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    $(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://bachateros.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: "http://www.byronlatinfiesta.com/wp-content/themes/revolution-20/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");
                    
                    // Fire off Google Analytics fake pageview
                    var pageTracker = _gat._getTracker("UA-XXXXX-X");
                    pageTracker._trackPageview("/newsletter_signup");
                }
            });
        });
    });
    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>

And here is the HTML

<form action="http://bachateros.createsend.com/t/y/s/dylidi/" method="post">
<div>
  <span class="label"><label for="name">Name:</label></span>
  <span><input type="text" name="cm-name" id="name" size="20" />
  </span>
</div>
<div>
<span class="label"><label for="dylidi-dylidi">Email Address:</label></span>

<span><input type="text" name="cm-dylidi-dylidi" id="dylidi-dylidi" size="20" />
</span>
</div>
<div>

</div>
<div>
<span class="button"><input type="submit" value="Subscribe" /></span>
</div>
</form>

Any help, much appreciated as the website is live
-Juan

DavidMartin, 7 years ago

Hey Juan,

I've updated a couple things for you, to get you headed in the right direction.  There are a few additional things you'll need to keep in mind:

1) Your ajax call was pointing to "http://www.byronlatinfiesta.com/wp-content/themes/revolution-20/proxy.php". I've changed that to "/wp-content/themes/revolution-20/proxy.php" to avoid having issues with cross-domain scripting errors.  Even though your form may be on the same server, you'll want to avoid absolute links here.

2) Noticed that you are using the Google Analytics version.  If you are using Google Analytics, you'll want to add your GA ID in the following row "var pageTracker = _gat._getTracker("UA-XXXXX-X");" Just replace UA-XXXXX-X with your Google Analytics ID.

3) I added two div's to your code "theForm" and "confirmation".  If you are looking to just submit the code, without the confirmation showing, I might suggest that you simply use the subscription form without ajax.

Let me know if this is still giving you trouble.

Cheers,

Dave Martin

<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    $(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://bachateros.createsend.com/t/y/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: "http://www.byronlatinfiesta.com/wp-content/themes/revolution-20/proxy.php",
                type: "POST",
                data: final,
                success: function(){
                    // If successfully submitted hides the form
                    $("#theForm").hide();
                    // Shows "Thanks for subscribing" div
                    $("#confirmation").slideDown("slow");
                    // Fire off Google Analytics fake pageview
                    var pageTracker = _gat._getTracker("UA-XXXXX-X");
                    pageTracker._trackPageview("/newsletter_signup");
                }  
            });
        });
    });
    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">
    <form action="http://bachateros.createsend.com/t/y/s/dylidi/" method="post">
    <div> 
        <span class="label">
            <label for="name">Name:</label>
        </span>
        <span>
            <input type="text" name="cm-name" id="name" size="20" />
        </span> 
    </div>
    <div>
        <span class="label">
            <label for="dylidi-dylidi">Email Address:</label>
        </span>
        <span>
        <input type="text" name="cm-dylidi-dylidi" id="dylidi-dylidi" size="20" />
        </span>
    </div>
    <div>
        <span class="button">
            <input type="submit" value="Subscribe" />
        </span>
    </div>
    </form>
</div>
<div id="confirmation" style="display: none;">Thanks for subscribing.</div>

</body>
</html>

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