在表单外的提交/按钮上缺少参数
[英]Missing parameters on submit / button outside form
问题描述
我在表格外面有一个表格和一个按钮。 我想使用按钮提交表单，所以我写了一些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>
7 个解决方案
解决方案1
3 2018-12-17 13:00:08
按钮的数据不会在表单中提交的原因是因为按钮位于表单元素之外。 要解决此问题，请将按钮放在结束</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>
当然，如果您真的想将button'a值添加到处理页面而不将按钮放在表单内，您可以将其添加到URL：
而不是拥有
https://example.com/handler.php
作为您的操作网址，请在此处添加按钮的值：
https://example.com/handler.php?page=2
并将其放在表单的action属性中，如下所示：
<form id="testForm" method="get" action="https://example.com/handler.php?page=2">...</form>
然后提交数据。
解决方案2
2 已采纳 2018-12-17 13:08:26
您的按钮的值未提交，因为它不被视为表单的一部分（由于位于<form>...</form>标记之外）。
作为Jack的答案的替代方法，这是一种正确的方法，如果由于某种原因您不希望在表单内移动按钮，那么在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
解决方案3
0 2018-12-17 13:00:07
表单仅在表单中提交指定的值。
您可以使用隐藏并在click事件中指定按钮值。
$('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>
解决方案4
0 2018-12-17 13:01:30
您可以添加隐藏的输入元素，其中包含要在表单内发送的名称和值。
$('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/
解决方案5
0 2018-12-17 13:04:18
当然，您的按钮值不会被发送。 如规定，它在表格之外。
因此，当您提交内容时，不包括在内。
如果要包含它，请将其放在表单中，然后您不需要任何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>
解决方案6
0 2018-12-17 13:11:50
我认为你可以通过以下逻辑实现，在隐藏字段中添加按钮名称和值，并附加到表单内部。
$('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>
解决方案7
-1 2018-12-17 12:57:14
您可以使用.clone()复制按钮，并使用.append()将按钮的副本插入到表单中，然后提交表单
$('button').on('click', function() {
var button = $(this).clone().hide();
$('#test-form').append(button).submit();
});
在表单外点击按钮以调用表单中的“提交”按钮上的“提交”
[英]Hitting button outside a form to call submit on Submit button in a form
在外部提交按钮中使用“formnovalidate”进行 jQuery 验证<form>
[英]jQuery Validation with "formnovalidate" in submit button outside the <form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.