CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Yusuf Can Gürkan
Yusuf Can Gürkan

Reputation: 775

Prevent form redirect after submit without ajax

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

Answers (3)

verhie
verhie

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

MonkeyZeus
MonkeyZeus

Reputation: 20757

New

I would imagine you can do something with an iFrame.

So the logic would be:

  • Have an empty <div> with display:none;
  • Have a <form action='self.php'>
  • Submit and preventDefault()
  • Build a URL with a querystring
    • Preferably a totally different page newself.php?var1=something&var2=anotherthing
  • Append an <iframe> to the hidden <div> with the URL+querystring
    • $('div').append('<iframe src="newself.php?var1=something&var2=anotherthing"><iframe>");
  • Get stuff from URL and build replica form
  • Give newself.php some JS to automatically submit the form to the API URL upon document load
  • Clear the hidden <div> of it's contents to await a new submission

Original

I 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:

  • AJAX submit to your PHP file and do e.preventDefault()
  • Use PHP to cURL the POST vars to the other domain. SO cURL Questions
  • Wait for response from other domain
  • Send a "yay" or "nay" back to your AJAX call

Upvotes: 1

arcyqwerty
arcyqwerty

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

Related Questions