使用
StafanJinJin
2020-03-24
说我有:
<form method="get" action="something.php"> <input type="text" name="name" /> </form> <input type="submit" />
我该如何使用表单外部的“提交”按钮提交该表单,我认为在HTML5中有一个“提交”的动作属性,但是我不确定那是否是完全跨浏览器的,如果不是这样的话,做这个?
第3605篇《使用
尝试这个:
<input type="submit" onclick="document.forms[0].submit();" />
尽管我建议id在表单中添加一个,然后通过而不是进行访问document.forms[index]。
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属性执行此操作。
form
据我所知,如果没有javascript,您将无法做到这一点。
规格说明如下
用于创建控件的元素通常出现在FORM元素内部,但当用于构建用户界面时也可能出现在FORM元素声明之外。有关内在事件的部分将对此进行讨论。请注意,窗体外部的控件不能成为成功的控件。
那是我的大胆
甲submit按钮被认为是一种控制。
submit
http://www.w3.org/TR/html4/interact/forms.html#h-17.2.1
从评论
我有一个带有多个选项卡的设置区域,其中的一个按钮可以全部更新,由于其设计的原因,该按钮将位于表单之外。
为什么不将input内部放置在表单中,而是使用CSS将其放置在页面上的其他位置?
input
与此处的另一个解决方案类似,但进行了少量修改:
<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>的它元件外部。它看起来像这样:
<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>
现在,此链接使您可以<submit>通过单击<label>元素来“单击”表单元素。
相似问题
0 回答
5 回答
25 回答
问题类别