使用<form>标记外的按钮提交表单

尝试这个：

<input type="submit" onclick="document.forms[0].submit();" />

尽管我建议id在表单中添加一个，然后通过而不是进行访问document.forms[index]。

也许这可能有效，但是我不知道这是否是有效的HTML。

<form method="get" action="something.php">
    <input type="text" name="name" />
    <input id="submitButton" type="submit" class="hide-submit" />
</form>

<label for="submitButton">Submit</label>

我有一个问题，我试图从表格单元格元素隐藏表单，但仍然显示表单的提交按钮。问题在于，表单元素仍在占用额外的空白，这使我的表格单元格的格式看起来很奇怪。display：none和visible：hidden属性不起作用，因为它也隐藏了提交按钮，因为它包含在我试图隐藏的表单中。简单的答案是使用CSS将表单高度设置为几乎没有

所以，

CSS-

    #formID {height:4px;}

为我工作。

这工作完美！;）

这可以使用Ajax以及我所谓的“表单镜像元素”来完成。您可以创建一个伪造的表单，而不是发送一个外部元素的表单。不需要以前的表格。

<!-- This will do the trick -->
<div >
    <input id="mirror_element" type="text" name="your_input_name">
    <input type="button" value="Send Form">
</div>

代码ajax就像：

    <script>
        ajax_form_mirror("#mirror_element", "your_file.php", "#your_element_response", "POST");

        function ajax_form_mirror(form, file, element, method) {
            $(document).ready(function() {
                // Ajax
                $(form).change(function() { // catch the forms submit event
                    $.ajax({                // create an AJAX call...
                        data: $(this).serialize(),      // get the form data
                        type: method,                   // GET or POST
                        url: file,                      // the file to call
                        success: function (response) {   // on success..
                        $(element).html(response);  // update the DIV
                        }
                    });

                    return false; // cancel original event to prevent form submitting
                });
            });
        }
   </script>

如果要在另一个表单中发送一些数据而不提交父表单，这将非常有用。

该代码可能可以根据需要进行修改/优化。它完美地工作！;）如果您想要这样的选择选项框，也可以使用：

<div>
    <select id="mirror_element" name="your_input_name">
        <option id="1" value="1">A</option>
        <option id="2" value="2">B</option>
        <option id="3" value="3">C</option>
        <option id="4" value="4">D</option>
    </select>
</div>

我希望它能帮助像我这样的人。;）

您可以随时使用jQuery：

<form id="myForm">
  <!-- form controls -->
</form>
<input type="submit" id="myButton">

<script>
$(document).ready(function () {
  $("#myButton").click(function () {
    $("#myForm").submit();
  });
});
</script>

如果可以使用jQuery，则可以使用

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

因此，最重要的是创建一个类似于Submit的按钮，然后将真正的Submit按钮放入表单中（当然将其隐藏），然后通过jquery通过单击“ Fake Submit”按钮来提交表单。希望能帮助到你。

在HTML5中，有form属性。基本上

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" />

更新：在现代浏览器中，您可以使用form属性执行此操作。

---

据我所知，如果没有javascript，您将无法做到这一点。

规格说明如下

用于创建控件的元素通常出现在FORM元素内部，但当用于构建用户界面时也可能出现在FORM元素声明之外。有关内在事件的部分将对此进行讨论。请注意，窗体外部的控件不能成为成功的控件。

那是我的大胆

甲submit按钮被认为是一种控制。

http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1

从评论

我有一个带有多个选项卡的设置区域，其中的一个按钮可以全部更新，由于其设计的原因，该按钮将位于表单之外。

为什么不将input内部放置在表单中，而是使用CSS将其放置在页面上的其他位置？

与此处的另一个解决方案类似，但进行了少量修改：

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

<form method="get" id="form1" action="something.php">

</form>

<!-- External button-->
<button type="submit" form="form1">Click me!</button>

这对我来说很有效，因为有一个表单的远程提交按钮。

一个对我来说很好的解决方案，在这里仍然缺少。它需要具有目视隐藏<submit>或<input type="submit">元件whithin的<form>，和相关<label>的它元件外部。它看起来像这样：

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

现在，此链接使您可以<submit>通过单击<label>元素来“单击”表单元素。