Question

我有一个表单和一个位于表单外部的按钮。我想使用按钮提交表单，所以我写了一些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>

Answer 1

之所以不会在表单中提交按钮的数据，是因为该按钮位于form元素之外。要解决此问题，请将按钮放在结束</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

作为操作URL，在此处添加按钮的值：

https://example.com/handler.php?page=2

将其放在表单的action属性中，如下所示：

<form id="testForm" method="get" action="https://example.com/handler.php?page=2">...</form>

然后将提交数据。

Answer 2

您的按钮的值未提交，因为它不被视为表单的一部分（由于位于<form>...</form>标记之外）。

作为Jack's answer的替代方法，这是一种正确的选择，如果由于某种原因您不希望将按钮移到表单中，那么在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

Answer 3

该表单仅提交表单中的命名值。

您可以在点击事件中使用隐藏值并分配按钮值。

$('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>

Answer 4

您可以添加要在表单内发送的带有名称和值的隐藏输入元素。

$('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/

Answer 5

当然，不会发送您的按钮值。如指定的那样，它在表单之外。

因此，当您提交内容时，它不包括在内。

如果希望将其包含在表单中，则不需要任何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>

Answer 6

我认为您可以通过以下逻辑来实现，在隐藏字段中添加按钮名称和值，然后将其附加在表单内。

<!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>

struct Data{
   boost::intrusive::list_member_hook<> node;

   Data* get_next(){
       node.get_next() ???
   }
}

Answer 7

您可以使用.clone()复制按钮，然后使用.append()将按钮的副本插入表单，然后提交表单

$('button').on('click', function() {
  var button = $(this).clone().hide();
  $('#test-form').append(button).submit();
});

表单外的提交/按钮上缺少参数

7 个答案: