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

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

<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

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

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

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

否则，如上所述冒泡元素是一种解决方案。

[编辑]我保留答案，即使它被低估，作为参考（评论中给出的信息很有趣）。
协议技术的另一个缺点是：它不会生成事件对象。我给的代码片段不是问题，但在调用处理程序时很烦人。

Answer 10

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

如果您需要链接所具有的任何附加功能但输入元素没有（例如悬停），那么使用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 11

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

使用Jquery，我们检查文档是否已加载，然后我们等待id为“submit”的锚标记被点击。然后它提交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>

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

13 个答案: