点击按钮提交表格
[英]Submit form by click on button
问题描述
I need to submit a form by clicking a button outside the form. 
我需要通过单击表单外部的按钮来提交表单。 Here is the simple page: 这是简单的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script type="text/javascript">
$(function () {
$("#buy-button").on("click", function () {
$("#refresh-form").submit(function () {
alert('test');
});
});
});
</script>
</head>
<body>
<header>
header
</header>
<div id="main-div">
</div>
</div>
<div id="navigation-div">
<form id="refresh-form" action="test.php">
<button id="map-button">Refresh</button>
</form>
<button id="buy-button">Buy</button>
</div>
<footer>
footer
</footer>
</body>
</html>
When I click the buy-button it won't refresh the page. 当我单击buy-button它不会刷新页面。 What am I missing? 我想念什么？ Suppose that I have a list of buttons inside a form, which of them has button as type, if I can successfully submit the form will I get all the values set for each button anyway or will I get only the values of the button which type has been set as submit ? 假设我在表单中有一个按钮列表，其中每个按钮都具有类型的button ，如果我可以成功提交表单，无论如何我将获得为每个按钮设置的所有值，或者仅获得该类型的按钮的值被设置为submit ？
3 个解决方案
解决方案1
1 2019-06-13 18:46:00
I would certainly use trigger like this: 我当然会像这样使用trigger ：
$(function () { $("#buy-button").on("click", function () { $("#refresh-form").trigger('submit'); }); });
From jQuery docs on submit() : 从关于Submit（）的 jQuery文档中：
Forms can be submitted either by clicking an explicit
<input type="submit">,<input type="image">, or<button type="submit">, or by pressing Enter when certain form elements have focus.<input type="submit">，<input type="image">或<button type="submit">或在某些表单元素具有焦点时按Enter来<button type="submit">表单。
It seems to me that manually triggering form submission is a better, workable approach. 在我看来，手动触发表单提交是一种更好，可行的方法。
解决方案2
0 2019-06-13 18:49:29
Here is working example we gonna use ajax 这是我们将使用ajax的工作示例
<form id="sortContentImagesForm" method="PATCH" action="/">
<div id="sortContentImages">
</div>
</form>
<button id="submit-sorted-images" class="btn btn-success btn-sm"><i class="fa fa-check"></i>Submit Sorted
Images</button>
<script>
$(document).on('click', '#submit-sorted-images', function (e) {
$("#sortContentImagesForm").submit(); // Submit the form
});
$(document).on('submit', "#sortContentImagesForm", function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
var type = form.attr('method');
$.ajax({
type: type,
url: url,
data: form.serialize(), // serializes the form's elements.
success: function (payload) {
toastr.success("Updated Successfully");
},
error: function (request, status, error) {
toastr.error(request.responseText);
}
});
});
</script>
解决方案3
0 2019-06-13 21:06:50
You can achieve what you want without using JavaScript. 您无需使用JavaScript即可实现所需的功能。 If you set the form attribute in the button tag, it will work as a submit button even if it is placed outside the form: 如果在button标记中设置了form属性，即使它位于表单外部，它也将作为提交按钮起作用：
<form id="refresh-form" action="test.php">
<button id="map-button">Refresh</button>
</form>
<button id="buy-button" form="refresh-form">Buy</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.