AJAX form loads confirmation page instead of refreshing div

I'm using the AJAX subscription code from here:


Subscribers are successfully added to my subscriber list; however the form always loads the external confirmation page instead of just loading a confirmation div, which I find ugly.

Here's a site featuring the form in a sidebar on the right:


Here's the javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        $("#subForm input:submit").click(function() {    
            // First, disable the form from submitting
            $('form#subForm').submit(function() { return false; });
            // Grab form action
            formAction = $("form#subForm").attr("action");
            // Hacking together id for email field
            // Replace the xxxxx below:
            // If your form action were http://mysiteaddress.createsend.com/t/r/s/abcde/, then you'd enter "abcde" below
            emailId = "gjktu";
            emailId = emailId.replace("/", "");
            emailId = emailId + "-" + emailId;
            // Validate email address with regex
            if (!checkEmail(emailId)) 
                alert("Please enter a valid email address");
            // Serialize form values to be submitted with POST
            var str = $("form#subForm").serialize();
            // Add form action to end of serialized data
            final = str + "&action=" + formAction;
            // Submit the form via 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);

Here's the form code:

<!-- start form -->
<div id="theForm" style="padding-top:25px;">
<form action="http://enews.chillichocolate.net/t/r/s/gjktu/" method="post" id="subForm">
<input type="text" name="cm-name" id="name"  value="Name"  size="15" style="border: 1px solid #d9d9d9;" />
<input type="text" name="cm-gjktu-gjktu" id="gjktu-gjktu" value="Email address"  size="15" style="border: 1px solid #d9d9d9;"  />
<input type="submit" value="Go!" style="border: 1px solid #d9d9d9;" />
<div id="confirmation" style="display: none; font-size:11px;padding-top:24px;">Thanks for subscribing!</div>
<!-- end form -->

Any ideas? Anyone testing can feel free to subscribe as many times as he likes with a @example.com address.

Joomailer Joomailer, 7 years ago

The Firebug console comes up with this error: "$("#subForm input:submit") is null"

The easiest solution is to change this part of the javascript to: $("#cm-submit")
and add to the submit input field  id="cm-submit"


Joomailer.com - Campaign Monitor Integration for Joomla!
shg, 7 years ago

Thanks for chipping in Joomailer.  I've made two changes you suggest but unfortunately the problem remains.


DavidMartin, 7 years ago

I had a look at your code.  It looks like your problem lies in the fact that you're trying to load multiple javascript libraries on the same page.

1) Line 16 you are loading jquery
2) Line 67 you are loading jquery again
3) Line 121 you are loading prototype

In my experience, trying to load jquery and prototype on the same page always causes issues (There are work-arounds, but I've never had much success with them).

Hope that helps,

Dave Martin

shg, 7 years ago

Sorry to have left this unresolved for a couple of weeks - real life, etc etc.

I did some experimentation following Dave's post above and the culprit was indeed a clash with prototype, being loaded by another plugin. When I killed that the subscribe form began working correctly (and prettily).

Thanks guys - really appreciate the help.

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