CODEWITHSUNDEEP
javascripthtmlpostbuttonsubmit
Bob Fang
Bob Fang

Reputation: 7411

Can a HTML button perform a POST request?

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.

Upvotes: 132

Views: 426608

Answers (5)

Chrishow
Chrishow

Reputation: 373

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.

Upvotes: 6

Jasper Lichte
Jasper Lichte

Reputation: 540

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>

Upvotes: 28

Filip Minx
Filip Minx

Reputation: 2488

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>

Upvotes: 82

Quentin
Quentin

Reputation: 944159

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>

Upvotes: 101

UltraInstinct
UltraInstinct

Reputation: 44454

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.

Upvotes: 4

Related Questions