How to post form submission to a URL and redirect on submission to a different URL

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>

edited Nov 19 '18 at 23:29

Teddy

2,38611838

asked Nov 19 '18 at 22:56

sn22

244

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

add a comment |

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>

edited Nov 19 '18 at 23:29

Teddy

2,38611838

asked Nov 19 '18 at 22:56

sn22

244

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

add a comment |

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>

edited Nov 19 '18 at 23:29

Teddy

2,38611838

asked Nov 19 '18 at 22:56

sn22

244

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>

javascript html html5 zapier

edited Nov 19 '18 at 23:29

Teddy

2,38611838

asked Nov 19 '18 at 22:56

sn22

244

edited Nov 19 '18 at 23:29

Teddy

2,38611838

asked Nov 19 '18 at 22:56

sn22

244

edited Nov 19 '18 at 23:29

Teddy

2,38611838

edited Nov 19 '18 at 23:29

Teddy

2,38611838

edited Nov 19 '18 at 23:29

Teddy

2,38611838

asked Nov 19 '18 at 22:56

sn22

244

asked Nov 19 '18 at 22:56

sn22

244

asked Nov 19 '18 at 22:56

sn22

244

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

add a comment |

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

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

add a comment |

2 Answers
2

active

oldest

votes

There are two ways to do this:

Submit the form using Ajax, and after success, redirect from Javascript

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

edited Nov 19 '18 at 23:35

answered Nov 19 '18 at 23:15

Teddy

2,38611838

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

add a comment |

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.

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

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

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383830%2fhow-to-post-form-submission-to-a-url-and-redirect-on-submission-to-a-different-u%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

There are two ways to do this:

Submit the form using Ajax, and after success, redirect from Javascript

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

edited Nov 19 '18 at 23:35

answered Nov 19 '18 at 23:15

Teddy

2,38611838

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

add a comment |

There are two ways to do this:

Submit the form using Ajax, and after success, redirect from Javascript

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

edited Nov 19 '18 at 23:35

answered Nov 19 '18 at 23:15

Teddy

2,38611838

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

add a comment |

There are two ways to do this:

Submit the form using Ajax, and after success, redirect from Javascript

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

edited Nov 19 '18 at 23:35

answered Nov 19 '18 at 23:15

Teddy

2,38611838

There are two ways to do this:

Submit the form using Ajax, and after success, redirect from Javascript

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

edited Nov 19 '18 at 23:35

answered Nov 19 '18 at 23:15

Teddy

2,38611838

edited Nov 19 '18 at 23:35

answered Nov 19 '18 at 23:15

Teddy

2,38611838

answered Nov 19 '18 at 23:15

Teddy

2,38611838

answered Nov 19 '18 at 23:15

Teddy

2,38611838

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

add a comment |

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

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

add a comment |

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

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

add a comment |

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

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

add a comment |

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

answered Nov 19 '18 at 23:08

nikos fotiadis

6171514

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

add a comment |

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

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

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky