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">

Does the thank you page really need the data? Would a redirect suffice? — PeterKA, May 29 '14 at 18:19
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. — Ryan McCullagh, May 29 '14 at 18:22
The thank you page doesn't need the data, it's basically used for tracking that people submitted the form. The data collection service uses the data of the form, but they are proprietary and simply just collect the data that's submitted to them. — Mixmastermiike, May 29 '14 at 18:25

Felk · Answer 1 · 2014-05-29T21:46:59.827

3

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");

edited May 29 '14 at 21:46

answered May 29 '14 at 18:25

Felk

6,165
1
27
51

Hmm I'm sorry I don't follow this though.. Do you know where this needs to be placed in that code you mentioned above? window.location.replace("http://example.com"); – Mixmastermiike May 29 '14 at 18:38
Inside the anonymous success function, where the comment says "//data: return data from server". The variable "data" is, what your collection service returns. You can validate that too if you want to check for a negative response. – Felk May 29 '14 at 18:46
What is done is the following: 1. This code submits the form data using AJAX to your data collection page 2. If that is successful it redirects the user to your thank you page This is the best solution for you I think – secretformula May 29 '14 at 19:03
Cool, thanks, yeah I'm giving it a try... I'm no ace at AJAX so I might need some help, I'm having a hard time following the demos of that site and what I need to implement on mine. – Mixmastermiike May 29 '14 at 19:21
So, I'm having a hard time getting this set up... I've never worked in ajax before, when I paste that code into mine the form submits to the data collection service, but it doesn't redirect afterward... I've pasted the code I'm using into my original post if someone can please help me along? – Mixmastermiike May 29 '14 at 20:24
You need to wrap the code into a document.ready statement, because otherwise the forms would not exist at the time jQuery tries to add the submit listeners. jQuery offers `$()` there. Wrap it like `$(function() { ALL_THE_CODE });` – Felk May 29 '14 at 20:28
gotcha, thanks, I have updated that code again, and reflected it in my original post, but it still doesn't redirect... can you please take a look at my code? I'm kinda guessing window.location.replace("http://example.com"); needs to be it's own javascript function? – Mixmastermiike May 29 '14 at 20:37
Does your form have the ID `ajaxform`? Because otherwise you have to replace `$("#ajaxform")` with something that matches your form – Felk May 29 '14 at 20:41
Ah, no I didn't add the id. I've added it now, but when I do that - the form doesn't submit now... I click submit and nothing happens when the form id is "ajaxform." When I remove the jquery code the form submits when have the id as "ajaxform" - so I'm guessing it's a matter of jquery not loading?? Feel like I'm getting so close. Can you check my updated code again please? PS thanks for your help on this today! – Mixmastermiike May 29 '14 at 20:50
This is a whole new problem. You usually can't just send POST requests cross-server. This is the new problem: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain BUT: Your service does not return proper JSONP, so the submission won't be successfull either. You might want to open another question for this, because I can't really help you any further – Felk May 29 '14 at 21:15
Dang! Well, I do know that the results send correctly... so I'll just have to find another way. Thanks so much for your help though – Mixmastermiike May 29 '14 at 21:44

score 2 · Answer 2 · answered May 29 '14 at 18:14

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.

answered May 29 '14 at 18:14

TecBrat

3,265
2
24
39

secretformula · Answer 3 · 2014-05-29T18:34:20.103

2

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;
});

edited May 29 '14 at 18:34

answered May 29 '14 at 18:16

secretformula

6,256
2
30
53

You should add a listener to the submit event of the form. – Ryan McCullagh May 29 '14 at 18:22
I'm going to give this method a try... thanks. Will post here on if it works. – Mixmastermiike May 29 '14 at 18:25
hmm, so that code didn't seem to do anything when I tried it, but I think I understand your logic. The "thank you" page doesn't need to have the form's data submit to it, it just needs users to visit the page so that they can get the tracking of people who've visted the page. When I tried the code, it submits to the data collection service just fine, but doesn't open the thank you page. hmm. – Mixmastermiike May 29 '14 at 18:36
Honestly for what you are trying to do @Felk has the best answer I think – secretformula May 29 '14 at 19:02

score 0 · Answer 4 · answered May 29 '14 at 18:18

0

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.

answered May 29 '14 at 18:18

Yogurt The Wise

3,969
4
32
41

Submit form to two places

4 Answers4