Un bouton HTML peut-il effectuer une requête POST ?

Question

Je veux un bouton de type submit pour envoyer une requête POST.

Je pense à quelque chose comme ça :

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

où la chaîne "Upvote" sera envoyée comme nom dans la requête POST.

Je sais que cela ne fonctionne pas, et je sais qu'il existe des moyens d'utiliser AJAX (javascript), mais je suis assez novice dans ce domaine. Je me demande simplement si cela est possible en général.

Mise à jour

Quelqu'un a suggéré d'utiliser le <input> et je l'ai essayé. Le problème est qu'il génère un GET plutôt qu'un POST.

Answer 1

Vous devez donner un nom et une valeur au bouton.

Aucun contrôle ne peut être soumis sans nom, et le contenu d'un élément bouton est l'étiquette, pas la valeur.

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

Answer 2

Cela peut être fait avec un élément de saisie de type "submit". Cet élément apparaîtra comme un bouton à l'utilisateur et un clic sur le bouton enverra le formulaire.

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

Answer 3

Vous pouvez le faire avec un peu d'aide de JS. Dans l'exemple ci-dessous, une requête POST est soumise à un clic sur un bouton en utilisant la méthode fetch :

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>

Answer 4

Tu peux :

• Soit, utiliser un <input type="submit" ..> au lieu de ce bouton.
• ou, utiliser un peu de javascript, pour obtenir l'objet du formulaire (en utilisant le nom ou l'id), et appeler submit(..) sur elle. Par exemple : form.submit() . Attachez ce code à l'événement de clic du bouton. Il sérialise les paramètres du formulaire et exécute une requête GET ou POST, comme spécifié dans l'attribut method du formulaire.

Answer 5

Il suffit de le faire :

<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>

Ou dans le cas où, pour des raisons esthétiques, vous voulez que le bouton soit en dehors du formulaire, faites-le :

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

Je l'utilise généralement lorsque mon formulaire est trop long et que je veux un bouton d'envoi au début et à la fin de la page.