AJAX Subscription Form

I'm encountering some issues with the AJAX Subscription Form.

My form has two fields, an email field and a device type field which has 2 radio buttons (iOS and Android). At the minute the form submits whenever the email is filled in even though the device type is empty.

Is there a way to ONLY submit the form when I have the both the fields filled in?

Here's the code I'm using. I've tried checking if all the input fields are empty but I don't think it's working.

$('input').each(function() {
    if ($(this).val() == '') {
      isFormValid = false;
    }
  });
    
  if (isFormValid) {
    $('#subForm').submit(function (e) {
           
      e.preventDefault();
      $.getJSON(
      this.action + "?callback=?",
      $(this).serialize(),
      function (data) {
        if (data.Status === 400) {
                    
          // alert("Error: " + data.Message);
        
        } else { // 200
                    
          // alert("Success: " + data.Message);
          
          $('.cards, #subForm').slideUp(400);
          $('.rare-card').slideDown(400);
          
        }
      });
            
    });
  }
roshodgekiss roshodgekiss, 4 years ago

Hey there kachunchau, the best way to go about this is to add your own client-side validation, so the form doesn't submit unless all fields are filled in. Here's a great example to help get you started.


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

Hey,

I can get the Validate Plugin to validate before submit but on completion it directs me to a separate page which I do not want.

Here's the code?

$('#subForm').validate({
  errorElement: "span",
  errorPlacement: function(error, element) {
    error.insertBefore(element.prev());
  },
  submitHandler: function(form) {
    $(this).ajaxSubmit({
      type:      'POST',
      url:       'http://acountname.createsend.com/t/r/s/ykdkzy/',
      data: dataString,
      dataType:  'jsonp',
      success: function(data) {
        if (data.Status === 400) {
        } else { // 200          
          $('.cards, #subForm').slideUp(400);
          $('.rare-card').slideDown(400);
        }
      }
      
    });
  }  
});

Any help would be great.

Thanks.

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