Question

我希望我的提交按钮位于我的表单元素之外的某个位置？我有什么选择吗？除了jquery。

谢谢， rodchar

Answer 1

另一种解决方法是在按钮上设置form attribute：

<form id="first">
    <input type="submit" form="second" value="Submit Second" />
</form>
<form id="second">
    <input type="submit" form="first" value="Submit First" />
</form>

小提琴：http://jsfiddle.net/52wgc2ym/

原始答案

提交按钮的自然行为是在其层次结构中提交最近的表单。获取按钮以提交不存在的表单的唯一方法是使用JavaScript（基本上就是jQuery）。

如果有必要，您可以重新定位提交按钮，使其出现，就好像在呈现页面时视觉上不在窗体中一样。您可以使用CSS执行此操作，这可能会产生所需的结果。

Answer 2

提交按钮需要在表单中，是的。

无论如何，以任何其他方式想要它似乎很奇怪。如果输入控件位于页面的一个位置，并且提交按钮在其他地方 waaay ，那将是什么意思？

Answer 3

类型submit的输入仅作为<form>元素的子项有意义。但是使用CSS我相信你可以把它放在任何你喜欢的地方。请记住，表单元素是“不可见的”，因此只需在您的更多内容周围展开标记，您就会被覆盖。这是the documentation on forms for HTML4，它仍然合适。

Answer 4

是的，从结构上讲，提交按钮需要位于表单元素内，以使文档有效X / HTML。但在视觉上你可以使用适当的CSS（浮动，绝对/相对定位等）将提交按钮定位在任何你想要的位置。您还可以编写将触发表单提交的JavaScript并将其绑定到另一个元素。

Answer 5

这是一种常见情况。我认为这样做（没有测试过）：

<form id="form1" action="someAction.cgi" method="GET">
    <!-- other fields go here -->
</form>
<form id="form2" action="someOtherAction.cgi" method="GET">
    <!-- other fields go here -->
</form>

<form>
    <input value="Form One" type="button"
        onclick="document.getElementById('form1').submit();"/>
    <input value="Form Two" type="button"
        onclick="document.getElementById('form2').submit();"/>
</form>

我不确定你是否需要最后<form>。我似乎记得如果按钮不在form中，浏览器会忽略事件。

Answer 6

这是另一种从egrunin回答中获得更清晰视角的答案

    <form id="form1" name="form1" action="someAction.cgi" method="GET">
        <!-- other fields go here -->
    </form>
    <form id="form2" name="form2" action="someOtherAction.cgi" method="GET">
        <!-- other fields go here -->
    </form>

    Calling by form id:
    <form>
        <input value="Form One" type="button"
            onclick="document.getElementById('form1').submit();"/>
        <input value="Form Two" type="button"
            onclick="document.getElementById('form2').submit();"/>
    </form>

or Calling by form name:

    <form>
        <input value="Form One" type="button"
            onclick="document.form1.submit();"/>
        <input value="Form Two" type="button"
            onclick="document.form2.submit();"/>
    </form>

提交按钮是否必须包含在表单中

6 个答案: