Reputation: 775
I have a form in my html which has an action url to different domain. After submit, it redirects the browser. I want it to be submitted but not redirected to another page. I know i can submit it with Ajax but since the domain is different it gives CORS error. I cannot mirror request in my own php file because form submission is made by virtual credit card payment system and it doesn't allow you to mirror it.
So, is there any way to submit form but prevent redirect without using ajax. As i know, it's impossible to make a request to different domain with ajax.
Upvotes: 2
Views: 1881
Reputation: 1318
If the main goal is to keep the visitor on your website and submit visitor input to a third party website, you could submit the form to a local php script that performs a cUrl to the third party website.
That way, the data is posted 'under water' without showing all post parameters to your visitors and you get to keep your visitor on your own website.
The only thing is that your payment provider will probably redirect you to different pages depending on the payment result (succes/failure/unreacheable).
Upvotes: 0
Reputation: 20757
I would imagine you can do something with an iFrame.
So the logic would be:
<div>
with display:none;
<form action='self.php'>
preventDefault()
newself.php?var1=something&var2=anotherthing
<iframe>
to the hidden <div>
with the URL+querystring
$('div').append('<iframe src="newself.php?var1=something&var2=anotherthing"><iframe>");
newself.php
some JS to automatically submit the form to the API URL upon document load<div>
of it's contents to await a new submissionI am leaving this here because someone upvoted while I edited lol
In order to submit to a different domain they would have to open up their server to accept cross-domain POSTs.
So here the logic that you should be looking into:
e.preventDefault()
Upvotes: 1
Reputation: 10695
Solution 1
AJAX is possible across domains. You need the destination domain to set the appropriate headers on the response.
Access-Control-Allow-Origin: yourdomain.com
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: [anything else you might send]
return false
from your ajax call or call preventDefault()
to prevent the browser from redirecting the page.
Solution 2
Submit to your own server side code and emulate the transaction. However, you mentioned that they don't allow you to mirror it and I don't have details to address this problem. You can submit to your own server either AJAX (without CORS issues and no headers necessary) or normal POST.
Solution 3 Submit it to their server but have their server redirect back to a page on your own site. Usually there is a way to set this up through whatever API control panel they give you. Once again, without specific details, I can't directly address the problem
Solution 4
Load up the data in an iframe and submit in the iframe. This may have issues depending on the value of X-Frame-Options
or if they have some sort of CSRF token but you should be able to POST a form in the iframe without redirecting the main page. The iframe can be hidden as well and submitted via JS (use submit()
method on form--ajax not required)
Upvotes: 1