如何最好地使链接提交表单

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

...但我正在尝试找到一种不使用库的方法。

---

编辑：我真的想找到一种不需要表单知识的方法（例如：它的名称、ID 等）。这类似于将其放在输入元素上的方式：<input onclick="this.form.submit()" />

Answer 1

您为什么不使用<input> 或<button> 元素并使用CSS 对其进行调整？然后它可以在没有 Javascript 的情况下工作，因此更可靠。

Answer 2

最简单的方法是使用这样的方法：

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

Answer 3

我现在每次都在使用它。因为我项目中的提交按钮通常是一个链接（通过包装图像或 CSS），所以我使用这个：

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

别忘了它也在使用 jQuery。

您可以包装自己的函数。所以它总是在那个链接上提交父元素（表单）。

Answer 4

只要链接是表单的直接子级，您就可以使用它。您不需要知道表单的名称。至少适用于 Firefox 和 Chrome。

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

quirksmode.org 告诉我 x.parentNode 在所有浏览器中都可以工作，所以这个应该在任何地方都可以工作。

Answer 5

遍历父节点，直到找到一个带有标记名的元素，表明它是一个表单！

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

使用如下标记将提交按钮转换为链接：

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

最好的办法是

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

但是您可能不想这样做，因为它会使禁用 JS 的用户无法提交

Answer 8

类似于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 9

您应该使用按钮（以及输入或提交类型的按钮）来提交表单。

如果您需要链接具有但输入元素没有的任何附加功能（例如悬停），那么使用 javascript 实现这些功能比提交表单更容易。对于没有 javascript 的人来说，它也会更优雅地降级。

您甚至可以使用特定于 MSIE 的代码来解决这个问题（并将 :hover 用于其他浏览器）：

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

就个人而言，我更喜欢在 href 中使用 javascript: 协议而不是使用 onclick 事件...如果有任何问题，我很乐意得到纠正。

如果页面中只有一个表单，这是很常见的情况，您可以这样做：

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

否则，像上面那样冒泡元素是一种解决方案。

[编辑] 我保留答案，即使它被否决，作为参考（cmets 中给出的信息很有趣）。
协议技术的另一个缺点：它不生成事件对象。我给的 sn-p 没有问题，但调用处理程序时很烦人。

Answer 11

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

使用 Jquery，我们检查文档是否已加载，然后等待单击 id 为“提交”的锚标记。然后，它会提交 id 为“signup”的表单。更改“提交”和“注册”以适应。

Answer 12

继续上面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 13

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