说我有:
<form method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" />
我如何在表单外提交那个提交按钮,我认为在HTML5中有一个提交的动作属性,但我不确定这是否完全跨浏览器,如果不是的话,有没有办法这样做?
说我有:
<form method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" />
我如何在表单外提交那个提交按钮,我认为在HTML5中有一个提交的动作属性,但我不确定这是否完全跨浏览器,如果不是的话,有没有办法这样做?
当前回答
如果你会使用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>
所以,底线是创建一个按钮像提交,并把真正的提交按钮在表单(当然隐藏它),并通过jquery通过点击“Fake Submit”按钮提交表单。希望能有所帮助。
其他回答
一个对我很有效的解决方案,在这里仍然没有。它需要在<表单>中有一个视觉上隐藏的<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>元素。
类似于这里的另一个解决方案,只是稍加修改:
<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
这工作很完美!;)
这可以使用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>
我希望它能像帮助我一样帮助别人。;)
通过在组件的定义中添加form="yourFormId",可以告诉表单<form>标记之外的外部组件属于它。
在这种情况下,
<form id="login-form">
... blah...
</form>
<button type="submit" form="login-form" name="login_user" class="login-form-btn">
<B>Log In</B>
</button>
... 仍然会愉快地提交表单,因为您为它分配了表单名称。表单认为按钮是它的一部分,即使按钮在标签之外,这需要没有javascript来提交表单(这可以是bug,即表单可以提交,但引导错误/验证我无法显示,我测试)。
在HTML5中,有form属性。基本上
<form id="myform" method="get" action="something.php">
<input type="text" name="name" />
</form>
<input type="submit" form="myform" value="Update"/>