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?
-
3Can you put an example? I don't really understand the problem – Donovan Charpin Sep 28 '13 at 7:07
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' });
-
3This 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. – Deanie Sep 3 '17 at 17:44
-
2You might have to add
document.body.appendChild(form);
to this (for example just beforeform.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. – Pascal Sommer Dec 2 '17 at 20:18 -
1I would suggest also adding
document.body.removeChild(form);
after the submit. – ruben056 Jan 23 '18 at 9:15 -
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 noAccess-Control-Allow-Origin
, this is one way to solveCORS
issue using a form submit to redirect a post request. – Juniuz Mar 28 '19 at 21:40 -
@ruben056 We redirecting the currently displayed page away. Everything will be removed anyway. – Daniel Wu Aug 7 '20 at 3:03
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');
-
This won't work if the method is a different domain. However if you insert it into the document it will work. – scruffian Mar 13 '15 at 15:21
-
4Of course. Same as with any form submit. Just because of same-origin policy. – Eugene Naydenov Mar 13 '15 at 19:08
-
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.
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();
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
-
1Note that this doesn't require jQuery if you change
$('#myform').submit()
todocument.querySelector('#myform').submit()
. – Salis Dec 3 '16 at 22:17
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();
}
});
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;
});
-
The question is how to redirect to a new page. This will not redirect to a new page – Aurovrata Dec 9 '20 at 15:11
I think you should construct and fill out a hidden method=POST action="YOUR_URL" form and submit it,
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()
.
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.
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 !");
> }
-
1JQuery $.ajax does not actually redirect. It sends a XHR in the background. Answer posted by @Fernando works best according to what was asked. – Binaek Sarkar Oct 4 '15 at 8:31