Can a HTML button perform a POST request?
JavascriptHtmlPostButtonSubmitJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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>
Solution 2 - Javascript
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>
Solution 3 - Javascript
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>
Solution 4 - Javascript
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.
Solution 5 - Javascript
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.