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

获得常规锚（

）以提交单击时嵌入的表单的最佳方法是什么

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

…但我正试图找到一种不用图书馆就能做到这一点的方法

---

---

编辑：我真的在尝试找到一种不需要了解表单（例如：表单名称、id等）的方法。这类似于将其放在输入元素上的方式：

为什么不使用

或

元素并用CSS调整它呢？然后，它可以在没有Javascript的情况下工作，因此更可靠。

最简单的方法是使用如下内容：

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

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

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

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

最好的方法是

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

---

但是，您可能不想这样做，因为这将使禁用JS的用户无法提交，直到您找到一个带有标记名的元素，表明它是一个表单，才能循环父节点

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

链接可以嵌入
在表单中，所以“this.parentNode.parentNode…”是不好的：(



//

类似于，但使用递归函数遍历文档

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>

链接可以嵌入
在表单中，所以“this.parentNode.parentNode…”是不好的：(

就我个人而言，我更喜欢在href中使用

javascript:

协议，而不是使用onclick事件……如果有任何问题，我很乐意得到纠正

如果页面中只有一个表单（这是一种非常常见的情况），您可以简单地执行以下操作：

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

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

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

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

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

您甚至可以使用特定于MSIE的代码解决此问题（对于其他浏览器，请使用：hover）：

HTML将如下所示：

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

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

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

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

---

使用Jquery，我们检查文档是否已加载，然后等待id为“submit”的锚定标记被单击。然后它提交id为“signup”的表单。更改“submit”和“signup”以适应。我现在每次都使用它。因为我的项目中的submit按钮通常是一个链接（通过包装图像或CSS），所以我使用这个：

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

别忘了它也在使用jQuery

---

您可以包装在自己的函数中。因此它总是在该链接上提交父元素（表单）。

只要该链接是表单的直接子元素，您就可以使用它。您不需要知道表单的名称。至少在Firefox和Chrome中可用

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

---

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

根据上面的答案，我最近的做法是

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

---

因为找不到html/css的示例，所以我发布了这篇文章。如果有人有任何改进，将进行更新。

使用如下标记将提交按钮变成链接：

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

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

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

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

你不能做按钮：将鼠标悬停在IE6上。按钮/input-submit的性能更好，更像你试图建模的东西，因此即使JS保证可用，它也是一个更好的选择。href=“#”如果你用鼠标中键点击它，右键点击书签等，你会表现得很奇怪。如果把鼠标悬停在IE6上是很重要的，你可以随时加入JS黑客。同意这个答案。链接是用来获取请求的，没有理由改变它。不要让链接发帖子。改为使用表单提交。是的，这不是问题的答案，是吗？我知道你可以使用输入提交表单，而且在语义上更好，等等，但我想知道一个常规链接。nickf，有时候正确的答案是这个问题是错误的。我想把它改为：改变的原因是，虽然不应该发生，但浏览器完全有可能发生在提交表单之前重定向到#链接，从而把事情搞砸了。这就是我最终使用的，但我真的希望找到一种不需要知道表单任何信息（例如，表单名称）的方法你可以在提交按钮上放置一个图标。启用JS的用户将看到带有漂亮悬停的链接，禁用JS的用户将看到一个标准按钮——当然在IE6中没有悬停。没有想到这一点，事实上你甚至不想在HTML中有链接，只需通过JS以编程方式添加它，这样他们就不会在没有JS的情况下看到所有内容启用documents.forms[0]的功能是什么？如果在这个表单之前页面上有多个表单，这不是完全错误吗？这就是我写的：只有当您确定只有一个表单时，它才是可靠的。javascript伪协议可能触发意外行为（通常没有新图像/死脚本线程），它在HTTPS模式下的IE上存在安全问题，未能包含返回可能会重定向到奇怪的地方（请尝试“javascript:document.body.style.display='block'；”）。对于非JS用户，它也会失败。@Borgar：感谢您的提示，这很有趣。因此，除了HTTPS和带有值的表达式之外（我也避免使用，就像bookmarklet一样），应该没问题……不管怎样，对于非JS用户失败对于其他表单也是如此