如何最好地使链接提交表单
（ <a href="..."> ）提交单击时embedded的表单的最佳方式是什么？
<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(); });
…但我试图find一种方法来做到这一点，而不使用图书馆。
编辑 ：我真的想find一种方法，不需要知道的forms（例如：其名称，ID等）。 这与您可以将其放在input元素上的方式类似： <input onclick="this.form.submit()" />
循环通过父节点，直到find一个带有标记名的元素，表明它是一个表单！
<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>
为什么不使用<input>或<button>元素，只是用CSS来调整呢？ 然后它没有使用Javascript，因此更可靠。
最简单的方法是使用这样的东西：
<a href="#" onclick="document.formName.submit();">
我现在每次都用这个。 因为我的项目中的提交button通常是一个链接（通过包装图像或CSS），所以我使用这个：
<a href="#" onclick="$(this).closest('form').submit(); return false;">Submit</a>
不要忘记它也使用jQuery。
你可以包装在你自己的function。 所以它总是提交该链接上的父元素（表单）。
只要链接是表单的直接子节点，就可以使用它。 您不需要知道表单的名称。 至less在Firefox和Chrome中运行。
<form action=""> <a href="" onclick="parentNode.submit();return false;">Submit</a> </form>
quirksmode.org告诉我，x.parentNode可以在所有的浏览器中使用，所以这个应该可以在任何地方使用。
把一个提交button变成一个链接，像这样使用标记：
<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; }
最好的办法是
<a href="#" onclick="document.forms[0].submit();return false;">Submit Form</a>
但是，你可能不想这样做，因为它会使用JS禁用的用户不可能提交
类似hasen j的 解决scheme ，但是使用recursion函数遍历文档。
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); } }
和forms，当然…
<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>
你应该使用一个button（和input或提交types的button）来提交表单。
如果您需要链接具有的其他function，但input元素没有（如hover），那么使用javascript实现这些function要比提交表单更容易。 对于没有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>
就个人而言，我更喜欢在href中使用javascript:协议，而不是使用onclick事件…如果有任何问题，我很乐意予以纠正。
如果页面中只有一个表单，这是一个很常见的情况，那么可以简单地做到：
<li><p><a href="javascript:document.forms[0].submit();">Click here to submit</a></p></li>
否则，如上冒泡的元素是一个解决scheme。
[编辑]我保持答案，即使它是downvoted作为参考（评论中给出的信息是有趣的）。
协议技术的另一个缺点是：它不会生成事件对象。 我给的代码片段中没有问题，但在调用处理程序时很烦人。
$(document).ready(function(){$('#submit').click(function(){$('#signup').submit();});});
使用Jquery，我们检查文档已经加载，然后我们等待一个ID为'submit'的定位标签被点击。 然后提交表单的“注册”标识。 更改“提交”和“注册”以适应。
从上面的答案继续如何最好地使链接提交表格 ，我最近一直在做的方式是
<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的例子。 如果有人有任何改进将更新。
<form> <input type="submit" id="submit" style="display:none;"/> <a href="#" onclick="$('#submit').click();">Sample Submit Trick</a> </form>
