在表單外的提交/按鈕上缺少參數
[英]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.