Make a link use POST instead of GET

Question

I m not sure if this is even possible  But I was wondering if anyone knows how to make a hyperlink pass some variables and use POST  like a form  as opposed to GET

User · Answer

You don t need JavaScript for this  Just wanted to make that clear  since as of the time this answer was posted  all of the answers to this question involve the use of JavaScript in some way or another   You can do this rather easily with pure HTML and CSS by creating a form with hidden fields containing the data you want to submit  then styling the submit button of the form to look like a link   For example    x000D   x000D   inline   x000D    display  inline  x000D    x000D   x000D   link-button   x000D    background  none  x000D    border  none  x000D    color  blue  x000D    text-decoration  underline  x000D    cursor  pointer  x000D    font-size  1em  x000D    font-family  serif  x000D    x000D   link-button focus   x000D    outline  none  x000D    x000D   link-button active   x000D    color red  x000D    x000D   lt a href  some page  gt This is a regular link lt  a gt  x000D   x000D   lt form method  post  action  some page  class  inline  gt  x000D     lt input type  hidden  name  extra submit param  value  extra submit value  gt  x000D     lt button type  submit  name  submit param  value  submit value  class  link-button  gt  x000D      This is a link that sends a POST request x000D     lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    The exact CSS you use may vary depending on how regular links on your site are styled

User · Answer

This is an old question  but none of the answers satisfy the request in-full  So I m adding another answer   The requested code  as I understand  should make only one change to the way normal hyperlinks work  the POST method should be used instead of GET  The immediate implications would be    When the link is clicked we should reload the tab to the url of the href As the method is POST  we should have no query string in the URL of the target page we load That page should receive the data in parameters  names and value  by POST   I am using jquery here  but this could be done with native apis  harder and longer of course     lt html gt   lt head gt       lt script src  path to jquery min js  type  text javascript  gt  lt  script gt       lt script gt            document  ready function                     a post   click function e                    e stopPropagation                    e preventDefault                    var href   this href                  var parts   href split                       var url   parts 0                   var params   parts 1  split   amp                     var pp  inputs                       for var i   0  n   params length  i  lt  n  i                          pp   params i  split                           inputs      lt input type  hidden  name      pp 0       value      pp 1         gt                                         body   append   lt form action    url    method  post  id  poster  gt   inputs   lt  form gt                         poster   submit                                     lt  script gt   lt  head gt   lt body gt       lt a class  post  href  reflector php color blue amp weight 340 amp model x-12 amp price 14 800  gt Post it  lt  a gt  lt br  gt       lt a href  reflector php color blue amp weight 340 amp model x-12 amp price 14 800  gt Normal link lt  a gt   lt  body gt   lt  html gt    And to see the result  save the following as reflector php in the same directory you have the above saved    lt h2 gt Get lt  h2 gt   lt pre gt   lt  php print r   GET     gt   lt  pre gt    lt h2 gt Post lt  h2 gt   lt pre gt   lt  php print r   POST     gt   lt  pre gt

User · Answer

I suggest a more dynamic approach  without html coding into the page  keep it strictly JS      a AS-POST   on  click   e   gt      e preventDefault     let frm   document createElement  FORM     frm id  frm   Math random     frm method  POST    frm action e target href   document body appendChild frm    frm submit

User · Answer

You create a form with hidden inputs that hold the values to be posted  set the action of the form to the destination url  and the form method to post  Then  when your link is clicked  trigger a JS function that submits the form   See here  for an example  This example uses pure JavaScript  with no jQuery  mdash  you could choose this if you don t want to install anything more than you already have    lt form name  myform  action  handle-data php  method  post  gt     lt label for  query  gt Search  lt  label gt     lt input type  text  name  query  id  query   gt     lt button gt Search lt  button gt   lt  form gt    lt script gt  var button   document querySelector  form name  myform    gt  button    button addEventListener function       document querySelector  form name  myform     submit         lt  script gt

User · Answer

Another working example  using similar approach posted   create a html form  use javascript to simulate the post  This does 2 things   post data to a new page and open it in a new window tab   HTML   lt form name  myForm  target   blank  action  newpage html  method  post  gt   lt input type  hidden  name  thisIsTheParameterName  value  testDataToBePosted   gt   lt  form gt    JavaScript  document forms  myForm   submit

User · Answer

As mentioned in many posts  this is not directly possible  but an easy and successful way is as follows  First  we put a form in the body of our html page  which does not have any buttons for the submit  and also its inputs are hidden  Then we use a javascript function to get the data and  send the form  One of the advantages of this method is to redirect to other pages  which depends on the server-side code  The code is as follows  and now in anywhere you need an  to be in  POST  method    lt script type  text javascript  language  javascript  gt  function post link data            post form   find   form input   val data           post form   submit        lt  script gt       lt form id  post form  action  anywhere you want   method  POST  gt      csrf token         lt input id  form input  type  hidden  value    name  form input  gt   lt  form gt    lt a href  javascript     onclick  javascript post link  data     gt post link is ready lt  a gt

User · Answer

Instead using javascript  you could also use a label sending a hidden form  Very simple and small solution  The label can be anywhere in your html    x000D   x000D   lt form style  display  none  action  postUrl  method  post  gt  x000D     lt button type  submit  id  button to link  gt   lt  button gt  x000D   lt  form gt  x000D   lt label style  text-decoration  underline  for  button to link  gt   link that posts  lt  label gt  x000D   x000D   x000D

User · Answer

You can use javascript functions  JQuery has a nice post function built in if you decide to use it    JQuery Post   lt script language  javascript  gt       function DoPost            post  WhateverPage php     name   John   time   2pm          Your values here          lt  script gt       lt a href  javascript DoPost    gt Click Here lt  A gt

User · Answer

HTML   JQuery  A link that submits a hidden form with POST   Since I spent a lot of time to understand all these answers  and since all of them have some interesting details  here is the combined version that finally worked for me and which I prefer for its simplicity   My approach is again to create a hidden  form and to submit it by clicking a link somewhere else in the page  It doesn t matter where in the body of the page the form will be placed   The code for the form    lt form id  myHiddenFormId  action  myAction php  method  post  style  display  none  gt     lt input type  hidden  name  myParameterName  value  myParameterValue  gt   lt  form gt    Description   The display  none hides the form  You can alternatively put it in a div or another element and set the display  none on the element   The type  hidden  will create an fild that will not be shown but its data will be transmitted to the action eitherways  see W3C   I understand that this is the simplest input type   The code for the link    lt a href    onclick      myHiddenFormId   submit    return false   title  My link title  gt My link text lt  a gt    Description   The empty href just targets the same page  But it doesn t really matter in this case since the return false will stop the browser from following the link  You may want to change this behavior of course  In my specific case  the action contained a redirection at the end   The onclick was used to avoid using href  javascript      as noted by mplungjan  The     myHiddenFormId   submit    was used to submit the form  instead of defining a function  since the code is very small    This link will look exactly like any other  lt a gt  element  You can actually use any other element instead of the  lt a gt   for example a  lt span gt  or an image

User · Answer

You can use this jQuery function  function makePostRequest url  data        var jForm       lt form gt  lt  form gt         jForm attr  action   url       jForm attr  method    post        for  name in data            var jInput       lt input gt             jInput attr  name   name           jInput attr  value   data name            jForm append jInput             jForm submit        Here is an example in jsFiddle  http   jsfiddle net S7zUm

User · Answer

Check this it will help you       redirect  test php     a    value1    b    value2

[javascript] Make a link use POST instead of GET

Examples related to javascript

Examples related to html

Examples related to http