Search code examples
htmlpostgetanchor

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


<a href="employee.action" id="employeeLink">Employee1</a>

when i click the Employee1 link, GET request goes to server. I want to make it POST instead of GET request. Is there a way i can change default GET behaviour of href?

Note:- I know it can be done where we can call javascript function on hyperlink click , then create form and submit it. But i am looking where we can mention some attribute in anchor tag to make POST request instead of GET request?


Solution

  • 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();
       });
     });