Отсутствуют параметры при отправке / кнопка вне формы - PullRequest
Новая
       2

Отсутствуют параметры при отправке / кнопка вне формы

0 голосов
/ 17 декабря 2018

У меня есть форма и кнопка вне формы.Я хочу отправить форму с помощью кнопки, поэтому я написал некоторый код 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 ]

0 голосов
/ 17 декабря 2018

Значение вашей кнопки не отправлено, потому что оно не считается частью формы (из-за нахождения вне тегов <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>

См. Атрибут "form", обсуждаемый в документации: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

0 голосов
/ 17 декабря 2018

Я думаю, что вы можете добиться с помощью следующей логики, добавить имя и значение кнопки в скрытом поле и добавить внутри формы. 

$('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>
0 голосов
/ 17 декабря 2018

Конечно, ваше значение кнопки вам не будет отправлено.Как указано, это за пределами формы.

Поэтому, когда вы отправляете контент, он не включается.

Поместите его в форму, если вы хотите, чтобы он был включен, и тогда вам не нужен 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>
0 голосов
/ 17 декабря 2018

Вы можете добавить скрытый элемент ввода с именем и значением, которое вы хотите отправить внутри формы. 

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

0 голосов
/ 17 декабря 2018

Причина, по которой данные кнопки не будут представлены в форме, заключается в том, что кнопка находится за пределами элемента формы.Чтобы это исправить, поместите кнопку перед закрывающим тегом </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

И поместите это в атрибут действия вашей формы следующим образом: 

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

И тогда данные будут отправлены.

0 голосов
/ 17 декабря 2018

Форма отправляет только именованные значения внутри формы.

Вы можете использовать скрытое значение и назначить значение кнопки в событии щелчка. 

$('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>
0 голосов
/ 17 декабря 2018

Вы можете скопировать кнопку с помощью .clone() и вставить копию кнопки в форму с помощью .append(), а затем отправить форму 

$('button').on('click', function() {
  var button = $(this).clone().hide();
  $('#test-form').append(button).submit();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...