How can i send post request to campaign monitor using jquery?

Question

I have a wordpress form, which is built using contact form 7. I have a requirement, when checkbox is selected, I have to send the user's email and name to comapign monitor list, also the contact form sends an email.

<form action="/xxx/xxx/#wpcf7-f54-o3" method="post" class="wpcf7-form"     enctype="multipart/form-data" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="54">
<input type="hidden" name="_wpcf7_version" value="3.8.1">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f54-o3">
<input type="hidden" name="_wpnonce" value="96b9aa989f">
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <span class="wpcf7-form-control-wrap text-482"><input type="text" name="text-482" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="name" aria-required="true" aria-invalid="false" placeholder="Your Name (required)"></span>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <span class="wpcf7-form-control-wrap text-742"><input type="text" name="text-742" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Your Phone (required)"></span>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <span class="wpcf7-form-control-wrap email-160"><input type="email" name="email-160" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" id="email" aria-required="true" aria-invalid="false" placeholder="Your Email (required)"></span>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Your Message"></textarea></span>
</div>
<div class="col-md-4 col-sm-6 col-xs-12>
<span class=" wpcf7-form-control-wrap="" file-469"=""><input type="file" name="file-469" value="1" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false">
</div>
<div class="col-md-4 col-sm-6 col-xs-12>
<span class=" wpcf7-form-control-wrap="" acceptance-212"=""><input type="checkbox" name="acceptance-212" value="1" class="wpcf7-form-control wpcf7-acceptance" id="newsletter" checked="checked" aria-invalid="false"> Get Our Newsletter
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<input type="submit" value="Send message" class="wpcf7-form-control wpcf7-submit submitBnt"><img class="ajax-loader" src="http://x.x.x.x/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden;">
</div>
<p><br></p>
<div class="clearfix"></div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>

JS File

//  Contact form
    $('.wpcf7-form').submit(function(e){


      e.preventDefault();
      var email = $('#email').val();
      var name = $('#name').val();
      var url ='http://myaccount.createsend.com/t/t/s/dylulk/';
      if($("#newsletter").is(':checked')) {
      $.ajax({
        type : "POST",
        // dataType: "json",
        url: url,
        data:'cm-dylulk-dylulk='+email+'&cm-name='+name      
      });
    }
  });

When the Submit button is clicked, the form sends email without any problem, but the Post request fails for sending the email and name to campaign monitor list. What step am i missing?

have you tried to analyze the response of your request in the network monitor of your browser? any php errors? also tried to put on the php errors for debugging? — kair, Nov 04 '14 at 07:57
Yes, The post request gets cancelled, it doesn't send to server. There is no response. — Arun, Nov 04 '14 at 08:47
check your console for errors. If you are gettind undefined errors Wordpress uses safe mode jQuery which means use the word jQuery instead of $ (one method) — David, Nov 04 '14 at 10:43
There is no status and response http://screencast.com/t/HBHlvHaa, this is the scrennshot of error — Arun, Nov 04 '14 at 11:42
http://stackoverflow.com/a/16444964/1909698 I found this. does this help? maybe that's related to your problem. try to prevent default on the submit button as well — kair, Nov 04 '14 at 12:18
Also try to put your code inside $. ready(document). maybe your code does not get executed because the dom is not ready — kair, Nov 04 '14 at 12:25
I have already added that line e.preventDefault(), also the code is inside $(document).ready(). Still the prob exists — Arun, Nov 04 '14 at 13:00

How can i send post request to campaign monitor using jquery?

0 Answers0