我有一个表单和表单外的一个按钮。我想用按钮提交表单，所以我写了一些jquery代码。除了一件事外，一切似乎都很好。提交后，操作按钮的名称和值不会被发送(在这种情况下：page=2(。我该怎么修？提前感谢您的帮助。
$('button').on('click', function() {
$('#test-form').submit();
});<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example">
</form>
<button name="page" value="2">2</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<html>按钮的数据不会在表单中提交的原因是按钮在表单元素之外。要解决此问题，请将按钮放在关闭</form>标记之前，这样您的代码看起来是这样的：
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example">
<button name="page" value="2">2</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<html>
当然，如果你真的想在表单中没有按钮的情况下将按钮的值添加到处理页面，你可以将其添加到URL:
而不是
https://example.com/handler.php
作为您的操作URL，在此处添加按钮的值：
https://example.com/handler.php?page=2
并将其放入表单的动作属性中，如下所示：
<form id="testForm" method="get" action="https://example.com/handler.php?page=2">...</form>
然后将提交数据。
您的按钮的值没有提交，因为它不被视为表单的一部分(因为它在<form>...</form>标记之外(。
如果出于某种原因你不想在表单中移动按钮，那么在HTML5中，你可以选择通过属性将按钮与表单关联起来。这允许按钮被视为表单的一部分，尽管它在标签之外。
额外的好处是，一旦按钮成为表单的一部分，您就不需要任何JavaScript来使其工作——它将自动被视为"提交"按钮。
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example" />
</form>
<button name="page" value="2" form="test-form">2</button>
</script>
</body>
<html>请参阅文档中讨论的"表单"属性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
表单只提交表单中的命名值。
您可以使用隐藏并在单击事件中指定按钮值。
$('button').on('click', function() {
$('#button_value').val($(this).val());
$('#test-form').submit();
});<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example" />
<input type="hidden" name="page-no" id="button_value" />
</form>
<button name="page" value="2">2</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<html>当然，您的按钮值不会被发送。按照规定，它在表单之外。
因此，当您提交内容时，它不包括在内。
如果你想包含它，就把它放在表单中，这样你就不需要任何jQuery或JavaScript了。
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example">
<button type="submit" name="page" value="2">2</button>
</form>
</body>
<html>您可以添加隐藏的输入元素，其中包含要在表单中发送的名称和值。
$('button').on('click', function() {
$('#test-form').submit();
});<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example">
<input type="hidden" name="page" value="2">
</form>
<button>Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<html>或者，如果您可以将提交按钮放置在表单中，则可以删除用于刺激提交操作的代码。https://jsfiddle.net/yh4yvoe3/8/
我认为您可以通过以下逻辑实现，在隐藏字段中添加按钮名称和值，并在表单中追加。
$('button').on('click', function() {
$('#test-form').append($("<input/>", {
name: this.name,
value: this.value,
type: 'hidden'
})).submit();
});<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form method="get" action="#" id="test-form">
<input type="text" name="example">
</form>
<button name="page" value="2">2</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<html>您可以使用.clone()复制按钮，并使用.append()将按钮的副本插入表单，然后提交表单
$('button').on('click', function() {
var button = $(this).clone().hide();
$('#test-form').append(button).submit();
});