在表单外的提交/按钮上缺少参数
[英]Missing parameters on submit / button outside form
问题描述
I've got a form and a button outside the form. 
我在表格外面有一个表格和一个按钮。 I want to submit the form using the button, so i have written some jquery code. 我想使用按钮提交表单，所以我写了一些jquery代码。 Everything seems to work fine, except one thing. 除了一件事，一切似乎都很好。 After submit action button's name and value aren't being send (in this case: page=2). 提交操作后，按钮的名称和值未发送（在这种情况下：page = 2）。 How can I fix it? 我该如何解决？ Thanks in advance for help. 在此先感谢您的帮助。
$('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
The reason the button's data won't be submitted in the form is because the button is outside the form element. 按钮的数据不会在表单中提交的原因是因为按钮位于表单元素之外。 To fix this, place the button before the closing </form> tag so your code looks like so: 要解决此问题，请将按钮放在结束</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>
Of course if you really wanted to add the button'a value to the handling page without the button being inside the form, you could just add this to the URL: 当然，如果您真的想将button'a值添加到处理页面而不将按钮放在表单内，您可以将其添加到URL：
Instead of having 而不是拥有
https://example.com/handler.php
As your action URL, add the button's values here: 作为您的操作网址，请在此处添加按钮的值：
https://example.com/handler.php?page=2
And put that in your form's action attribute like so: 并将其放在表单的action属性中，如下所示：
<form id="testForm" method="get" action="https://example.com/handler.php?page=2">...</form>
And then the data will be submitted. 然后提交数据。
解决方案2
2 已采纳 2018-12-17 13:08:26
Your button's value isn't submitted because it isn't considered part of the form (due to being outside the <form>...</form> tags). 您的按钮的值未提交，因为它不被视为表单的一部分（由于位于<form>...</form>标记之外）。
As an alternative to Jack's answer which is one correct way to do it, if for some reason you don't wish to move the button inside the form, then in HTML5 another option you have is to associate the button with the form via an attribute. 作为Jack的答案的替代方法，这是一种正确的方法，如果由于某种原因您不希望在表单内移动按钮，那么在HTML5中，您有另一个选项，即通过属性将按钮与表单相关联。 This allows the button to be considered as part of the form despite being outside the tags. 这允许按钮被视为表单的一部分，尽管它在标签之外。
As an added bonus, once the button is part of the form, you don't need any JavaScript to make it work - it will automatically be considered as a "submit" button. 作为一个额外的好处，一旦按钮是表单的一部分，您不需要任何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>
See the "form" attribute discussed in the documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button 请参阅文档中讨论的“表单”属性： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/button
解决方案3
0 2018-12-17 13:00:07
The form only submits the named values within the form. 表单仅在表单中提交指定的值。
You could use a hidden and assign the button value in the click event. 您可以使用隐藏并在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
You can add hidden input element with name and value that you want to send inside the form. 您可以添加隐藏的输入元素，其中包含要在表单内发送的名称和值。
$('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>
Or else if you can place the submit button inside the form, you can remove the code for stimulating the submit action. 或者，如果您可以在表单中放置提交按钮，则可以删除用于激发提交操作的代码。 https://jsfiddle.net/yh4yvoe3/8/ https://jsfiddle.net/yh4yvoe3/8/
解决方案5
0 2018-12-17 13:04:18
Of course your button value you won't be sent. 当然，您的按钮值不会被发送。 As specified, it's outside the form. 如规定，它在表格之外。
Therefore when you submit the content, it isn't included. 因此，当您提交内容时，不包括在内。
Put it inside the form if you want it to be included, and then you don't need any jQuery or JavaScript. 如果要包含它，请将其放在表单中，然后您不需要任何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
I think you can achieve by the following logic, add button name and value in the hidden field and append inside the form. 我认为你可以通过以下逻辑实现，在隐藏字段中添加按钮名称和值，并附加到表单内部。
$('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
You can copy button using .clone() and insert copy of button into form using .append() and then submit the form 您可以使用.clone()复制按钮，并使用.append()将按钮的副本插入到表单中，然后提交表单
$('button').on('click', function() {
var button = $(this).clone().hide();
$('#test-form').append(button).submit();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.