Making Href (Anchor Tag) Request Post Instead of Get

Making href (anchor tag) request POST instead of GET?

Using jQuery it is very simple, assuming the URL you wish to post to is on the same server or has implemented CORS

$(function() {
  $("#employeeLink").on("click",function(e) {
    e.preventDefault(); // cancel the link itself
    $.post(this.href,function(data) {
      $("#someContainer").html(data);
    });
  });
});

If you insist on using frames which I strongly discourage, have a form and submit it with the link

<form action="employee.action" method="post" target="myFrame" id="myForm"></form>

and use (in plain JS)

 window.addEventListener("load",function() {
   document.getElementById("employeeLink").addEventListener("click",function(e) {
     e.preventDefault(); // cancel the link
     document.getElementById("myForm").submit(); // but make sure nothing has name or ID="submit"
   });
 });

Without a form we need to make one

 window.addEventListener("load",function() {
   document.getElementById("employeeLink").addEventListener("click",function(e) {
     e.preventDefault(); // cancel the actual link
     var myForm = document.createElement("form");
     myForm.action=this.href;// the href of the link
     myForm.target="myFrame";
     myForm.method="POST";
     myForm.submit();
   });
 });

Make a link use POST instead of GET

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 — you could choose this if you don't want to install anything more than you already have.

<form name="myform" action="handle-data.php" method="post">
  <label for="query">Search:</label>
  <input type="text" name="query" id="query"/>
  <button>Search</button>
</form>

<script>
var button = document.querySelector('form[name="myform"] > button');
button.addEventListener(function() {
  document.querySelector("form[name="myform"]").submit();
});
</script>

hyperlink <a href> using POST Method instead of GET method

The post method can only be used by form data if called by html.

So the only solution would be to make a form and hide the inputs which you want to post, and submit the post to the url you want to.

how to use post method instead get for anchor tag

your best option is to use a form with a submit button that looks like a link.

It's impossible to use an anchor tag to send a post request. If using an anchor is a requirement then you need some javascript code.

POST from an <A> tag

There is no way to POST an a element using only HTML.

As can be seen from this DTD fragment (HTML 4.01 spec):

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->
<!ATTLIST A
  %attrs;                              -- %coreattrs, %i18n, %events --
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #IMPLIED  -- advisory content type --
  name        CDATA          #IMPLIED  -- named link end --
  href        %URI;          #IMPLIED  -- URI for linked resource --
  hreflang    %LanguageCode; #IMPLIED  -- language code --
  rel         %LinkTypes;    #IMPLIED  -- forward link types --
  rev         %LinkTypes;    #IMPLIED  -- reverse link types --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  shape       %Shape;        rect      -- for use with client-side image maps --
  coords      %Coords;       #IMPLIED  -- for use with client-side image maps --
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  >

There is no attribute that controls whether to use POST or GET with an a element.

You have to script it, if you want to abuse the semantics.

send $_POST data via anchor tag

You can achieve this using jQuery and a HTML form

HTML:

<form method="post" name="redirect" class="redirect">
<input type="hidden" class="post" name="post" value="">
<input type="submit" style="display: none;">
</form>

Button: (html)

<a href='javascript:void(0)' class='button' var='DATAHERE'>sometexthere</a>

Javascript, or rather said jQuery:

$(".button").click(function() {
    var link = $(this).attr('var');
    $('.post').attr("value",link);
    $('.redirect').submit();
});

this jQuery code listen's to any clicks on the items with the class button attached to them,
and reads out their "var" value, basicly you could use any kind of HTML element using this method as long as they have the button class attached to it.

POST request with href

With plain HTML, you cannot send a href request as POST, they are GET requests by definition.

But, you could use JavaScript to intercept the call and submit a hidden form. Here's an example. I'll use jQuery, but of course this can also be done with plain JS.

<a href='somepage.php' id='mylink'>link text</a>

In the JS, we catch the click event and insert a form on the fly which we will send via POST afterwards. Of course, you don't need to generate the form with JS, you can as well insert the form as plain HTML directly into the page.

$("#mylink").click(function(event){
  event.preventDefault(); // don't "execute" the link

  var $form = $("<form action='somepage.php' method='post' style='display: none' target='_blank'>" +
    "<input type='hidden' name='foo' value='bar' />" +
    "<input type='submit' />" + 
    "</form>").appendTo($('body'));

  $form.submit();
});

As you're composing the template in PHP anyway, you can insert the correct input elements and the action attribute of the form on the server side.

The sophisticated way, however, would be to parse the URL in the href attribute of the link. But that's a whole different topic, so I'll omit that for the sake of brevity.

Security warning: It is of course a good idea not to send passwords via GET requests. However, this solution expects that JS is enabled on the user's browser. If it isn't, or the code doesn't work, the request will be sent via GET anyway.

The proper way would be to use a real <form> element or AJAX to send post requests.

---

Related Topics