web-dev-qa-db-fra.com

Comment créer un lien pour soumettre un formulaire

Quelle est la meilleure façon d'obtenir une ancre régulière (<a href="...">) Pour soumettre le formulaire dans lequel elle est intégrée lorsque vous cliquez dessus?

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="?">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>

Je sais que la façon la plus simple d'utiliser jQuery serait

$('#myLink').click(function() {
    $(this).parents('form:first').submit();
});

... mais j'essaie de trouver un moyen de le faire sans utiliser de bibliothèque.

Edit: J'essaie vraiment de trouver une méthode qui ne nécessite pas la connaissance du formulaire (par exemple: son nom, son id, etc.). Ce serait similaire à la façon dont vous pourriez mettre cela sur un élément d'entrée: <input onclick="this.form.submit()" />

javascripthtmlforms
36
nickf

bouclez à travers les nœuds parents jusqu'à ce que vous trouviez un élément avec un tagname qui indique qu'il s'agit d'un formulaire!

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="get_form(this).submit(); return false">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>



<script type="text/javascript">
    //<![CDATA[
    function get_form( element )
    {
        while( element )
        {
            element = element.parentNode
            if( element.tagName.toLowerCase() == "form" )
            {
                //alert( element ) //debug/test
                return element
            }
        }
        return 0; //error: no form found in ancestors
    }
    //]]>
</script>
10
hasen

Pourquoi n'utilisez-vous pas un <input> ou <button> élément et juste Tweak avec CSS? Ensuite, cela fonctionne sans Javascript et est donc plus fiable.

29
ypnos

La façon la plus simple de le faire serait d'utiliser quelque chose comme ceci:


<a href="#" onclick="document.formName.submit();">
20
Vinny Carpenter

J'utilise cela maintenant à chaque fois. Parce que le bouton soumettre dans mon projet est généralement un lien (en enveloppant une image ou CSS), j'utilise donc ceci:

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

N'oubliez pas qu'il utilise également jQuery.

Vous pouvez envelopper votre propre fonction. Il soumet donc toujours l'élément parent (formulaire) sur ce lien.

13
Jef

Tant que le lien est un enfant direct du formulaire, vous pouvez l'utiliser. Vous n'avez pas besoin de connaître le nom du formulaire. Fonctionne au moins dans Firefox et Chrome.

<form action="">
    <a href="" onclick="parentNode.submit();return false;">Submit</a>
</form>

quirksmode.org me dit que x.parentNode fonctionne dans tous les navigateurs, donc cela devrait fonctionner partout.

12
Graham King

Transformez un bouton d'envoi en lien en utilisant un balisage comme celui-ci:

<input id="submitlink" type="submit" value="Text" />

Et CSS comme ça:

input#submitlink {
    background: transparent;
    border: 0;
    cursor:pointer;
    margin: 0;
    padding: 0;
    color: #034af3;
    text-decoration: underline;
}

input#submitlink:visited {
    color: #505abc;
}

input#submitlink:hover {
    color: #1d60ff;
    text-decoration: none;
}

input#submitlink:active {
    color: #12eb87;
}
6
Mario

le meilleur moyen est

<a href="#" onclick="document.forms[0].submit();return false;">Submit Form</a>

mais vous ne voulez probablement PAS le faire car cela rendra la soumission impossible pour les utilisateurs avec JS désactivé

3
Andrew G. Johnson

Personnellement, je préfère utiliser le javascript: protocole dans le href au lieu d'utiliser l'événement onclick ... En cas de problème, je serais heureux d'être corrigé.

Si vous n'avez qu'un seul formulaire dans la page, un cas assez courant, vous pouvez faire simplement:

<li><p><a href="javascript:document.forms[0].submit();">Click here to submit</a></p></li>

Sinon, bouillonner les éléments comme ci-dessus est une solution.

[EDIT] Je garde la réponse, même si elle est downvotée, comme référence (les informations données dans les commentaires sont intéressantes).
Un autre inconvénient de la technique du protocole: il ne génère pas d'objet événement. Pas un problème dans l'extrait que j'ai donné, mais ennuyeux lors de l'appel d'un gestionnaire.

1
PhiLho

Pour faire suite à la réponse ci-dessus Comment faire un lien pour soumettre un formulaire , la façon dont je l'ai fait récemment est

<button class="submit" type="submit"><a href="#" onclick="return false;">Link Text</a></button>

et CSS

.submit {
    background: transparent;
    border:0;
    display: inline;
    margin: 0;
    padding: 0;
    cursor:pointer;
}
.submit a 
{
    color: #CEA249;
}
.submit:hover a
{
    color: white;
}

Je l'ai posté car je n'ai pas pu trouver d'exemple de html/css fait. Si quelqu'un a des améliorations, il sera mis à jour.

1
Tom

Vous devez utiliser un bouton (et une entrée ou un bouton de type soumettre) pour soumettre un formulaire.

Si vous avez besoin de fonctionnalités supplémentaires qu'un lien possède mais que les éléments d'entrée n'ont pas (comme le survol), il est plus facile de les implémenter avec javascript que de soumettre le formulaire. Il se dégradera également plus gracieusement pour les personnes sans javascript.

Vous pouvez même résoudre ce problème avec du code spécifique MSIE (et utiliser: survoler pour d'autres navigateurs):

<input type="submit" value="send" class="linkstyles"
       onmouseenter="this.className+=' hovered';"
       onmouseleave="this.className=this.className.replace(/(^|\s)hovered(\s|$)/g, '');" />

Si vous voulez toujours vraiment le faire à l'envers, voici comment je ne le ferais pas:

function submitByLink ( Elm ) {
  // Move up domtree until we hit no parentNode or find a form
  while (Elm) {
    Elm = Elm.parentNode;
    if (Elm && Elm.tagName == 'FORM') {
      // First chance we get, we submit the form and exit.
      // The return on the node it kills the event bubble by forwarding false to browser
      Elm.submit(); 
      return false;
    }
  }
  // If we got here then there is no form parent and user will be sent to link href
}

Et le HTML ressemblerait à ceci:

<a href="aPageExplainingWhyYouNeedJavascript.html" onclick="return submitByLink(this);">Send</a>
1
Borgar
<form>
<input type="submit" id="submit" style="display:none;"/>
<a href="#" onclick="$('#submit').click();">Sample Submit Trick</a> 
</form>
1
Ionut Bajescu
$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});});

En utilisant Jquery, nous vérifions que le document a été chargé, puis nous attendons que l'on clique sur une balise d'ancrage avec un identifiant "soumettre". Il soumet ensuite le formulaire avec un identifiant "d'inscription". Modifiez "soumettre" et "inscription" en fonction.

1
Gav

Similaire solution à hasen j , mais en utilisant une fonction récursive pour parcourir le document.

function findParentForm(element) {
    if (element.parentNode.tagName.toLowerCase() == 'html') {
        throw('No Parent Form Found');
    } else if (element.parentNode.tagName.toLowerCase() == 'form') {
        return element.parentNode;
    } else {
        return findParentForm(element.parentNode);
    }
}

Et la forme, bien sûr ...

<form>
    <ul>
        <li>
            <p>
                The link could be <span>embedded <a href="" onclick="findParentForm(this).submit(); return false;">at any level</a></span>
                in the form, so "this.parentNode.parentNode..." is no good. :(
            </p>
        </li>
    </ul>
</form>
1
enobrev