Comment faire un lien pour envoyer un formulaire

Question

Quel est le meilleur moyen d'obtenir une ancre régulière (<a href="...">) pour soumettre le formulaire dans lequel il est incorporé?

<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 facile en utilisant jQuery serait

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

... mais je suis en train de trouver un moyen de le faire sans utiliser une bibliothèque.

---

Modifier: 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 similaire à la façon dont vous pouvez mettre cela sur un élément d'entrée: <input onclick="this.form.submit()" />

Answer 1

bouclez 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> 

Answer 2

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

Answer 3

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

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

Answer 4

meilleure façon est

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

mais vous ne voulez probablement pas le faire comme il fera la présentation impossible pour les utilisateurs avec JS désactivé

Answer 5

similaires 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> 

Answer 6

Personnellement, je préfère utiliser le protocole javascript: dans le href au lieu d'utiliser l'événement onclick ... S'il y a des problèmes avec cette , Je serais heureux d'être corrigé.

Si vous avez un seul formulaire dans la page, un cas assez fréquent, vous pouvez le faire simplement:

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

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

[EDIT] Je garde la réponse, même si elle est downvoted, comme référence (l'information donnée dans les commentaires est intéressante).
Un autre inconvénient de la technique de protocole: elle 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.

Answer 7

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

Si vous avez besoin de fonctionnalités supplémentaires qu'un élément de liaison n'a pas (comme hover), alors il est plus facile d'implémenter ceux avec javascript, que c'est la soumission du formulaire.Il se dégradera également plus gracieusement pour les personnes sans javascript.

Vous pouvez même résoudre ce avec MSIE code spécifique (et l'utilisation: hover pour les 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 encore vraiment voulez vraiment faire en arrière alors 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 code HTML devrait ressembler à ceci:

<a href="aPageExplainingWhyYouNeedJavascript.html" onclick="return submitByLink(this);">Send</a> 

Answer 8

$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});}); 

En utilisant Jquery, nous vérifions que le document a été chargé, puis nous attendons qu'un point d'ancrage avec un identifiant de 'submit' soit cliqué. Il soumet ensuite le formulaire avec un identifiant de 'inscription'. Changez 'soumettre' et 'inscription' en conséquence.

Answer 9

Je l'utilise maintenant à chaque fois.

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

Ne pas oublier qu'il utilise jQuery trop: Parce que (une image ou CSS par enveloppe), donc j'utiliser ce bouton soumettre dans mon projet en général un lien.

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

Answer 10

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 x.parentNode fonctionne dans tous les navigateurs, donc ce devrait travail partout.

Answer 11

Pour faire suite de la réponse ci-dessus How best to make a link submit a form, 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 posté depuis que je ne pouvais pas trouver un exemple du html/css fait. Si quelqu'un a des améliorations mettra à jour.

Answer 12

Tourner un bouton d'envoi dans un lien en utilisant comme ce balisage:

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

Et CSS comme ceci:

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

Answer 13

<form> 
<input type="submit" id="submit" style="display:none;"/> 
<a href="#" onclick="$('#submit').click();">Sample Submit Trick</a> 
</form>