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
