javascriptjqueryformsaweber

Submitting one form and Ajaxing too

I use below code to submit the form AND get registered in aweber email list (addlead.pl is just a registration script). Here is what i want to accomplish: User submits a form - it registers him in aweber email list (using two of many form fields) as it woud be signup form, then user gets redirected to normal form action url with posted information from the form (all fields)

$('#redeemform').submit(function() {
    var nameVal = $(this).find('input[name="custname"]').val();
    var emailVal = $(this).find('input[name="custemail"]').val();

    $.post('http://www.aweber.com/scripts/addlead.pl', {
        meta_web_form_id:   '1234',
        meta_split_id:      '',
        listname:           'listname',
        redirect:           '',
        meta_adtracking:    'newsletter',
        meta_message:       '1',
        meta_required:      'name,email',
        meta_tooltip:       '',
        email:              emailVal,
        name:               nameVal
    });



alert("thank you"); //<<magic line
 return true;

});

Code works but only with magic line - alert "thank you" - without this line it woud only submit to default form action not registering to aweber. I've figured out that if i try submitting form (return true) and in the same time send those POST requests like this - site will refresh too fast and ingnore one of the requests. Question is how do i do it without alert / some fixed delay in this line. Is there some kind of fancy command for it ?

Solution

    1. Absolutely BEST solution is to let your form request call weber using CURL or similar on the server

    2. since you cannot Ajax to another domain, you need to be more inventive if you are to run this on the client

    So in the submission event we

    1. Change the target to hiddenframe2
    2. submit the aweber form to hiddenframe1
    3. let the main form submit to hiddenframe2

    Now you need in the RESULT of your main form return something like

    <script>top.location.replace("thankyou.html");</script>

    assuming your form sends the request to the same server the html comes from

    and have

    $('#redeemform').on("submit",function() {
  $(this).prop("target","hiddenframe2");

  if (!$("#hiddenframe1")) {
     $("<iframe/>",{"id":"hiddenframe","name":"hiddenframe1"})
      .css("display","none")
      .appendTo("body");
  }
  if (!$("#hiddenframe2")) {
    $("<iframe/>",{"id":"hiddenframe","name":"hiddenframe2"})
     .css("display","none")
     .appendTo("body");
  }
  var nameVal = $(this).find('input[name="custname"]').val();
  var emailVal = $(this).find('input[name="custemail"]').val();

  $("<form>",{"action":"http://www.aweber.com/scripts/addlead.pl",
              "target":"hiddenFrame1"})
    .append("<input/>",{meta_web_form_id:   '1234'})
    .append("<input/>",{meta_split_id:      ''})
    .append("<input/>",{listname:           'listname'})
    .append("<input/>",{redirect:           ''})
    .append("<input/>",{meta_adtracking:    'newsletter'})
    .append("<input/>",{meta_message:       '1'})
    .append("<input/>",{meta_required:      'name,email'})
    .append("<input/>",{meta_tooltip:       ''})
    .append("<input/>",{email:              emailVal})
    .append("<input/>",{name:               nameVal})
    .submit();
  });

    Here is what COULD have done had you been able to Ajax to aweber, which you cannot because of cross domain scripting. If they support JSONP/CORS you may be able to do it anyway

    $('#redeemformButton').on("click",function() {
  var $form = $('#redeemform');
  var nameVal = $form.find('input[name="custname"]').val();
  var emailVal = $form.find('input[name="custemail"]').val();

  $.post('http://www.aweber.com/scripts/addlead.pl', {
    meta_web_form_id:   '1234',
    meta_split_id:      '',
    listname:           'listname',
    redirect:           '',
    meta_adtracking:    'newsletter',
    meta_message:       '1',
    meta_required:      'name,email',
    meta_tooltip:       '',
    email:              emailVal,
    name:               nameVal
  },function() {
     $form.submit();
  });
});

    and have a 

    <input type="button" id="redeemformButton" value="Sign up and submit" />