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

123

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?

sablonneux
la source
J'utilise ceci pour intégrer un formulaire complètement caché dans une page. Mais il y a des sauts de ligne avant et après le lien. Viennent-ils de l'élément de formulaire? Et je voudrais ouvrir le lien dans un nouvel onglet / page, target="_blank"ne semble pas fonctionner.
JPT
1
tl; dr <a role="button" aria-label="submit form" href="javascript:void(0)" onclick="document.querySelector('form').submit()">Submit</a>
Josh Habdas

Réponses:

210

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.

ComFreek
la source
Je voulais appliquer cela mais cela ne semble pas fonctionner de mon côté. Voici un violon, jsfiddle.net/rbhr9wt2
user1149244
@ user1149244 Dans le volet JavaScript de jsFiddle, cliquez sur "JavaScript" puis réglez "Type de chargement" sur "Pas de retour à la ligne dans <body>" (ou <head>). Par défaut, il est réglé sur "onLoad" après quoi DOMContentReady ne se déclenche plus.
ComFreek
3
Remarque: si votre formulaire comporte un bouton avec attr name="submit", la submit()méthode de votre formulaire ne sera pas accessible.
2540625
Pourquoi la méthode onclick n'est-elle pas recommandée?
nu everest
Un @nueverest <input type="submit">a une signification plus sémantique que, par exemple, <a href="#" onclick="...">. Ceci est particulièrement important en ce qui concerne les lecteurs d'écran. Si vous devez utiliser ce dernier, je vous suggère d'utiliser ARIA .
ComFreek
65

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.

Maurice
la source
1
Je pense qu'il serait préférable de le faire dans un <span> texte </span>. Ce n'est pas un lien, et href: javascript n'est pas bon. (bientôt devenir mauvais avec les prochaines raisons de sécurité ... le javascript intégré doit être interdit un jour.
Milche Patern
Je suis d'accord. A en juger par la nature de la question, j'ai opté pour la réponse simple. Ce que je fais personnellement, c'est utiliser href="#"puis sélectionner tous ces liens avec jquery et appeler e.preventDefault()le clickgestionnaire d'événements pour que le navigateur ne défile pas.
Maurice
3
Je préfère personnellement cette réponse. Simple et propre et facile à mettre en œuvre si votre page utilise JQuery. Très flexible aussi, car j'ai une page avec plusieurs formulaires dessus et cela fonctionne parfaitement.
John Contarino
On peut utiliser href = "#" si on ajoute à la fin de l'appel javascript onClick "return false"
Lumis
23

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

Darin Dimitrov
la source
4

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;

}
Darren Murphy
la source
Excellent, pourquoi le compliquer quand ça peut être simple. Cependant, je pense que cela semble encore mieux si vous ajoutez également "curseur: pointeur;" dans la classe hover, de sorte que le curseur se transforme en main.
Lumis
3

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

Chris
la source
OP déclaré en cliquant sur un lien non élément d'entrée.
Rahil Wazir
Est-ce que cela peut fonctionner en faisant quelque chose comme<input onclick="this.form.submit()"> Some Text</input>
CodyBugstein
2
<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>
Shashank
la source
3
Pouvez-vous expliquer comment votre réponse répond réellement à la question? Ajoutez plus de contexte s'il vous plaît.
1
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.

Chintan Thummar
la source
0

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

iamwave007
la source