Wie man am besten einen Link ein Formular einreicht

Question

Was ist der beste Weg, um einen normalen Anker (<a href="...">) zu erhalten, um das Formular zu senden, in das er eingebettet ist, wenn er angeklickt wird?

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

Ich weiß, dass der einfachste Weg, mit jQuery

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

wäre ... aber ich versuche, einen Weg zu finden, dies zu tun, ohne eine Bibliothek.

---

bearbeiten: Ich versuche wirklich, ein Verfahren zu finden, die keine Kenntnis der Form erfordert (zB: Name, ID, etc.). Dies wäre ähnlich wie Sie dies auf ein Eingabeelement setzen könnten: <input onclick="this.form.submit()" />

Answer 1

Schleife durch Elternknoten, bis Sie ein Element mit Tagname finden, die angibt, dass es ein Formular ist!

<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

Warum verwenden Sie kein <input> oder <button> Element und nur zwicken es mit CSS? Dann funktioniert es ohne Javascript und ist daher zuverlässiger.

Answer 3

Der einfachste Weg, das wäre die Verwendung so etwas wie dies zu tun:

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

Answer 4

beste Weg ist,

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

aber Sie wahrscheinlich nicht wollen, zu tun, dass, da es unmöglich Einreichung machen für Benutzer mit JS deaktiviert

Answer 5

ähnliche solution-hasen j, aber eine rekursiven Funktion mit dem Dokument zu durchlaufen.

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

Und die Form, natürlich ...

<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

Ich persönlich bevorzuge das javascript: Protokoll im href zu verwenden, anstatt Onclick-Ereignis zu verwenden ... Wenn irgendwelche Probleme gibt mit diesem ist, Ich würde mich freuen, korrigiert zu werden.

Wenn Sie nur ein Formular auf der Seite haben, ein ganz gewöhnlicher Fall, können Sie einfach tun:

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

Ansonsten wie oben die Elemente sprudelt es eine Lösung.

[EDIT] Ich behalte die Antwort, auch wenn es downvoted ist, als Referenz (die in den Kommentaren angegebene Information ist interessant).
Ein weiterer Nachteil der Protokolltechnik: Es generiert kein Ereignisobjekt. Kein Problem in dem Snippet, das ich gab, aber nervig, wenn ich einen Handler anrufe.

Answer 7

Sie sollten eine Schaltfläche (und Eingabe oder Schaltfläche vom Typ Senden) verwenden, um ein Formular zu senden.

Wenn Sie zusätzliche Funktionen benötigen, die ein Link hat, aber Eingabeelemente nicht haben (z. B. Hover), dann ist es einfacher, diese mit Javascript zu implementieren, als es das Senden des Formulars ist.Es wird auch graziöser für Menschen ohne Javascript degradieren.

Sie können dies selbst lösen mit MSIE spezifischen Code (und Verwendung: schweben für andere Browser):

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

Wenn Sie noch wirklich, wirklich tun möchte, es rückwärts dann ist hier, wie ich es nicht tun würde:

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 
} 

Und die HTML würde wie folgt aussehen:

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

Answer 8

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

Mit Jquery überprüfen wir, ob das Dokument geladen wurde. Dann warten wir auf ein Anker-Tag mit der ID 'submit', auf das geklickt werden soll. Dann reicht es das Formular mit der ID "Anmeldung" ein. Ändern Sie "Senden" und "Anmelden" entsprechend.

Answer 9

Ich benutze dies jetzt jedes Mal. Da die Taste in meinem Projekt einreichen in der Regel ein Link (durch Wrap ein Bild oder CSS), so dass ich dies:

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

Vergessen Sie nicht, es jQuery auch verwendet.

Sie können in Ihrer eigenen Funktion verpacken. Es übermittelt also immer das Elternelement (Formular) auf diesem Link.

Answer 10

Solange der Link ein direktes Kind des Formulars ist, können Sie dies verwenden. Sie müssen den Namen des Formulars nicht kennen. Funktioniert zumindest in Firefox und Chrome.

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

quirksmode.org sagt mir x.parentNode in allen Browsern funktioniert, so dass diese sollte überall Arbeit.

Answer 11

zu folgen aus der Antwort oben How best to make a link submit a form, so, wie ich es habe ist

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

und CSS kürzlich tun

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

ich gepostet, da ich kein Beispiel gefunden der HTML/CSS getan. Wenn jemand irgendwelche Verbesserungen hat, wird aktualisiert.

Answer 12

einen Submit-Button in einen Link drehen Markup wie folgt aus:

diese

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

und CSS wie:

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>