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.

Gorged

It wont post the upvote string to the server I believe. I will try now – Gorged

you need js support such as jquery $.post – Cioffi

you can use some js to call submit from the form. – Immaterial

you need to make use of the submit button: <button type="submit">Send it</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. – Wits

You really need to take the time to familiarize yourself with HTML Forms. – Torre

@Torre Anyone used to be a newbie before he becomes a pro, I am leraning it. – Gorged

Of course. And I am pointing you to a great learning resource. – Torre

Answer 1

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>

Unmannered

Answer 2

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>

Ibnsaud

Is it ok (cross-browsers safe) to use this button without type="submit"? – Nonrestrictive

@MohammedNoureldin — Yes, it is. submit is the default value for the type attribute on a <button> – Ibnsaud

Is it possible to capture the response to communicate to the user if the post request was successful or not? With just HTML? – Rubble

Answer 3

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>

Tacet

failed to fetch? – Faulkner

how can I include Headers in this? Just add a 'headers' section in the 'await' function? – Hauteur

Answer 4

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.

Paperboard

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"])). – Sayette

Answer 5

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.

Devin

using <input> ... will generate a GET request rather than POST... I've test it – Gorged

<form action = "" method "post"> <input type="Submit" name="upvote" value="Upvote"/> </form> The code I have – Gorged

@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. – Ibnsaud

I started with debate/00000001 first, then click the upvote button and then I get the result url... – Gorged

I really suspect some other part of your page is modifying the method attribute, then. – Devin