Jak najlepiej utworzyć łącze przesłać formularz

Question

Jaki jest najlepszy sposób uzyskania standardowej kotwicy (<a href="...">) w celu przesłania formularza, w którym jest osadzony po kliknięciu?

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

wiem, że najprostszym sposobem przy użyciu jQuery byłoby

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

... ale staram się znaleźć sposób, aby to zrobić bez korzystania z biblioteki.

---

Edit: Jestem naprawdę starają się znaleźć sposób, który nie wymaga wiedzy o postaci (np: jego nazwa, id, etc). To byłby podobny do tego, jak można umieścić to na element wejściowy: <input onclick="this.form.submit()" />

Answer 1

przechodzić przez węzły nadrzędne do momentu znalezienia elementu ze zmienną wskazującą, że jest to formularz!

<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

Dlaczego nie używacie element <input> lub <button> i po prostu dostosować go z CSS? Następnie działa bez Javascript i dlatego jest bardziej niezawodny.

Answer 3

Najprostszym sposobem na to byłoby użyć czegoś takiego:

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

Answer 4

najlepszym sposobem jest

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

jednak prawdopodobnie nie chce tego robić, jak to zrobi składania niemożliwe dla użytkowników z JS wyłączonym

Answer 5

Podobny solution do hasen j, ale przy użyciu funkcji rekurencyjnej przemierzać dokument.

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

i formy, oczywiście ...

<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

Osobiście wolę używać protokołu javascript: w href zamiast używania onclick zdarzenia ... Jeśli nie ma żadnych problemów z tym , Byłbym szczęśliwy, gdyby mnie poprawiono.

Jeśli masz tylko jeden formularz na stronie, to dość częsty przypadek, można zrobić po prostu:

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

Inaczej, przepuszczając się elementy jak wyżej to rozwiązanie.

[EDYTUJ] Zachowuję odpowiedź, nawet jeśli jest ona odrzucona, jako punkt odniesienia (informacje podane w komentarzach są interesujące).
Kolejna wada techniki protokołu: nie generuje obiektu zdarzenia. Nie stanowi to problemu we fragmencie, który podałem, ale irytującym, gdy dzwonię do obsługi.

Answer 7

Powinieneś użyć przycisku (i wejścia lub przycisku typu prześlij), aby przesłać formularz.

Jeśli potrzebujesz dodatkowych funkcji, które ma link, ale elementy wejściowe nie mają (takich jak najeżdżanie), to łatwiej jest wdrożyć te z javascript, niż jest to przesłanie formularza.Spowoduje to również gorszą degradację dla ludzi bez javascript.

Można nawet rozwiązać ten z MSIE określonego kodu (i zastosowanie: hover dla innych przeglądarek):

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

Jeśli wciąż naprawdę naprawdę chcesz to zrobić w tył wtedy oto jak ja nie będzie to zrobić:

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 
} 

I HTML będzie wyglądać następująco:

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

Answer 8

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

Używając Jquery, sprawdzamy, czy dokument został załadowany, czekamy na znacznik zakotwiczenia z identyfikatorem "submit" do kliknięcia. Następnie przesyła formularz z identyfikatorem "rejestracji". Zmień "wyślij" i "zarejestruj się", aby dopasować.

Answer 9

Używam tego teraz za każdym razem. Ponieważ przycisk złożyć w moim projekcie zazwyczaj łącza (przez otoczyć obrazek lub CSS), więc to wykorzystać:

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

not forget to przy użyciu jQuery zbyt.

Możesz zawinąć swoją własną funkcję. Dlatego zawsze przesyła element nadrzędny (formularz) do tego linku.

Answer 10

Dopóki link jest bezpośrednim dzieckiem formularza, możesz go użyć. Nie musisz znać nazwy formularza. Działa w co najmniej Firefox i Chrome.

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

quirksmode.org mówi mi x.parentNode działa we wszystkich przeglądarkach, więc powinien praca wszędzie.

Answer 11

Aby wynikają z odpowiedzi powyżej How best to make a link submit a form, drogę Robiłem to niedawno jest

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

i CSS

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

napisałem to ponieważ nie mogłem znaleźć przykład z html/css zrobione. Jeśli ktokolwiek ma jakieś ulepszenia, zaktualizuje się.

Answer 12

Włącz przycisk Prześlij do łącza za pomocą znaczników tak:

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

i CSS tak:

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>