Ajax No Refresh

I have a very simple form, very simple an email capture. But, on the back-end I wanted to use an Ajax submit so the page doesn't refresh. I'm not a JS guy and I know the issue lies within there somewhere.

I took the code that was generated and placed it in my form.

Form Code:
          <form action="http://app47.createsend.com/t/r/s/cdhutj/" method="post" id="subForm">
            <input name="cm-cdhutj-cdhutj" type="email" class="round gradient field" id="cdhutj-cdhutj" placeholder="email address" size="35" />
            <button type="submit" name="submit" value="send" class="css3button">send</button>
          </form>

The Javascript:

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".css3button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
        

        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }

        
        var dataString = '&email=' + email;
        //alert (dataString);return false;
        
        $.ajax({
      type: "POST",
      url: "bin/process.php",
      data: dataString,
      success: function() {
        $('#form').html("<div id='message'></div>");
        $('#message').html("<h2>Email Address Submitted!</h2>")
        .append("<p>We will be in touch soon.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#name").select().focus();
});

This JS was taken from another source. Yet, it functions really nice when the form is submitted. A simple message appears in the same spot as the form. I know the above JS is submitting to url: "bin/process.php",. I was thinking that the POST info from CM would override that and post to the correct location.

I'm sure this is a simple fix for someone but beyond my skill set.

Thank You,

tobyb tobyb, 5 years ago

Hey tmoura,

As your seeing, the javascript will override the default form submission, posting the data to bin/process.php instead. Due to the same origin policy it's not possible to use ajax to directly post the subscribe form to CampaignMonitor. We provide an AJAX subscription form to work around this policy, have a look at that and you should get up and running.

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