我需要通过单击表单外的按钮来提交表单。这是简单的页面：<!DOCTYPE html><html><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>当我点击buy-button它不会刷新页面。我错过了什么？假设我在表单中有一个按钮列表，其中哪些具有button类型，如果我可以成功提交表单，我将获得为每个按钮设置的所有值，还是只获得类型具有的按钮的值被设置为submit？
3 回答
慕雪6442864
TA贡献1812条经验 获得超5个赞
这是我们将使用 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>
幕布斯6054654
TA贡献1876条经验 获得超7个赞
您可以在不使用 JavaScript 的情况下实现您想要的。如果您form在按钮标签中设置该属性，即使它被放置在表单之外，它也会作为提交按钮工作：
<form id="refresh-form" action="test.php">
<button id="map-button">Refresh</button>
</form>
<button id="buy-button" form="refresh-form">Buy</button>
添加回答
举报
0/150
提交
取消