How to redirect through 'POST' method using Javascript?

Question

I've queried and doesn't work out what I've found. Is there any way to redirect to give url with POST method using Javascript or jquery?

Can you put an example? I don't really understand the problem — Donovan Charpin
– Donovan Charpin, Commented Sep 28, 2013 at 7:07

Ebrahim Byagowi · Accepted Answer · 2021-04-21 17:19:06Z

65

Based on Eugene Naydenov's answer, I ended up using this which is able to fill form data also, hope to be useful for others:

function redirectPost(url, data) {
    var form = document.createElement('form');
    document.body.appendChild(form);
    form.method = 'post';
    form.action = url;
    for (var name in data) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = data[name];
        form.appendChild(input);
    }
    form.submit();
}

// redirectPost('http://www.example.com', { text: 'text\n\ntext' });

Update (2021): Some years later turned out a version that opens a new tab/window also would be useful for me so hopefully this would be useful also, just that make sure this will happen in a click event as browsers should block that otherwise,

function openPostPage(url, data) {
    var form = document.createElement('form');
    document.body.appendChild(form);
    form.target = '_blank';
    form.method = 'post';
    form.action = url;
    for (var name in data) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = data[name];
        form.appendChild(input);
    }
    form.submit();
    document.body.removeChild(form);
}

edited Apr 21, 2021 at 17:19

answered Jul 18, 2016 at 20:30

Ebrahim Byagowi

11.4k6 gold badges76 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Deanie Over a year ago

This is the best answer as it accounts for sending data via the POST method, which is why you would want to use a POST method redirection, or else you'd use GET.

Pascal Sommer Over a year ago

You might have to add document.body.appendChild(form); to this (for example just before form.submit()), because the HTML spec doesn't allow forms that are not associated with the document to be submitted. See this answer for more information.

ruben056 Over a year ago

I would suggest also adding document.body.removeChild(form); after the submit.

Junius Over a year ago

I'm glad I found this SO post and answer. Using XMLHttpRequest to redirect a page from other domain wouldn't allow. Browser will detect it with no Access-Control-Allow-Origin, this is one way to solve CORS issue using a form submit to redirect a post request.

Daniel Wu Over a year ago

@ruben056 We redirecting the currently displayed page away. Everything will be removed anyway.

Eugene Naydenov · Accepted Answer · 2013-09-28 07:18:00Z

19

Create a form, fill method and action attributes, submit the form.

var redirect = function(url, method) {
    var form = document.createElement('form');
    form.method = method;
    form.action = url;
    form.submit();
};

redirect('http://www.example.com', 'post');

jQuery version (but I'd prefer pure JavaScript in this particular case):

var redirect = function(url, method) {
    $('<form>', {
        method: method,
        action: url
    }).submit();
};

redirect('http://www.example.com', 'post');

edited Sep 28, 2013 at 7:18

answered Sep 28, 2013 at 7:09

Eugene Naydenov

7,2953 gold badges28 silver badges44 bronze badges

3 Comments

scruffian Over a year ago

This won't work if the method is a different domain. However if you insert it into the document it will work.

Eugene Naydenov Over a year ago

Of course. Same as with any form submit. Just because of same-origin policy.

NiBE Over a year ago

I had to add this to let the submit works: $('body').append(form);

Fernando · Accepted Answer · 2015-01-04 15:21:56Z

Here the idea is to send data to server while you redirect user to another webpage without using the GET method and maintaining a cosmetic appearance to your URL. So we are going to use the same procedure of sending a Form with POST method.

HTML/Javascript code for creating the form and submitting it to server:

<html>
<body>
<script>
var form = document.createElement("form");
form.method = 'post';
form.action = 'receive.php';
var input = document.createElement('input');
input.type = "text";
input.name = "data";
input.value = "this is the data I'm sending to server through POST";
form.appendChild(input);
form.submit();
</script>
<body>
<html>

Receiving this data in PHP:

<pre>
<?php
var_dump($_POST);
?>
</pre>

In this way, users will be redirected to receive.php with some data being informed in a POST method.

Guru · Accepted Answer · 2013-09-28 07:12:00Z

2

Try this:

var url = 'http://example.com/vote/' + Username;
var form = $('<form action="' + url + '" method="post">' +
  '<input type="text" name="api_url" value="' + Return_URL + '" />' +
  '</form>');
$('body').append(form);
$(form).submit();

answered Sep 28, 2013 at 7:12

Guru

6191 gold badge4 silver badges12 bronze badges

Comments

Sergey Telshevsky · Accepted Answer · 2013-09-28 07:29:13Z

2

Actually there is a trick. You create a hidden form and trigger the submit button, with jQuery for example:

<form method="POST" action="newurl.html" id="myform">
</form>

and do a

$('#myform').submit();

I suggest you to use the no-jQuery version posted by Eugene Naydenov

edited Sep 28, 2013 at 7:29

answered Sep 28, 2013 at 7:10

Sergey Telshevsky

12.3k7 gold badges59 silver badges80 bronze badges

1 Comment

anyweez Over a year ago

Note that this doesn't require jQuery if you change $('#myform').submit() to document.querySelector('#myform').submit().

sohel shaikh · Accepted Answer · 2017-11-13 04:52:23Z

2

Redirect with POST vars (on jQuery)

var redirect = 'http://www.website.com/page?id=23231';
$.redirectPost(redirect, {x: 'example', y: 'abc'});

$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="'+location+'" method="POST">'+form+'</form>').submit();
    }
});

answered Nov 13, 2017 at 4:52

sohel shaikh

1022 silver badges13 bronze badges

Comments

user2610222 · Accepted Answer · 2013-09-28 07:37:07Z

-2

You can use serialize your form and all the data in post. Below is an example.

$("#submit_btn").click(function(){
        $('.error_status').html();
            if($("form#frm_message_board").valid())
            {
                $.ajax({
                      type: "POST",
                      url: "<?php echo site_url('message_board/add');?>",
                      data: $('#frm_message_board').serialize(),
                      success: function(msg) {
                          var msg = $.parseJSON(msg);
                          if(msg.success=='yes')
                          {
                                                                            return true;
                         }
                         else
                         {
                            alert('Server error');
                            return false;
                        }
                       }
                });
            }
            return false;
        });

answered Sep 28, 2013 at 7:37

user2610222

1 Comment

Aurovrata Over a year ago

The question is how to redirect to a new page. This will not redirect to a new page

Suresh Atta · Accepted Answer · 2013-09-28 07:07:43Z

-3

There is no way to do so.

Even a a element Sstrikes the GET.

What you can do is make a Ajax request to post and in on-success use window.open().

answered Sep 28, 2013 at 7:07

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

renacimiento · Accepted Answer · 2013-09-28 07:11:40Z

-3

I think you should construct and fill out a hidden method=POST action="YOUR_URL" form and submit it,

answered Sep 28, 2013 at 7:11

renacimiento

1671 silver badge10 bronze badges

Comments

arpan desai · Accepted Answer · 2015-07-30 12:46:42Z

-3

Using jQuery post the data and redirect to your desired location like so:

$.ajax({
  type: 'POST',
  url: 'receivedata.asp',
  data: 'formValue=someValue',
  success: function(data){
      window.location = data;
  }
});

You could remove the data: 'formValue=someValue', if there is no data to pass to the page you want to post to.

answered Jul 30, 2015 at 12:46

arpan desai

9093 gold badges13 silver badges25 bronze badges

Comments

3pic · Accepted Answer · 2015-07-30 12:54:56Z

-4

huh... use AJAX Jquery:

> $.ajax({
>                       type: "POST",
>                       url: "www.example.com/the_page_I_post_to.php",
>                       data: $('yourform').serialize(),//sent data
>                       success: function(msg) {
>                           alert("posted !");
>                        }

answered Jul 30, 2015 at 12:54

3pic

1,22910 silver badges26 bronze badges

1 Comment

Binaek Sarkar Over a year ago

JQuery $.ajax does not actually redirect. It sends a XHR in the background. Answer posted by @Fernando works best according to what was asked.

Collectives™ on Stack Overflow

How to redirect through 'POST' method using Javascript?

11 Answers 11

5 Comments

3 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

5 Comments

3 Comments

Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related