Make a link use POST instead of GET
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.
HTML can’t do that. JavaScript can catch the click event on the link and do what you want if you can’t change HTML and CSS can style button like links if it’s only a matter of appearance.
It’s true, HTML can’t do that. The answers all recommend using a with a submit button that’s styled to look like a link. Making an actual link use the http POST method, as the question asks, is not possible.
11 Answers 11
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.
.inline < display: inline; >.link-button < background: none; border: none; color: blue; text-decoration: underline; cursor: pointer; font-size: 1em; font-family: serif; >.link-button:focus < outline: none; >.link-button:active
This is a regular link The exact CSS you use may vary depending on how regular links on your site are styled.
agreed. I needed a way to do this in a email, so JS wasn’t much of an option for me. This should work perfectly
I’m only able to upvote this once. That is almost as sad as the fact that 99.728% of all HTML questions will end up being confused with Javascript or jQuery problems.
This is for sure a simple way to use a button that looks like a link, but it is actually hard-coding. You have to know exactly the conditions that this button is going to live into and set them explicitly for every case. I think that the answers that are based on JS/JQuery are more generic since they are using the link element itself (or whichever element).
But a button, even if it’s styled like a hyperlink, isn’t a hyperlink, right? How is the user able to open the post result in a new tab via the browser context menu?
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.
You can’t have an A sent POST without javascript. Only a form can do that (or AJAX or JS for the matter). So this is a workaround: create a hidden form, and have the A link submit it via JS.
@shacker Because neither answer is perfect. If you’re already using JS, which the OP may be, then it’s much better than trying to redecorate a button as a link using CSS and finding you’ve missed unsetting a button style when SuperBrowser V1.2 comes out.
You can use javascript functions. JQuery has a nice post function built in if you decide to use it:
This does make the POST request as asked, but I couldn’t use this because I still need to go to the location «Whatever.php».
@mplungjan href says where the link is referring to, while I agree that it’s wrong to confuse behavior and content, in this case javascript is the reference. In other words «when you click the link it will perform a postback using JavaScript». This has more meaning than binding a click event. Hard rules like «dont ever use javascript in href» are as bad as any other bad practice.
@mplungjan that recommendation like any other is introduced to avoid confusing content/behavior. When a recommendation is brought forward in cases outside it’s intended scope it starts to appear as a hard-rule. The example you gave appears to go an extra mile just to be on the safe side of the «rule» so noone can blame the programmer in the future but this safety is achieved at the cost of readability and meaning. It’s just how it appears to another pragmatic developer but I’m sure you didn’t mean that.
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).
Post it!
Normal link And to see the result, save the following as reflector.php in the same directory you have the above saved.
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.
document.forms["myForm"].submit(); 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.
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:
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:
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).
How can I submit a POST form using the tag?
All well and good, but you’ve still chosen to answer a different question than was asked. And given that erasable ink is, in fact, a viable product produced on an industrial scale.
FWIW, I sympathize with your answer and it’s what I personally would rather see in web apps I have to maintain. I’m just explaining the downvote — which I didn’t leave, by the way. 😉
You need to use javascript for this.
You have to use Javascript submit function on your form object. Take a look in other functions.
In case you use MVC to accomplish it — you will have to do something like this
I just went through some examples here and did not see the MVC one figured it won’t hurt to post it.
Then on your Action in the Controller I would just put On the top of it. I believe if you don’t have on the top of it it would still work but explicitly putting it there feels a bit safer.
Unfortunately, the obvious way of just styling the button in CSS as an anchor tag, is not cross-browser compatible, since different browsers treat
The above example will be showing ‘Two’ and transmit ‘parameter:One’ in FireFox, while it will show ‘One’ and transmit also ‘parameter:One’ in IE8.
The way around is to use hidden input field(s) for delivering data and the button just for submitting it.
Note, that this method has a side effect that besides ‘parameter:blaah’ it will also deliver ‘delete:Delete’ as surplus parameters in POST.
You want to keep for a button the value attribute and button label between tags both the same (‘Delete’ on this case), since (as stated above) some browsers will display one and some display another as a button label.
How to submit a Form by using a textlink POST method
I’m new to PHP but was wondering how this can be done. I want to have submit an HTML form to another PHP page, but i dont want to use the ugly button. I want to use a link. The thing is, i see many solutions out there that uses Java Script/Jquery etc to solve this, Does any one know how to do this with PHP code and HTML only?
PHP is server-side, so no matter how much you tried, it is impossible to do. HTML, however, could have done this, but it unfortunately does not, so you would have to stick with at least some minor JavaScript coding (see Sarfraz’ answer)
4 Answers 4
Either use a and style it like a link with css, or create a Link with onclick:
If you want to make sure it works when JS is disabled, add something like this:
This will show the button on computers where JS is disabled, the link above will still be shown. A workaround is to hide the link with CSS and then show it with JS..
The thing is, i wanted it to work without javascript. Notjavascript, and no button. Is there any possible way to do this using the link and PHP code?
@Relik Angus: no, PHP can’t since it’s server-side only, and HTML cannot because it hasn’t been implemented — that is why we use JavaScript to do this after all.
No. Except you are pleased with the results you get by styling the submit button with CSS, which has nothing to do with Javascript and should be supported / enabled on every browser. — Like I wrote: «use a and style it like a link with css», which is basically the same as gordon says.
Chose this response cuz its a combination of @Sarfraz’s and Gordon’s.. use Javascript and make the button look like a link.
That will submit the form to whatever url set in the action attribute of the form .
I dont know how much Buttons are capable of being styled in a uniform way across all browser, but here is a start/proof of concept you can fiddle with, read: test, adjust, put into external CSS, and so on
this is just crazy enough to work.. Style a button that looks like a link huh. Aright then ^^ thanks k. I’ll try this
I found an alternative way of using plain text as a submit button, by trial and (a lot of) error. Put label tags around the submit button and the text, then define the button CSS so it doesn’t display and the text CSS so it looks like a link.
Bear in mind that this is probably not good practise at all. 🙂
For example, this goes in the HTML form:
And so on for the label definition so it looks like a standard link. The button is invisible but the text is clickable as its label, so it acts like a button.
The one downside is that it made my label text drop a pixel. If there were other words around the pseudo-link, I had to define the surrounding text class with a «vertical-align: bottom;» to make sure it didn’t look weird.
Worked a charm, though. I successfully used it in a WordPress page to create fake links that kick off php scripts (by setting $_POST).