Comment mieux faire un lien soumettre un formulaire

Question

Quelle est la meilleure façon d'obtenir un ancrage standard (<a href="...">) de soumettre le formulaire, il est intégré dans la quand on clique 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 à l'aide de jQuery serait

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

...mais je vais essayer de trouver un moyen de le faire sans l'aide d'une bibliothèque.

---

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

Answer 1

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

Answer 2

Le moyen le plus simple de le faire serait d'utiliser quelque chose comme ceci:

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

Answer 3

Je l'utilise maintenant à chaque fois. Parce que le bouton d'envoi de mon projet est généralement un lien (en enveloppant une image ou un CSS), j'utilise donc ceci:

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

N'oubliez pas qu'il utilise aussi jQuery.

Vous pouvez envelopper dans votre propre fonction. Donc, il soumet toujours l'élément parent (formulaire) sur ce lien.

Answer 4

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 dans au moins 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.

Answer 5

Parcourez les nœuds parents jusqu'à ce que vous trouviez un élément avec une variable 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>