web-dev-qa-db-fra.com

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 le faire soumettre le formulaire quand il est cliqué?

javascripthtmlformshyperlink
113
sandy

La meilleure voie

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

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

La meilleure façon de 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();
});

Placez ce dernier code JavaScript par un événement DOMContentLoaded (choisissez uniquement load pour compatibilité ascendante ) 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 non recommandable (l'ancienne réponse)

Ajoutez un attribut onclick au lien et un id à la fiche:

<form id="form-id">

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

</form>

Tous les moyens

Quelle que soit la méthode choisie, vous devez éventuellement appeler formObject.submit() (où formObject est l'objet DOM de la balise <form>).

Vous devez également lier un tel gestionnaire d'événements, qui appelle formObject.submit(), afin qu'il soit 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érer du code JavaScript intégré. Il y a plusieurs raisons pour lesquelles cette technique n'est pas recommandée. Un argument majeur est que vous mélangez le balisage (HTML) avec des scripts (JS). Le code devient inorganisé et plutôt incontrôlable.

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

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

Nous arrivons maintenant 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 susmentionnées afin d’ajouter un écouteur d’événement.

194
ComFreek

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>

En outre, vous voudrez peut-être remplacer

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

avec

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

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

64
Maurice

Vous pouvez donner des identifiants au formulaire et au lien, puis vous abonner à l'événement onclick du lien et à submit le 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 recommanderais d'utiliser un bouton d'envoi pour soumettre des formulaires, car il respecte la sémantique du balisage et fonctionnera même pour les utilisateurs dont le javascript est désactivé.

21
Darin Dimitrov

HTML & CSS - Pas de solution Javascript

Faites en sorte que votre bouton apparaisse 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;

}
3
Darren Murphy
document.getElementById("theForm").submit();

Cela fonctionne parfaitement dans mon cas.

vous pouvez l'utiliser aussi,

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

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

1
ChintanThummar

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

1
chris

voici la meilleure solution à votre question: dans le formulaire, vous avez le code suivant:

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

dans le fichier CSS, faites ceci:

button{
  display: none;
}

dans JS vous faites ceci:

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

Voilà.

0
iamwave007