如何最好地提交鏈接提交表單

Question

獲得定期錨點（<a href="...">）提交單擊時嵌入的表單的最佳方式是什麼？

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

我知道使用jQuery的最簡單的方法是

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

...但我試圖找到一種方式來做到這一點，而不使用的庫。

---

編輯：我真的試圖找到它不需要形式的知識的方法（例如：它的名字，身份證等）。這與您如何將它放在輸入元素上相似：<input onclick="this.form.submit()" />

Answer 1

循環通過父節點，直到找到含有標記名的元素，表明它是表單！

<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

爲什麼不使用<input>或<button>元素，只是用CSS進行調整？然後它沒有使用Javascript，因此更可靠。

Answer 3

這樣做會使用類似這樣的最簡單方法：

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

Answer 4

最好的辦法是

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

但是你可能不希望這樣做，因爲這會使提交不可能用於禁用JS的用戶

Answer 5

類似solution到hasen j，但使用一個遞歸函數來遍歷文檔。

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

而且形式，當然...

<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

就個人而言，我更喜歡使用javascript:協議在href，而不是使用onclick事件......如果有任何與此問題，我很樂意予以糾正。

如果您在該頁面只有一種形式，一個相當普遍的情況下，你可以簡單地做：

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

否則，如上冒泡的元素是一個解決方案。

[編輯]我保留答案，即使它是downvoted作爲參考（評論中給出的信息是有趣的）。
協議技術的另一個缺點：它不生成事件對象。在我給出的片段中沒有問題，但在調用處理程序時很煩人。

Answer 7

你應該使用一個按鈕（和輸入或提交類型的按鈕）來提交表單。

如果您需要鏈接具有但輸入元素沒有的其他功能（例如懸停），那麼使用javascript實現這些功能比提交表單更容易。對於沒有JavaScript的人來說，它也會更加優雅地降級。

你甚至可以MSIE特定的代碼解決這個問題（和使用：徘徊其他瀏覽器）：

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

如果你仍然真的真的想這樣做，向後那麼這裏就是我不會做它：

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 
} 

和HTML是這樣的：

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

Answer 8

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

使用jquery，我們檢查文檔已經加載，然後我們等待一個ID爲'submit'的錨標籤被點擊。然後它會提交表單，其ID爲「註冊」。更改「提交」和「註冊」以適應。

Answer 9

我現在每次都在使用它。因爲在通常我的項目的鏈接（通過包裝的圖像或CSS）提交按鈕，所以我用這個：

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

不要忘記它是使用jQuery了。

你可以包裝在你自己的功能。所以它總是在該鏈接上提交父元素（表單）。

Answer 10

只要鏈接是表單的直接子對象，就可以使用它。您不需要知道表單的名稱。至少在Firefox和Chrome中運行。

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

quirksmode.org告訴我x.parentNode工作在所有的瀏覽器，所以這應該工作隨處可見。

Answer 11

要從答案遵循上述How best to make a link submit a form，我最近一直在做它的方式是

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

和CSS

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

我張貼了這個，因爲我無法找到一個例子的html/css完成。如果任何人有任何改進將更新。

Answer 12

使用類似這樣的標記打開一個提交按鈕進入一個鏈接：

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

和CSS這樣的：

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>