Comment soumettre un formulaire avec JavaScript en cliquant sur un lien ?

Question

Au lieu d'un bouton d'envoi, j'ai un lien :

<form>

  <a href="#"> submit </a>

</form>

Puis-je faire en sorte qu'il soumette le formulaire lorsqu'il est cliqué ?

Answer 1

Le meilleur moyen

Le meilleur moyen est d'insérer une balise d'entrée appropriée :

<input type="submit" value="submit" />

La meilleure méthode JS

<form id="form-id">
  <button id="your-id">submit</button>
</form>

var form = document.getElementById("form-id");

document.getElementById("your-id").addEventListener("click", function () {
  form.submit();
});

Entourez ce dernier code JavaScript par un DOMContentLoaded événement (choisissez seulement load pour compatibilité avec le passé ) si vous ne l'avez pas encore fait :

window.addEventListener("DOMContentLoaded", function () {
  var form = document.... // copy the last code block!
});

La méthode facile, mais non recommandable (l'ancienne réponse)

Ajouter un onclick au lien et un attribut id au formulaire :

<form id="form-id">

  <a href="#" onclick="document.getElementById('form-id').submit();"> submit </a>

</form>

Tous les moyens

Quel que soit le moyen que vous choisissez, vous devez appeler formObject.submit() à terme (où formObject est l'objet DOM du <form> tag).

Vous devez également lier un tel gestionnaire d'événement, qui appelle formObject.submit() Il est donc appelé lorsque l'utilisateur clique sur un lien ou un bouton spécifique. Il y a deux façons de procéder :

• Recommandé : Lier un écouteur d'événements à l'objet DOM.

  // 1. Acquire a reference to our <form>.
  //    This can also be done by setting <form name="blub">:
  //       var form = document.forms.blub;
  
  var form = document.getElementById("form-id");
  
  // 2. Get a reference to our preferred element (link/button, see below) and
  //    add an event listener for the "click" event.
  document.getElementById("your-id").addEventListener("click", function () {
    form.submit();
  });

• Non recommandé : Insérez du JavaScript en ligne. Il y a plusieurs raisons pour lesquelles cette technique n'est pas recommandable. L'un des principaux arguments est que vous mélangez le balisage (HTML) avec les scripts (JS). Le code devient désorganisé et plutôt difficile à maintenir.

  <a href="#" onclick="document.getElementById('form-id').submit();">submit</a>
  
  <button onclick="document.getElementById('form-id').submit();">submit</button>

Maintenant, nous arrivons au moment où vous devez décider de l'élément de l'interface utilisateur qui déclenche l'appel submit().

1. Un bouton

   <button>submit</button>

2. Un lien

   <a href="#">submit</a>

Appliquez les techniques susmentionnées afin d'ajouter un écouteur d'événements.

Answer 2

Si vous utilisez jQuery et que vous avez besoin d'une solution en ligne, cela fonctionnera très bien ;

<a href="#" onclick="$(this).closest('form').submit();">submit form</a>

Aussi, vous pourriez vouloir remplacer

<a href="#">text</a>

avec

<a href="javascript:void(0);">text</a>

afin que l'utilisateur ne fasse pas défiler la page vers le haut lorsqu'il clique sur le lien.

Answer 3

Vous pourriez donner des identifiants au formulaire et au lien, puis vous abonner à la liste de diffusion. onclick événement du lien et submit le formulaire :

<form id="myform" action="" method="POST">
    <a href="#" id="mylink"> submit </a>
</form>

et ensuite :

window.onload = function() {
    document.getElementById('mylink').onclick = function() {
        document.getElementById('myform').submit();
        return false;
    };
};

Je vous recommande d'utiliser un bouton d'envoi pour soumettre les formulaires, car il respecte la sémantique du balisage et fonctionne même pour les utilisateurs dont le javascript est désactivé.

Answer 4

cela fonctionne bien sans qu'aucune fonction spéciale ne soit nécessaire. Il est également beaucoup plus facile d'écrire avec php. <input onclick="this.form.submit()"/>

Answer 5

<form id="mailajob" method="post" action="emailthijob.php">
    <input type="hidden" name="action" value="emailjob" />
    <input type="hidden" name="jid" value="<?php echo $jobid; ?>" />
</form>

<a class="emailjob" onclick="document.getElementById('mailajob').submit();">Email this job</a>