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

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

<form>

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

</form>

Puis-je lui faire soumettre le formulaire quand on clique dessus?

Le meilleur moyen

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

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

La meilleure façon 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 uniquement loadpour la compatibilité descendante ) si vous ne l'avez pas déjà fait:

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

Le moyen facile et déconseillé (la première réponse)

Ajoutez un onclickattribut au lien et un idau formulaire:

<form id="form-id">

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

</form>

Tous les moyens

Quelle que soit la façon dont vous choisissez, vous avez formObject.submit()finalement appel (où formObjectest l'objet DOM de la <form>balise).

Vous devez également lier un tel gestionnaire d'événements, qui appelle formObject.submit(), donc il est appelé lorsque l'utilisateur clique sur un lien ou un bouton spécifique. Il y a deux manières:

• Recommandé: liez un écouteur d'événement à 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. Un argument majeur est que vous mélangez le balisage (HTML) avec des scripts (JS). Le code devient inorganisé et plutôt impossible à maintenir.

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

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

1. Un bouton

   <button>submit</button>

2. Un lien

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

Appliquez les techniques mentionnées ci-dessus pour ajouter un écouteur d'événement.

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

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

Vous voudrez peut-être également remplacer

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

avec

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

afin que l'utilisateur ne fasse pas défiler vers le haut de votre page en cliquant sur le lien.

Vous pouvez donner au formulaire et au lien des identifiants puis vous abonner à l' onclickévénement du lien et submitdu formulaire:

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

puis:

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 des formulaires car il respecte la sémantique du balisage et cela fonctionnera même pour les utilisateurs avec javascript désactivé.

HTML et CSS - Pas de solution Javascript

Faites apparaître votre bouton comme un lien Bootstrap

HTML:

<form>
    <button class="btn-link">Submit</button>
</form>

CSS:

.btn-link {

    background: none;
    border: none;
    padding: 0px;
    color: #3097D1;
    font: inherit;

}

.btn-link:hover {

    color: #216a94;
    text-decoration: underline;

}

cela fonctionne bien sans aucune fonction spéciale nécessaire. Beaucoup plus facile à écrire avec php également.<input onclick="this.form.submit()"/>

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

document.getElementById("theForm").submit();

Cela fonctionne parfaitement dans mon cas.

vous pouvez l'utiliser en fonction comme,

function submitForm()
{
     document.getElementById("theForm").submit();
} 

Définissez "theForm" comme ID de formulaire. C'est fait.

voici la meilleure solution à votre question: à l'intérieur du formulaire, vous avez ce code:

<li><a href="#">Singup</a></li>
<button type="submit" id="haha"></button>

dans le fichier CSS, procédez comme suit:

button{
  display: none;
}

dans JS, vous faites ceci:

$("a").click(function(){
   $("button").trigger("click");
})

Voilà.