At times, integrating other technologies can be a very strenuous task. Yesterday I was trying to figure out a way to redirect to a page using POST variables and not GET variables. After scouring the web for a PHP solution, I decided to approach things differently and use JavaScript to get the job done. In turn, since I couldn’t think of a way to do it with jQuery, I wrote the following function which will take a URL with the GET variables encoded in it and go to the specified page, POSTing those variables:


/**
 * Takes a URL and goes to it using the POST method.
 * @param {string} url  The URL with the GET parameters to go to.
 * @param {boolean=} multipart  Indicates that the data will be sent using the
 *     multipart enctype.
 */
function postURL(url, multipart) {
  var form = document.createElement("FORM");
  form.method = "POST";
  if(multipart) {
    form.enctype = "multipart/form-data";
  }
  form.style.display = "none";
  document.body.appendChild(form);
  form.action = url.replace(/\?(.*)/, function(_, urlArgs) {
    urlArgs.replace(/\+/g, " ").replace(/([^&=]+)=([^&=]*)/g, function(input, key, value) {
      input = document.createElement("INPUT");
      input.type = "hidden";
      input.name = decodeURIComponent(key);
      input.value = decodeURIComponent(value);
      form.appendChild(input);
    });
    return "";
  });
  form.submit();
}

This function simply creates an HTML FORM element with the specified URL (save the GET variables) as the action, adds an INPUT element for each specified variable, and then submits the form. I haven’t tested this as thoroughly as I’d like so please let me know if you find any issues with it in certain browsers. Also, if you know of a MUCH simpler way to do this with jQuery, please let me know. On the other hand, this solution still remains valid even if it is doable with jQuery because it doesn’t require any external JavaScript libraries. Still I always invite the challenge. šŸ˜‰


7 Comments

ildar · November 21, 2012 at 3:33 PM

My rss-reader brought news again from your blog.

Talking about jQ. What do you think about this one? http://api.jquery.com/jQuery.post/. Seems it can solve your issue using by jQ, isn’t it? Or if you don’t want using of JQ or other libraries you can write simple cross-browser function to implement XmlHttpRequest object and handle it.

    Chris West · November 21, 2012 at 6:08 PM

    I was speaking with a colleague about this but we agreed that it seems that jQuery.post() is only for making POST calls via AJAX. I actually want to redirect the user to that page using JavaScript. If you have a solution which actually uses jQuery to redirect the user to the page with POST variables, please post the code! It would be much appreciated.

Brian · June 4, 2013 at 11:10 AM

Hi,

Useful piece of code, however the replace() regexp’s didn’t work for me?
I changed the line to:
form.action = url.replace(/?(.*)/, function(e1, urlArgs) {
urlArgs.replace(/([^&=]+)=([^&=]*)/g, function(e2, key, value) {
var input = document.createElement(“INPUT”);
input.type = “hidden”;
input.name = decodeURIComponent(key);
input.value = decodeURIComponent(value);
form.appendChild(input);
return “”;
});
return “”;
});

and it worked ok.
I also added:
form.enctype = “multipart/form-data”;
to force it to put the data in the body (as my problem was overly large data that I required to post back to the server).

thanks for the info anyway!

    Chris West · June 4, 2013 at 11:23 PM

    Thanks for catching that error. It turns out that when I migrated my forum, the backslashes didn’t get carried over for some reason. That issue should no longer exist. I also added in an optional parameter to add the multipart enctype as you specified in your example. Thanks again for the pointer!

Preg · July 7, 2015 at 11:17 AM

Hi Chris,
I am new to javascript coding and I am not understanding one thing in the PostUrl function you have mentioned.

form.action = url.replace(/\?(.*)/, function(_, urlArgs) {
urlArgs.replace(/\+/g, ” “).replace(/([^&=]+)=([^&=]*)/g, function(input, key, value) {

With these two lines, from where will “function(input, key, value)” will get the key and value parameters? and suppose we habe 3 different parameters to pass to , how does this function take it? From where I should provide the value foe key and value parameters?

Jason Wojcik · August 23, 2016 at 10:21 AM

I don’t care how old this post is. This is EXACTLY what I was looking for. Years later, there really isn’t a good way to do this. thanks for sharing the knowledge!

Ash · January 10, 2018 at 5:23 AM

This works perfectly thanks.

Preg, the function(input, key, value) is a callBack from the urlArgs.replace() method. So its kinda saying once its done replacing stuff in the url you pass it, the results become the input, key and value that it puts into the rest of the form. Something like that.

Leave a Reply to Brian Cancel reply

Your email address will not be published. Required fields are marked *