使用<form>标记之外的button提交表单
说我有：
<form method="get" action="something.php"> <input type="text" name="name" /> </form> <input type="submit" /> 我怎么去提交该表单提交表单外的提交button，我认为在HTML5 theres提交的动作属性，但我不知道，如果这是完全跨浏览器，如果不是反正有做这个？
据我所知，你不能没有JavaScript这样做。
这是规范说的
用于创build控件的元素通常出现在FORM元素内部，但在用于构build用户界面时也可能出现在FORM元素声明之外。 这在内部事件部分讨论。 请注意，表单之外的控件不能成功控制。
这是我的大胆
submitbutton被认为是一个控件。
http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1
从评论
我有一个多选项卡设置区域的button来更新所有，由于它的devise，button将在表单之外。
为什么不把input放在表单里，而是用CSS把它放在页面的其他地方？
在HTML5中，有表单属性 。 基本上
<form id="myform" method="get" action="something.php"> <input type="text" name="name" /> </form> <input type="submit" form="myform" />
一个对我来说很好的解决scheme在这里依然不存在。 它需要在<form>有一个可视化隐藏的<submit>或<input type="submit">元素，以及一个关联的<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>
现在，此链接使您可以通过单击<label>元素来“单击” <submit> <label>元素。
如果你可以使用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>
所以，底线是创build一个button，如提交，并把表单（当然隐藏它），并通过点击“假提交”button提交表单的jQuery提交。 希望它有帮助。
<form method="get" id="form1" action="something.php"> </form> <!-- External button--> <button type="submit" form="form1">Click me!</button>
这工作对我来说，有一个远程的表单提交button。
尝试这个：
<input type="submit" onclick="document.forms[0].submit();" />
虽然我会build议在表单中添加一个id ，而不是document.forms[index] 。
你总是可以使用jQuery：
<form id="myForm"> <!-- form controls --> </form> <input type="submit" id="myButton"> <script> $(document).ready(function () { $("#myButton").click(function () { $("#myForm").submit(); }); }); </script>
这是一个非常可靠的解决scheme，它融合了迄今为止最好的想法，同时也包含了我的解决scheme，以解决由Offerein提出的问题。 没有使用JavaScript。
如果您关心与IE（甚至是Edge 13）的向后兼容性，则不能使用form="your-form" 属性 。
使用显示无的标准提交input，并在表单外添加一个标签：
<form id="your-form"> <input type="submit" id="your-form-submit" style="display: none;"> </form>
注意使用display: none; 。 这是故意的。 使用引导程序的.show()类与jQuery的.show()和.show()冲突，并且已经在Bootstrap 4中被弃用了。
现在简单地为您的提交添加一个标签（样式为bootstrap）：
<label for="your-form-submit" role="button" class="btn btn-primary" tabindex="0"> Submit </label>
不像其他解决scheme，我也使用tabindex – 设置为0 – 这意味着我们现在兼容键盘TabBack。 添加role="button"属性给它的CSS样式cursor: pointer 。 Et瞧。 （ 看这个小提琴 ）。
这工作完美！ ;）
这可以使用Ajax完成，我称之为“表单镜像元素”。 而不是发送一个外部元素的表单，你可以创build一个假的forms。 以前的forms是不需要的。
<!-- 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>
这是非常有用的，如果你想发送一些数据在另一个表单中而不提交父表单。
也许这个代码可以根据目的进行优化和修复。 完美的作品！ ;）也适用于如果你想要一个select框这样的：
<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>
我希望帮助像我这样的人帮助我。 ;）
也许这可以工作，但我不知道这是否是有效的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>
