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

Submit form using a button outside the <form> tag

提问by daryl

Say I have:

说我有：

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

<input type="submit" />

How do I go about submitting that form with that submit button outside of the form, I think in HTML5 theres an action attribute for the submit but I'm not sure if thats fully cross-browser and if it isn't is there anyway to do this?

我如何使用表单外部的提交按钮提交该表单，我认为在 HTML5 中有一个用于提交的 action 属性，但我不确定这是否完全跨浏览器，如果不是，无论如何做这个？

采纳答案by Jason Gennaro

Update: In modern browsers you can use the formattribute to do this.

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

---

---

As far as I know, you cannot do this without javascript.

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

Here's what the spec says

这是规范所说的

The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.

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

That's my bold

这是我的大胆

A submitbutton is considered a control.

一个submit按钮被认为是一个控件。

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

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

From the comments

来自评论

I have a multi tabbed settings area with a button to update all, due to the design of it the button would be outside of the form.

我有一个多选项卡设置区域，带有一个按钮来更新所有内容，由于它的设计，按钮将在表单之外。

Why not place the inputinside the form, but use CSS to position it elsewhere on the page?

为什么不把它input放在表单里面，而是用 CSS 把它放在页面上的其他地方呢？

回答by Lie Ryan

In HTML5, there is the form attribute. Basically

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

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

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

回答by Offereins

A solution that works great for me, is still missing here. It requires having a visually hidden <submit>or <input type="submit">element whithin the <form>, and an associated <label>element outside of it. It would look like this:

一个对我很有用的解决方案，在这里仍然缺失。它需要在 内有一个视觉上隐藏的<submit>或<input type="submit">元素<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>

Now this link enables you to 'click' the form <submit>element by clicking the <label>element.

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

回答by dav

if you can use jQuery you can use this

如果你可以使用 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>

So, the bottom line is to create a button like Submit, and put the real submit button in the form(of course hiding it), and submit form by jquery via clicking the 'Fake Submit' button. Hope it helps.

所以，最重要的是创建一个像Submit这样的按钮，并将真正的提交按钮放在表单中（当然隐藏它），然后通过单击“假提交”按钮通过jquery提交表单。希望能帮助到你。

回答by Joe the Squirrel

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

</form>

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

This worked for me, to have a remote submit button for a form.

这对我有用，有一个表单的远程提交按钮。

回答by mster

Similar to another solution here, with minor modification:

类似于这里的另一个解决方案，稍作修改：

<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

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

回答by Mrchief

Try this:

尝试这个：

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

Although I would suggest adding an idto the form and accessing by that instead of document.forms[index].

虽然我建议id在表单中添加一个并通过它而不是document.forms[index].

回答by Aravind Suresh

You can always use jQuery:

您可以随时使用 jQuery：

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

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

回答by Jonathan

Here's a pretty solid solution that incorporates the best ideas so far as well as includes my solution to a problem highlighted with Offerein's. No javascript is used.

这是一个非常可靠的解决方案，它结合了迄今为止最好的想法，并包括我对 Offerein 突出显示的问题的解决方案。没有使用 javascript。

If you care about backwards compatibility with IE (and even Edge 13), you can't use the form="your-form"attribute.

如果您关心与 IE（甚至 Edge 13）的向后兼容性，则不能使用form="your-form"属性.

Use a standard submit input with display none and add a label for it outside the form:

使用标准提交输入，显示无，并在表单外为其添加标签：

<form id="your-form">
  <input type="submit" id="your-form-submit" style="display: none;">
</form>

Note the use of display: none;. This is intentional. Using bootstrap's .hiddenclass conflicts with jQuery's .show()and .hide(), and has since been deprecated in Bootstrap 4.

注意使用display: none;. 这是故意的。使用 bootstrap 的.hidden类与 jQuery 的.show()and冲突.hide()，并且在 Bootstrap 4 中已被弃用。

Now simply add a label for your submit, (styled for bootstrap):

现在只需为您的提交添加一个标签（为引导程序设计）：

<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0">
  Submit
</label>

Unlike other solutions, I'm also using tabindex- set to 0 - which means that we are now compatible with keyboard tabbing. Adding the role="button"attribute gives it the CSS style cursor: pointer. Et voila. (See this fiddle).

与其他解决方案不同，我还使用tabindex- 设置为 0 - 这意味着我们现在与键盘 tabbing 兼容。添加role="button"属性赋予它 CSS 样式cursor: pointer。等等。（见这个小提琴）。

回答by Franks

This work perfectly! ;)

这工作完美！;)

This can be done using Ajax and with what I call: "a form mirror element". Instead to send a form with an element outside, you can create a fake form. The previous form is not needed.

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

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

Code ajax would be like:

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

This is very usefull if you want to send some data inside another form without submit the parent form.

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

This code probably can be adapted/optimized according to the need. It works perfectly!! ;) Also works if you want a select option box like this:

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

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

I hope it helped someone like it helped me. ;)

我希望它能帮助像它帮助我的人。;)