点击按钮提交表单
我需要通过单击表单外的按钮来提交表单。这是简单的页面：
<!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？
慕桂英33893313回答
-
手掌心
我肯定会这样使用trigger： $(function () { $("#buy-button").on("click", function () { $("#refresh-form").trigger('submit'); }); });来自submit()上的 jQuery 文档：可以通过单击明确的<input type="submit">、<input type="image">或<button type="submit">或在某些表单元素具有焦点时按 Enter来提交表单。在我看来，手动触发表单提交是一种更好、可行的方法。 -
慕雪6442864
这是我们将使用 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
您可以在不使用 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>
随时随地看视频慕课网APP
相关分类
JavaScript