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

au lieu d'un bouton Soumettre, j'ai un lien:

<form>

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

</form>

puis-je lui faire soumettre le formulaire quand il est cliqué?

106
demandé sur informatik01 2011-07-23 13:33:34

8 réponses

La meilleure façon

la meilleure façon est d'insérer une étiquette d'entrée appropriée:

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

Le meilleur JS façon

<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();
});

entoure ce dernier code JavaScript par un événement DOMContentLoaded (choisissez seulement 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!
});

facile, pas recommandable (l'ancien la réponse)

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

<form id="form-id">

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

</form>

Tous les moyens

quelle que soit la manière que vous choisissez, vous avez appelé formObject.submit() éventuellement (où formObject est L'objet DOM de la balise <form> ).

vous devez également lier un tel gestionnaire d'événements, qui appelle formObject.submit() , de sorte qu'il est appelé lorsque l'Utilisateur a cliqué sur un lien spécifique ou bouton. Il y a deux façons:

  • recommandé: lier 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 JavaScript en ligne. Il y a plusieurs raisons pourquoi cette technique n'est pas recommandable. Un argument majeur est que vous mélangez le markup (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 point où vous devez décider pour L'élément UI qui déclenche l'appel submit ().

  1. Un bouton

    <button>submit</button>
    
  2. Un lien

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

Appliquer les techniques susmentionnées afin d'ajouter un écouteur d'événement.

181
répondu ComFreek 2017-05-23 12:18:04

si vous utilisez jQuery et que vous avez besoin d'une solution en ligne, cela fonctionnerait 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 faites défiler vers le haut de votre page en cliquant sur le lien.

61
répondu Maurice 2012-08-23 12:02:52

vous pouvez donner le formulaire et le lien quelques ID et ensuite vous abonner pour l'événement onclick 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 Soumettre pour soumettre des formulaires car il respecte la sémantique de balisage et il fonctionnera même pour les utilisateurs avec Javascript désactivé.

20
répondu Darin Dimitrov 2011-07-23 09:36:45

HTML & 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;

}
3
répondu Darren Murphy 2017-10-02 16:31:12

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

1
répondu chris 2014-04-30 16:48:50
document.getElementById("theForm").submit();

ça marche parfaitement dans mon cas.

vous pouvez l'utiliser dans la fonction aussi comme,

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

définissez "le formulaire" comme votre ID de formulaire. C'est fait.

0
répondu ChintanThummar 2014-07-19 07:04:59

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

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

dans le fichier CSS, faites ceci:

button{
  display: none;
}

en JS pour ce faire:

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

voilà.

0
répondu iamwave007 2015-02-25 07:21:28
<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>
-1
répondu Shashank 2014-10-17 08:38:43