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

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