Using both form submission and redirection

I currently have a form that is submitting data to an affiliate using the GET method. The problem is, when a user fills out the form they are redirected to that same URL as the GET action goes to, it is an api page of random code.

I need the user that fills out the form to be redirected to a thank you page that i host while the information from the form is still sent to that affiliate api page.

I cannot manipulate the affiliate api page. How do i go about doing this? I've heard different answers including POST, Iframe, ajax, onsubmit.

Can someone confirm which method will work the best and why?

回答1:

Edit After discussing things in chat, we came to the conclusion that server-side posting was a better way to go. Here is an example of implementation:

HTML:

<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>

Javascript:

$('#my_form').on('submit', function (e){
    $.ajax({
      type: "POST",
      url: "localProxy.php",
      data: $('#my_form').serialize(),
      success: function (response) {
         // do something!
      },
      error: function () {
         // handle error
      }
    });
});

PHP (localProxy.php)

$ch = curl_init(); 
curl_setopt ($ch, CURLOPT_URL, 'http://thirdpartydomain.internet/login_url.php'); 
curl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6"); 
curl_setopt ($ch, CURLOPT_TIMEOUT, 60); 
curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, 0); 
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt ($ch, CURLOPT_POSTFIELDS, $_POST);
curl_setopt ($ch, CURLOPT_POST, 1);
$result = curl_exec ($ch);
curl_close($ch);

// do something with the data on your end (if anything), or render the "thank you" page
die('<h1>Thanks!</h1>');

Original answer

There are a couple of approaches.

The first way, you mention (through the tag) that you have jQuery -- in that case, you can use jquery's ajax method to both post the data to the API and to post it to your own server to get the thank-you message.

<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>

... in your "ready" function:

var API_URL = 'http://www.some-api-provider.com/api.php';
var MY_URL = 'http://www.my-website.net/post_handler.php';
$('#my_form').on('submit', function (e){
    e.preventDefault();
    var error = false;

    // validation here, if there is an error, set error = true;

    if (error == true) {
        alert('There was a problem!'); // do something better than this!
        return false;
    }

    $.ajax({
      type: 'GET',
      url: API_URL,
      data: $('my_form').serialize(),
      success: function () {
        $.ajax({
          type: 'POST',
          url: MY_URL,
          data: $('#my_form').serialize(),
          success: function (response) {
            $('status_message').html(response);
          },
          error: function () {
            alert('There was a problem!'); // do something better than this!
          }
        });
      },
      error: function () {
        alert('There was a problem!'); // do something better than this!
      }
    });
    return false;
});

What's happening there? We use the on event to bind an event listener to the 'submit' event of the form. When the user clicks the Submit button, that listener code will be invoked.

It, in its turn, will serialize your form's data, then send it the API via GET. As long as that works, it will call the success function, which in turn will send the data to your server via POST. The div status_message will be updated with the result return from your server.

The other approach is to post the data to your server normally, then use cURL or some other server-side HTTP connectivity to submit the data to the API. I might favor this method, as it is less dependent on javascript; if your user has scripts turned off, the javascript method will fail.

Without knowing what server-side technology you're using, I couldn't give any example, but if you go that route and run into trouble, you can always ask another question!

Documentation

jQuery.ajax() - http://api.jquery.com/jQuery.ajax/
jQuery.on() - http://api.jquery.com/on/
PHP curl - http://php.net/manual/en/book.curl.php
ASP.net WebRequest tutorial - http://msdn.microsoft.com/en-us/library/debx8sh9.aspx

回答2:

Use ajax and onSubmit event to send the data to your api, and redirect.

$('form').onSubmit(function(){
 $.ajax({
  ... //your informations to send to the api
  success:function(){
    ...//your redirection to the success page
  }
 });
});

More information about ajax in jquery

回答3:

Using jquery is a good way to go. Here's how I would do it

$("#formID").submit(function()
{
    $.get('getUrl', { param1Name: param1Data, param2Name: param2Data (etc...) }, function(data)
    {
        document.location = "redirectURL";
    });

    return false;
});

回答4:

Better to use Ajax and on success of the Ajax function use the redirection using

window.location.href = "thankyou.html";

回答5:

jquery ajax method are the best one for this purpose use them like this

$.ajax({   
    type: "POST",   
    url: method path here,   
    data: jsonText,   
    contentType: "application/json; charset=utf-8",   
    dataType: "json",   
    success: function (response) {   
    if (response.d != '') {   
    //redirect code           
     }   
     },   
     failure: function (response) {   
     alert(response.d);   
     }
     });