在标签外使用按钮提交表单。

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中有提交的动作属性，但我不确定这是否完全跨浏览器，如果它不跨浏览器，我是否有这个功能?

10 个解决方案

#1

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.

用于创建控件的元素通常出现在表单元素中，但在用于构建用户界面时，也可能出现在表单元素声明之外。本节将讨论内在事件。注意，表单之外的控件不能是成功的控件。

That's my bold

这是我的大胆的

A submit button is considered a control.

提交按钮被认为是控件。

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 input inside the form, but use CSS to position it elsewhere on the page?

为什么不将输入放在表单中，而是使用CSS将其放置在页面的其他位置呢?

#2

441

In HTML5, there is the form attribute. Basically

在HTML5中，有表单属性。基本上

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

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

#3

251

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:

一个对我很有用的解决方案，在这里仍然没有。它需要有一个外观隐藏的或元素，同时还要有一个相关的元素。它看起来是这样的:

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

现在，这个链接允许您通过单击元素“单击”窗体元素。

#4

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这样的按钮，将真正的Submit按钮放在表单中(当然是隐藏它)，然后通过jquery点击“伪Submit”按钮提交表单。希望它可以帮助。

#5

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

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

#6

Try this:

试试这个:

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

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

尽管我建议在表单中添加id并通过它访问，而不是使用document.forms[index]。

#7

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>

#8

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.

这里有一个非常可靠的解决方案，它包含了迄今为止最好的想法，同时也包含了我的解决方案。不使用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 .hidden class conflicts with jQuery's .show() and .hide(), and has since been deprecated in Bootstrap 4.

注意使用显示:没有;这是故意的。使用bootstrap的.hidden类与jQuery的.show()和.hide()发生冲突，并在引导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—这意味着我们现在可以兼容键盘选项卡。添加role="button"属性赋予它CSS样式光标:指针。瞧。(看到这个小提琴)。

#9

This work perfectly! ;)

这项工作完全!,)

This can be done using Ajax and with 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.

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

Maybe this code can optimizate and fix more depending the purpose. 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 help someone like helped me. ;)

我希望帮助像我这样的人。,)

#10

Maybe this could work, but I don't know if this is valid HTML.

也许这行得通，但我不知道这是否是有效的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>

#1