Using window. location. href it's not possible to send a POST request. What you have to do is to set up a form tag with data fields in it, set the action attribute of the form to the URL and the method attribute to POST, then call the submit method on the form tag.
The Location href property returns a string which contains the entire URL of the page, including the protocol.
window. location. href method returns/loads the current url. So we can use it to reload/refresh the page in javascript.
Using window.location.href
it's not possible to send a POST request.
What you have to do is to set up a form
tag with data fields in it, set the action
attribute of the form to the URL and the method
attribute to POST, then call the submit
method on the form
tag.
Add a form to your HTML, something like this:
<form style="display: none" action="/the/url" method="POST" id="form">
<input type="hidden" id="var1" name="var1" value=""/>
<input type="hidden" id="var2" name="var2" value=""/>
</form>
and use JQuery to fill these values (of course you can also use javascript to do something similar)
$("#var1").val(value1);
$("#var2").val(value2);
Then finally submit the form
$("#form").submit();
on the server side you should be able to get the data you sent by checking var1
and var2
, how to do this depends on what server-side language you are using.
As it was said in other answers there is no way to make a POST request using window.location.href, to do it you can create a form and submit it immediately.
You can use this function:
function postForm(path, params, method) {
method = method || 'post';
var form = document.createElement('form');
form.setAttribute('method', method);
form.setAttribute('action', path);
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement('input');
hiddenField.setAttribute('type', 'hidden');
hiddenField.setAttribute('name', key);
hiddenField.setAttribute('value', params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});
https://stackoverflow.com/a/133997/2965158
Use this file : "jquery.redirect.js"
$("#btn_id").click(function(){
$.redirect(http://localhost/test/test1.php,
{
user_name: "khan",
city : "Meerut",
country : "country"
});
});
});
see https://github.com/mgalante/jquery.redirect
Short answer: no. window.location.href
is not capable of passing POST data.
Somewhat more satisfying answer: You can use this function to clone all your form data and submit it.
var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
// so that you can differentiate between forms when
// processing the data server-side.
submitMe.importFields = function(form){
for(k in form.elements){
if(input = form.elements[k]){
if(input.type!="submit"&&
(input.nodeName=="INPUT"
||input.nodeName=="TEXTAREA"
||input.nodeName=="BUTTON"
||input.nodeName=="SELECT")
){
var output = input.cloneNode(true);
output.name = form.name + nameJoiner + input.name;
this.appendChild(output);
}
}
}
}
submitMe.importFields(form_element);
for each of the three forms you want to submit. <input name="email">
in <form name="login">
, the submitted name will be login_name
. nameJoiner
variable to something other than _
so it doesn't conflict with your input naming scheme.submitMe.submit();
Have you considered simply using Local/Session Storage? -or- Depending on the complexity of what you're building; you could even use indexDB.
note:
Local storage
and indexDB
are not secure - so you want to avoid storing any sensitive / personal data (i.e names, addresses, emails addresses, DOB etc) in either of these.
Session Storage
is a more secure option for anything sensitive, it's only accessible to the origin that set the items and also clears as soon as the browser / tab is closed.
IndexDB
is a little more [but not much more] complicated and is a 30MB noSQL database
built into every browser (but can be basically unlimited if the user opts in) -> next time you're using Google docs, open you DevTools -> application -> IndexDB and take a peak. [spoiler alert: it's encrypted].
Focusing on Local
and Session Storage
; these are both dead simple to use:
// To Set
sessionStorage.setItem( 'key' , 'value' );
// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ... } );
// Get The Data
const fromData = sessionStorage.getItem( 'key' );
// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );
// Remove
sessionStorage.removeItem( 'key' );
// Remove _all_ saved data sessionStorage
sessionStorage.clear( );
If simple is not your thing -or- maybe you want to go off road and try a different approach all together -> you can probably use a shared web worker
... y'know, just for kicks.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With