Submit form to two places

Question

I have an issue where I need a simple contact form to have an action to post to a data collection service, AND to a thank you page for conversion tracking.

The data collection service page does not allow for any sort of redirection unfortunately, so my best bet is to submit to BOTH a thank you page, and to the data collection service.

I just don't know how to to this though... can someone please steer me in the right direction? I've done a lot of searching, but can't really get anything to work with jquery or javascript.

Any advice / feedback / methods would be greatly appreciated.

Per the reply below, I'm trying to get the AJAX to redirect after it sends data to the collection service like this, but I can't get it to work:

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
  <script type="text/javascript">
  // Shorthand for $( document ).ready()
  $(function() { $("#ajaxform").submit(function(e)
 {
 var postData = $(this).serializeArray();
 var formURL = $(this).attr("action");
 $.ajax(
 {
    url : formURL,
    type: "POST",
    data : postData,
    success:function(data, textStatus, jqXHR) 
    {
        window.location.replace("http://example.com");
    },
    error: function(jqXHR, textStatus, errorThrown) 
    {
        //if fails      
    }
});
e.preventDefault(); //STOP default action
e.unbind(); //unbind. to stop multiple form submit.
}); });
</script>
<form name="ajaxform" id="ajaxform" action="https://secure.velocify.com/Import.aspx?Provider=IdealHomeLoansWebPOST&Client=IdealHomeLoansLLC&CampaignId=46"method="POST">

Answer 1

Using jQuery, you could send everything to your data collection service and wait for an answer. If it was successful, redirect to the thank you page.

Everything you need to know can be found in this article: http://hayageek.com/jquery-ajax-form-submit/

$(function() {
    $("#ajaxform").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus, jqXHR) 
            {
                //data: return data from server
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                //if fails      
            }
        });
        e.preventDefault(); //STOP default action
        e.unbind(); //unbind. to stop multiple form submit.
    });
});

This replaces the default form-submission with an AJAX-Request.

Then just use the following code to redirect to the thank you page:

window.location.replace("http://example.com");

Answer 2

Submit to the Thank You page and have the Thank You page do a CURL request to the data collection service.

Or, submit to an intermediate page that submits the CURL request and then redirects to the Thank You page.

Answer 3

The most straight forward way I can think of doing this would be to have a onClick handler for your submit button and then using JavaScript fire off some sort of XHR post request to your data collection service containing the form data. You would then return true and the browser would post to the Thank You page.

For example using JQuery (your code will need more check and complexity)

HTML:

<form id="form" action="somewhere.php" method="post">
  <!-- form stuff here -->
  <input type="submit">
</form>

JS:

$('#form').submit(function() {
  $.post('somewhereElse.php', {data: $('#form-element').val()});
  return true;
});

Answer 4

JQuery Ajax Post, might have to set it to async. On the success submit from the first one, you can submit to the second. Then on the success you can redirect to the the thankyou page.