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

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