1

I would like to post the form fields to 1 url and redirect to a different url. The code i have posts to the url i want but how to i redirect to a different one? URL I want to post the submissions to: www.mywebsite.com/submissions URL I want to redirect the user to on submission: www.anotherwebsite.com/confirmation

Here's what i have so far: 

<form action="https://mywebsite.com/submissions" 
method="post">

    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">

</form>
Teddy
  • 3,534
  • 2
  • 29
  • 51
sn22
  • 75
  • 2
  • 7
  • Hello, can you provide the script in `https://mywebsite.com/submissions`? How do you handle the POST currently? – kkesley Nov 19 '18 at 23:00
  • You could use `window.location.href = 'http://redirecturl/';` if your post request succeded or even better `window.location.replace( 'http://redirecturl/')`. – ams Nov 19 '18 at 23:05
  • You need 1) Submit the form through ajax preventing the submit event to propagate 2) Wait for success callback 3) trigger the redirect manually on your ajax callback – Mark E Nov 19 '18 at 23:08
  • The post just records the entry in a database. so that happens in the backend but i wanted the user to get redirected to a more friendly confirmation screen. @kkesley – sn22 Nov 19 '18 at 23:12

2 Answers2

2

There are two ways to do this:

  1. Submit the form using Ajax, and after success, redirect from Javascript
  2. Submit the form normally, and send redirect response from server, with new url

(2) depends on your serverside language - be it PHP or Java.

Some kind of redirect feature will be available in your backend language or library. It will send a HTTP 301 response with an alternate URL. The browser will automatically load the new URL provided.

Edit:

For (1) you can handle button click, prevent default behavior, and post the form manually via Ajax. Once completed, you redirect the page.

// this is the id of the form
$("#FormID").submit(function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response 
               window.location.href = "www.anotherwebsite.com/confirmation";
           }
         }); 
    });

Adapted from this SO answer: https://stackoverflow.com/a/6960586/1364747

Teddy
  • 3,534
  • 2
  • 29
  • 51
  • the url i am posting to in my action="https://mywebsite.com/submissions" is a Zapier Webhook to use as a trigger so i am not sure what method is best. – sn22 Nov 19 '18 at 23:18
  • You may want to include Zapier and Webook tags to your Question. You may get more specific answers that way.. – Teddy Nov 19 '18 at 23:27
  • In case of Zapier, method 1 should work fine. Method 2 requires server redirection. – Teddy Nov 19 '18 at 23:28
0

Submitting the form will redirect you to the target url. If you want to redirect to another location you can post the form using an ajax request. This will not redirect you anywhere. Then when you receive the response from the ajax you can redirect to the url you want.

nikos fotiadis
  • 922
  • 2
  • 7
  • 15
  • the url i am posting to in my action="mywebsite.com/submissions" is a Zapier Webhook to use as a trigger so i am not sure what method is best. – sn22 Nov 19 '18 at 23:23