36

You can store a bookmark with a GET request like this:

http://url.com/service?variable=value

Can you store a POST request in some way in Chrome? Maybe with a plugin? Or maybe in Firefox?

The idea is that I store this in a bookmark and fire it quickly instead of having to fill up a form every time.

5

6 Answers 6

11

You can create a bookmarklet that uses JavaScript to send a POST request when clicked.

The following code sends a POST request with payload foo=bar to https://example.com by appending a form to the currently active page and then submitting it:

post('https://example.com', { foo: 'bar' })

function post (url, formData) {
  const h = (tag, props) => Object.assign(document.createElement(tag), props)
  const form = h('form', { action: url, method: 'post', hidden: true })
  for (const [name, value] of Object.entries(formData)) {
    form.appendChild(h('input', { name, value }))
  }
  document.body.appendChild(form)
  form.submit()
}

To use it as a bookmarklet, just set the following as the target of a bookmark (replacing the URL and form data appropriately):

javascript:post('https://example.com',{foo:'bar'});function post(a,b){const c=(e,f)=>Object.assign(document.createElement(e),f),d=c('form',{action:a,method:'post',hidden:true});for(const[e,f]of Object.entries(b))d.appendChild(c('input',{name:e,value:f}));document.body.appendChild(d),d.submit()}

which is simply javascript: followed by the code from above in minified form.

2
22

The idea is that I store this in a bookmark and fire it quickly instead of having to fill up a form every time.

For this purpose, the following HTML page will do. It should work in most browsers.

<html>
    <head>
        <title>getToPost</title>
        <script>
            function getToPost()
            {
                var form = document.getElementsByTagName('form')[0];
                form.style.visibility = 'hidden';
                form.action = document.location.hash.substr(1);
                var search = decodeURIComponent(document.location.search);
                search = search.substr(1).split('&');
                for(var i = 0, j = search.length, input; i < j; i++)
                {
                    input = document.createElement('input');
                    search[i] = search[i].split('=');
                    input.name = search[i][0];
                    input.value = search[i][1];
                    form.appendChild(input);
                }
                form.submit();
            }
        </script>
    </head>
    <body onload="getToPost()">
        <form method="POST"></form>
    </body>
</html>

Save it as C:\getToPost and you can bookmark the following URL:

file:///C:/getToPost?name1=value1&name2=value2#http://url.com/service

You'll be able to use most characters in names or values literally. Encode the following as usual:

#   ->   %23
%   ->   %25
&   ->   %26
=   ->   %3D
1
  • This has worked straightfwdly for one site, thx! However, for another site using AJAX (I think) it doesn't yet work (I might be doing sth wrong); is there sth which would change if the get/post-thing is handled by AJAX ? May 17, 2013 at 7:44
6

If looking for a cross browser solution that does not need to rely on add-ons or external files, Javascript can be placed in a bookmark directly to achieve this, using this syntax:

javascript:(function(){ <Your Javascript code goes here> })();

Borrowing some code from Denis' answer to illustrate:

javascript:(function()
{ 
var form = document.getElementsByTagName('form')[0];
form.style.visibility = 'hidden';
form.method = 'post';
form.action = 'https://your.urlgoes.here/build?delay=0sec';
var search = 'name=ENVIRONMENT&value=production&name=DEPLOYTYPE&value=Incremental&name=BRANCH&value=master&statusCode=303&redirectTo=.&json={"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}&Submit=Build';
search = search.substr(1).split('&');
for(var i = 0, j = search.length, input; i < j; i++)
{
input = document.createElement('input');
search[i] = search[i].split('=');
input.name = search[i][0];
input.value = search[i][1];
form.appendChild(input);
}
 form.submit();}
)();

The downside is all of this has to go on a single line, because a bookmark is single line, so it can get a bit mind bending to work with. This goes in the bookmark itself:

javascript:(function(){    var form = document.getElementsByTagName('form')[0];   form.style.visibility = 'hidden';   form.method = 'post';   form.action = 'https://your.urlgoes.here/build?delay=0sec';   var search = 'name=ENVIRONMENT&value=production&name=DEPLOYTYPE&value=Incremental&name=BRANCH&value=master&statusCode=303&redirectTo=.&json={"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}&Submit=Build';   search = search.substr(1).split('&');   for(var i = 0, j = search.length, input; i < j; i++)   {   input = document.createElement('input');   search[i] = search[i].split('=');   input.name = search[i][0];   input.value = search[i][1];   form.appendChild(input);   }    form.submit();   })();

A number of spaces can be used to easily convert to something more readable and back to the single line. In the example above " " can be replaced with \r\n in something like Notepad++ to convert it back to multi line. Then to convert it back to single line a find and replace for \r\n replacing with " " converts it back to single line. That makes it slightly less mind bending...

4

Building on the other answers!

The debug version of the code, plus cleanup AND jsbeautifier.org/.

(function() {
    var ThisAction = 'https://your.urlgoes.here/build?delay=0sec';
    /* A little JSON never hurt anyone */
    var ThisPost = {
        name: 'ENVIRONMENT',
        value: 'production',
        name: 'DEPLOYTYPE',
        value: 'Incremental',
        name: 'BRANCH',
        value: 'master',
        statusCode: '303',
        redirectTo: '.',
        json: '{"parameter": [{"name": "ENVIRONMENT", "value": "production"}, {"name": "DEPLOYTYPE", "value": "Incremental"}, {"name": "BRANCH", "value": "master"}], "statusCode": "303", "redirectTo": "."}',
        Submit: 'Build'
    };

    /* Help us locate this function */
    console.trace();
    /* See what we are looking at */
    console.log(document);
    var form = document.getElementsByTagName('form')[0];
    form.style.visibility = 'hidden';
    form.method = 'post';
    form.action = ThisAction;
    for (var key in ThisPost) {
        if (ThisPost.hasOwnProperty(key)) {
            input = document.createElement('input');
            input.name = key;
            input.value = ThisPost[key];
            form.appendChild(input);
        }
    }
    /* form.submit(); */
})();

Obviously without the corresponding html, element with tag name 'form' may well not exist... and things are worse if it does. The above demonstrates this well. Note that in chromium javascript: URIs/Bookmarks don't work in a new tab, you must navigate once first. This populates the document object, but even just an javascript:alert('t'); does nothing.

I suggest the following.

(function() {
    var ThisAction = 'https://your.urlgoes.here/build?optional=uri_get';
    /* A little JSON never hurt anyone */
    var ThisPost = {
        multiple: 'value',
        key: 'pairs',
        or: 'JSON like so...',
        note: 'the double quotes and last item with NO trailing comma.',
        json: '{parameter: [{name: "stuff"}]}'
    };

    var form = document.createElement('form');
    form.style.visibility = 'hidden';
    form.method = 'post';
    form.action = ThisAction;
    for (var key in ThisPost) {
        if (ThisPost.hasOwnProperty(key)) {
            var input = document.createElement('input');
            input.name = key;
            input.value = ThisPost[key];
            form.appendChild(input);
        }
    }
    document.body.appendChild(form);
    form.submit();
})();

Remove debug settings, clean up example input for better clarity of what is expected. Run through http://jscompress.com/ or whatever and get a single line.

!function(){var e="https://your.urlgoes.here/build?optional=uri_get",t={multiple:"value",key:"pairs",or:"JSON like so...",note:"the double quotes and last item with NO trailing comma.",json:'{parameter: [{name: "stuff"}]}'},i=document.createElement("form");i.style.visibility="hidden",i.method="post",i.action=e;for(var o in t)if(t.hasOwnProperty(o)){var a=document.createElement("input");a.name=o,a.value=t[o],i.appendChild(a)}document.body.appendChild(i),i.submit()}();

Edit: Provide a working example.

In Minneapolis, MN, USA use this to access the Free WiFi ESSID "USIW Free WiFi". After using https://login.usiwireless.com/mplsfree/logon.php?originalurl=www.google.com/ to register an account, they want a credit card for abuse reasons.

Use this to log into the network, with the obvious replacements.

javascript:!function(){var e="https://login.usiwireless.com/mplsfree/logon.pl",o={usernameLogin:"USER",passwordLogin:"PASSWORD",originalurl:"www.google.com/"},n=document.createElement("form");n.style.visibility="hidden",n.method="post",n.action=e;for(var i in o)if(o.hasOwnProperty(i)){var t=document.createElement("input");t.name=i,t.value=o[i],n.appendChild(t)}document.body.appendChild(n),n.submit()}();
3

I know this is an old question with an accepted answer. That answer is quite manual though, requiring javascript programming effort for the user. There are other browser addons/extensions/plugins listed but they don't work with the latest browser version or are still quite manual. I wrote a bookmarklet that generates a bookmarklet (which includes modified code from @raphinesse's answer). My bookmarklet is here: https://github.com/GlenCoakley/createFormSubmittingBookmarklets.

1
  • 1
    This is absolutely brilliant! Unfortunately, it doesn't always work, because sometimes the landing page is not the one that received the POST message. Second, please fix your code on GitHub: the full script has a few extra characters at the beginning. Also, the minified version is empty. Over all, I'm impressed though.
    – Kar.ma
    Dec 11, 2020 at 10:55
2

When I faced the same problem, I found this beautiful add-on for Firefox: Bookmark POST

With that bookmark its four easy steps to your bookmarked POST request (no javascript required):

  1. Open the page with the form you want to bookmark and fill in the form in a "typical" way. Do NOT submit yet.
  2. Open the Web-Developer Tools -> Network Analysis.
  3. Submit your form. The submit will show up in the network analyis. There you can select "Edit and send again" and copy the "Request-Body".
  4. Create a Bookmark to the form page and add the string POSTDATA={YOUR_REQUEST_BODY_HERE} as the bookmarks description.
1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .