HTML form submit and redirect combined - javascript

I'm working on a website where the user fills out a form and submits it with a button that sends a POST. I would like the user to submit the POST and be redirected in the same action. Currently I have a javascript redirect (with window.location) implemented but I wish the page was condensed better. Is there an easy way for the same element to send a POST and subsequently send a GET to a different address? If it wasn't obvious I'm new to web development so apologies if my terminology is incorrect.

Just set the action attribute of the form to the URL you want to process the form.
You can't have a "submit to one URL and redirect to another" in one action.
Your options are:
Redirect to the second URL from the first one
Use AJAX to post the the first URL and in JavaScript redirect to the second

Related

Skip to a Page on Google Forms

I'm programatically creating a Google Form using Google App Scripts right now, and my script automatically generates a page for each of the respondants that the form will be emailed out to.
Currently, the form has a dropdown at the beginning that the person uses to select their page, and then it forwards them to it, however, I'd prefer it if the email already sent out a pre-responded form that already started them on their page.
The reason I'm throwing them all into a single form is because I'm using Triggers to detect the form's submission, and since I have more than 20 people that require a form, that would break the trigger limit.
EDIT:
Example code:
the Form.getPublishedUrl() function returns the URL to respond the form, starting on the first page, however, I would like a URL to respond to the form starting on the 3rd or 4th page.
While the FormResponse.toPrefilledUrl() will allow me to autofill the correct response on the first page, it will not allow me to start the responder on the page that he would be forwarded to based on his pre-filled response on the first page.
tldr; :
How do I get a link to a specific page on a Google Form using Google App Scripts?
This should be a comment but don't have 50 rep yet...
Why do you need various HTML pages?
I think you should refactor your code so every form is on the same HTML and everything shows and hides with Jquery or Javascript. You can send the same URL but with differente URL parameters.
If this isn't your case, you should post some code of yours and detail a little bit more your question. Also, wich limit does it triggers?

Redirect using post and get the succes of the redirect

Say, I have a simple form on my website having three fields : name, password and email.
I have to get these information from the users, and keep in my database.
Then redirect to another website and send all these information using post.
I also have to know whether the user was successfully redirected to that site(HTTP STATUS 200).
Here's how I'm doing it:
For Point 1, I'm simply submitting the form.
After the data has been successfully saved in my database, I'm rendering the following form with hidden fields. This gets submitted and user gets redirected to anotherwebsite.com
<form id="form_id" action="https://www.anotherwebsite.com/form" method="POST">
<input type ="hidden" name ="name" value ="$name">
<input type ="hidden" name ="password" value ="$password">
<input type ="hidden" name ="email" value ="$email">
</form>
<script> document.getElementById('form_id').submit(); </script>
Problems:
I don't think my strategy to achieve point 1 and 2 is correct. I need a better solution. Submitting the form, then rendering a page with hidden fields and submitting it again to redirect to another site just doesn't feel right.
I have no clue to achieve the 3rd point.
Based on your question you might try this approach:
create a form with name, password, email fields in a file ( HTML ).
Submit the form to server.
On the server side get the data (including the form attribute in a variable) and save it to database.
then redirect to the given website ( using the variable you've stored in step 3 ).
You can easily know the status ( 202 or any error) using any of server side scripting language.
If you are sending the user to another website, the only way to know that the user was successfully redirected is for that website to notify you in some manner. Once the user leaves your page (and that's what a redirect is - it tells the browser "leave this URI and go to this URI instead"), the scripts on that page stop running, so they can't collect any further information.
If you just need to know that the information was submitted successfully, your script could POST the data in the background, wait for a 200 response, then redirect after the information has been submitted. But that may not meet your requirements, since you still won't know if the redirect succeeded.
Another possibility which does allow you to know whether the page on the other site loaded correctly would be to open it in a new browser window/tab instead of redirecting. This is the only way to keep your page active (and, thus, your scripts able to run) while loading another page. However, it introduces other issues, like what to do with the original page. (Leave it open in the background (likely to confuse the user) or close itself after seeing that the new URI has loaded (could cause undesirable visual artifacts as one window/tab opens and then the original one closes; destroys browser history)?)
If at all possible, having the final destination site notify you when the transaction completes is almost certainly the best way to go.
To achieve point 3 you need to use cookies if you are actually trying to implement a login-cum-membersarea system. Othewise, you simple need a redirect inside a condition statement.
my $cgi = CGI->new;
if (condition) { print $cgi->redirect('https://www.examplesite.com/file.html') }
for a general way of doing point 1-2, you can look at the tutorial here:
http://practicalperl5.blogspot.com/

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.
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)
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
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).

Javascript : Posting a request and then redirecting the page to another page

I have a use case where i have to post the form data on a particular link and then forward/redirect the request to another link.
For e.g. In my page i have 3 textfields a,b,c and a submit button. On click of Submit i will post the request to say "http://www.abc.com/example" and then redirect the request to "http://www.def.com".
So for the end user after submitting the request he/she will see "http://www.def.com" and will not come to know that what happened in between.
We do not care what the response is from server where request is posted.
Any help/directions in implementing this use case will be highly appreciated.
Thanks.
Regards,
Mayank
Just specify the submit URL in form's action.
<form action="http://www.abc.com/example" method="post">
and let the code behind that URL redirect the request to the desired URL after postprocessing the request; the following example assumes that it's using the Servlet API:
response.sendRedirect("http://www.def.com");
No need for JavaScript here which would not work anyway on JS-disabled clients.
It would be preferable for performance to submit the form to your original server and then redirect to the other URL.
If you can't do this, then you could submit the request via AJAX request and on completion (success or error) change the window.location to the other URL.

Form resubmission issue-Django html

There is a form ,which is submitted and then the page is redirected to another page.But if the user hits the refresh button again on the new page .the following message is displayed
To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier.
And on press "OK"
A duplicate entry is created how do i prevent this or how do i handle this
I am using a django,application
Thanks..
I would double check your sequence of events because it seems like something is off.
It sounds like you're processing the post data, then returning an HTTP response rather than a redirect. When your user refreshes the page they resend the POST data.
I'm wondering where and when are you processing the POST data and if you're correctly redirecting.
The page that the form submits to should process the POST data and create an entry (sounds like that is working).
If you want to avoid having the double post issue on a successful submission it's best to redirect to another page AFTER you've processed the data and successfully saved.
This will not pass the POST data to the new view, and the user can refresh the page to their hearts content without having to worry about double submissions.

Categories