Can a HTML button perform a POST request?

Question

I want a submit type button to send a POST request.

I am thinking about something like this:

<form action = "" method = "post">
    <button>Upvote</button>
<form>

where the string "Upvote" will be send as a name in the POST request.

I know this is not working, and I know there are ways using AJAX(javascript) but I am fairly new to this area. I am just wondering if this is possible in general.

Update

Someone suggested using the <input> tag, and I tried it. The problem is it generates a GET rather than a POST.

It wont post the upvote string to the server I believe. I will try now — Bob Fang, Apr 16 '13 at 11:40
you need to make use of the submit button: `` the rest of your code looks good (except the spaces), the action field holds the url to the desired server resource, which takes the data for further processing. — Imperative, Apr 16 '13 at 11:41
You really need to take the time to familiarize yourself with [HTML Forms](http://www.w3.org/TR/html401/interact/forms.html). — Oded, Apr 16 '13 at 11:42
@Oded Anyone used to be a newbie before he becomes a pro, I am leraning it. — Bob Fang, Apr 16 '13 at 11:52
Of course. And I am pointing you to a great learning resource. — Oded, Apr 16 '13 at 11:58

score 81 · Answer 1 · edited Feb 18 '15 at 12:54

81

You need to give the button a name and a value.

No control can be submitted without a name, and the content of a button element is the label, not the value.

<form action="" method="post">
    <button name="foo" value="upvote">Upvote</button>
</form>

edited Feb 18 '15 at 12:54

Homulvas

495
5
16

answered Apr 16 '13 at 11:56

Quentin

857,932
118
1,152
1,264

2

Is it ok (cross-browsers safe) to use this button without `type="submit"`? – Mohammed Noureldin May 02 '18 at 23:37
7

@MohammedNoureldin — Yes, it is. `submit` is the default value for the `type` attribute on a ` – Quentin May 03 '18 at 07:37

Filip Minx · Accepted Answer · 2018-08-29T20:50:46.353

69

This can be done with an input element of a type "submit". This will appear as a button to the user and clicking the button will send the form.

<form action="" method="post">
    <input type="submit" name="upvote" value="Upvote" />
</form>

edited Aug 29 '18 at 20:50

answered Apr 16 '13 at 11:43

Filip Minx

2,340
1
16
31

Jasper Lichte · Answer 3 · 2019-02-14T14:47:50.500

19

You can do that with a little help of JS. In the example below, a POST request is being submitted on a button click using the fetch method:

const button = document.getElementById('post-btn');

button.addEventListener('click', async _ => {
  try {     
    const response = await fetch('yourUrl', {
      method: 'post',
      body: {
        // Your body
      }
    });
    console.log('Completed!', response);
  } catch(err) {
    console.error(`Error: ${err}`);
  }
});

<button id="post-btn">I'm a button</button>

edited Feb 14 '19 at 14:47

answered Jan 07 '19 at 12:16

Jasper Lichte

372
2
11

failed to fetch? – Someone Feb 10 '21 at 18:46
how can I include Headers in this? Just add a 'headers' section in the 'await' function? – SUMguy Dec 09 '21 at 17:47

score 4 · Answer 4 · answered Apr 16 '13 at 11:43

4

You can:

Either, use an <input type="submit" ..>, instead of that button.
or, Use a bit of javascript, to get a hold of form object (using name or id), and call submit(..) on it. Eg: form.submit(). Attach this code to the button click event. This will serialise the form parameters and execute a GET or POST request as specified in the form's method attribute.

answered Apr 16 '13 at 11:43

UltraInstinct

41,605
12
77
102

using ... will generate a GET request rather than POST... I've test it – Bob Fang Apr 16 '13 at 11:49
```

``` The code I have – Bob Fang Apr 16 '13 at 11:50
@dorafmon — Unless the form was rendered at the URL `http://127.0.0.1:8000/debate/00000001?upvote=Upvote` in the first place, you should not get that result. – Quentin Apr 16 '13 at 11:57
I started with ```debate/00000001``` first, then click the upvote button and then I get the result url... – Bob Fang Apr 16 '13 at 11:59
I really suspect some other part of your page is modifying the method attribute, then. – UltraInstinct Apr 16 '13 at 12:02

score 3 · Answer 5 · answered Aug 26 '21 at 09:58

3

Simply do:

<form action="" method="post" id="myForm">
    <button type="submit" class="btn btn-sm btn-info" name="something"><i class="fa fa-check"></i>Submit</button>
</form>

Or in the case that for aesthetic reasons you want the button outside the form, do:

<button type="submit" form="myForm" class="btn btn-sm btn-info" name="something"><i class="fa fa-check"></i>Submit</button>

I typically use this when my form is too long and I want a submit button at the beginning and also at the end of the page.

answered Aug 26 '21 at 09:58

Chrishow

333
1
4
12

This sends a POST variable `something` with an empty string (`""`) as its contents. You can use this without setting the value attribute, to get which button was clicked e.g. in PHP, you would test `if(isset($_POST["someting"]))`. – Fanky Dec 31 '21 at 16:09

Can a HTML button perform a POST request?

5 Answers5

Linked