使用

标记外的按钮提交表单</p>
html HTML

StafanJinJin

2020-03-24

</div>

说我有:

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

<input type="submit" />

我该如何使用表单外部的“提交”按钮提交该表单,我认为在HTML5中有一个“提交”的动作属性,但是我不确定那是否是完全跨浏览器的,如果不是这样的话,做这个?

</div>

第3605篇《使用标记外的按钮提交表单》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>

11个回答
TomLEY 2020.03.24

尝试这个:

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

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

TomGO梅 2020.03.24

也许这可能有效,但是我不知道这是否是有效的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>
Sam达蒙 2020.03.24

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

所以,

CSS-

    #formID {height:4px;}

为我工作。

小宇宙Stafan 2020.03.24

这工作完美!;)

这可以使用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>

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

Tony凯 2020.03.24

您可以随时使用jQuery:

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

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

如果可以使用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”按钮来提交表单。希望能帮助到你。

Tom凯 2020.03.24

在HTML5中,有form属性基本上

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

<input type="submit" form="myform" />
凯西里 2020.03.24

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


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

规格说明如下

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

那是我的大胆

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

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

从评论

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

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

Tony路易 2020.03.24

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

<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

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

</form>

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

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

小胖 2020.03.24

一个对我来说很好的解决方案,在这里仍然缺少。它需要具有目视隐藏<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>元素来“单击”表单元素。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android