My<cod/>.net
Несколько кнопок отправки в форме HTML
Допустим, вы создаете мастер в форме HTML. Одна кнопка идет назад, а другая вперед. Поскольку кнопка назад появляется первой в markup при нажатии клавиши Enter, она будет использовать эту кнопку для отправки формы.
Пример:
<form>
<!-- put your cursor in this field and press Enter -->
<input type="text" name="field1" />
<!-- This is the button that will submit -->
<input type="submit" name="prev" value="Previous Page" />
<!-- But this is the button that I WANT to submit -->
<input type="submit" name="next" value="Next Page" />
</form>Что я хотел бы сделать, так это решить, какая кнопка используется для отправки формы, когда пользователь нажимает Enter. Таким образом, при нажатии клавиши Enter мастер перейдет на следующую страницу, а не на предыдущую. Вы должны использовать tabindex , чтобы сделать это?
Надеюсь, это поможет. Я просто делаю трюк с 27-ю кнопками справа.
Таким образом, кнопка Prev находится слева от кнопки Next , но Next стоит на первом месте в структуре HTML:
.f {
float: right;
}
.clr {
clear: both;
}<form action="action" method="get">
<input type="text" name="abc">
<div id="buttons">
<input type="submit" class="f" name="next" value="Next">
<input type="submit" class="f" name="prev" value="Prev">
<div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
</div>
</form>Правка: преимущества по сравнению с другими предложениями: нет JavaScript, доступно, обе кнопки остаются type="submit"
Возможно ли для вас изменить предыдущий тип кнопки на такую кнопку:
<input type="button" name="prev" value="Previous Page" />
Теперь следующая кнопка будет по умолчанию, плюс вы также можете добавить атрибут default к нему, чтобы ваш браузер выделил его таким образом:
<input type="submit" name="next" value="Next Page" default />
Надеюсь, это поможет.
Дайте вашим кнопкам отправки такое же имя, как это:
<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />
Когда пользователь нажимает enter и запрос отправляется на сервер, вы можете проверить значение submitButton в своем коде на стороне сервера, который содержит коллекцию пар формы name/value . Например, в классическом ASP:
If Request.Form("submitButton") = "Previous Page" Then
' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
' Code for Next Page
End If
Ссылка: использование нескольких кнопок отправки в одной форме
Если вы действительно хотите, чтобы он работал как диалог установки, как насчет того, чтобы просто сфокусироваться на кнопке "Next" OnLoad. Таким образом, если пользователь нажимает кнопку Return, форма отправляется и переходит вперед. Если они хотят вернуться назад, они могут нажать Tab или нажать на кнопку.
Кевин, это не может быть сделано с чистым HTML. Вы должны полагаться на JavaScript для этого трюка.
Однако если вы разместите две формы на странице HTML, вы можете сделать это.
Форма 1 будет иметь предыдущую кнопку.
Form2 будет иметь любые пользовательские входы + следующая кнопка.
Когда пользователь нажимает Enter в Form2, срабатывает следующая кнопка отправки.
Иногда предоставленное решение @palotasb не является достаточным. Есть случаи использования, когда, например, кнопка "Filter" submit расположена над кнопками, такими как "Next and Previous". Я нашел обходной путь для этого: скопируйте кнопку submit, которая должна действовать как кнопка submit по умолчанию в скрытом div и поместите ее в форму выше любой другой кнопки submit. Технически он будет представлен другой кнопкой при нажатии Enter, а затем при нажатии на видимую кнопку Next. Но так как имя и значение совпадают, то нет никакой разницы в результате.
<html>
<head>
<style>
div.defaultsubmitbutton {
display: none;
}
</style>
</head>
<body>
<form action="action" method="get">
<div class="defaultsubmitbutton">
<input type="submit" name="next" value="Next">
</div>
<p><input type="text" name="filter"><input type="submit" value="Filter"></p>
<p>Filtered results</p>
<input type="radio" name="choice" value="1">Filtered result 1
<input type="radio" name="choice" value="2">Filtered result 2
<input type="radio" name="choice" value="3">Filtered result 3
<div>
<input type="submit" name="prev" value="Prev">
<input type="submit" name="next" value="Next">
</div>
</form>
</body>
</html>
Я бы использовал Javascript, чтобы отправить форму. Функция будет вызвана событием OnKeyPress элемента формы и определит, была ли выбрана клавиша Enter. Если это так, то он представит форму.
Вот две страницы, которые дают методы, как это сделать: 1 , 2 . Основываясь на них, вот пример использования (на основе здесь ):
<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
} else if (e) {
keycode = e.which;
} else {
return true;
}
if (keycode == 13) {
myfield.form.submit();
return false;
} else {
return true;
}
}
//--></SCRIPT>
<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
Кевин,
Это работает без javascript или CSS в большинстве браузеров:
<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>
Firefox, Opera, Safari, Google Chrome все работают.
Как всегда, IE-это проблема.
Эта версия работает, когда javascript включен:
<form>
<p><input type="text" name="field1" /></p>
<p><a href="previous.html">
<button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
<button type="submit">Next Page</button></p>
</form>
Так что недостатком этого решения является:
Предыдущая страница не работает, если вы используете IE с выключенным Javascript.
Имейте в виду, кнопка назад все еще работает!
Если у вас есть несколько активных кнопок на одной странице, то вы можете сделать что-то вроде этого:
Отметьте первую кнопку, которую вы хотите вызвать при нажатии клавиши Enter , как defaultbutton в форме. Для второй кнопки свяжите ее с кнопкой Backspace на клавиатуре. Eventcode Backspace составляет 8.
$(document).on("keydown", function(event) {
if (event.which.toString() == "8") {
var findActiveElementsClosestForm = $(document.activeElement).closest("form");
if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) {
$("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click");
}
}
});<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<form action="action" method="get" defaultbutton="TriggerOnEnter">
<input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" />
<input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" />
</form>Надеюсь, это поможет.
оставьте имя всех кнопок отправки одинаковым -- "prev" единственное отличие-это атрибут value с уникальными значениями. При создании скрипта эти уникальные значения помогут нам выяснить, какая из кнопок отправки была нажата.
И писать нижеизложенного кодирования:
btnID = ""
if Request.Form("prev") = "Previous Page" then
btnID = "1"
else if Request.Form("prev") = "Next Page" then
btnID = "2"
end if
В первый раз, когда я столкнулся с этим, я придумал onclick()/js hack, когда выбор не является prev/next, который мне все еще нравится за его простоту. Все происходит вот так:
@model myApp.Models.myModel
<script type="text/javascript">
function doOperation(op) {
document.getElementById("OperationId").innerText = op;
// you could also use Ajax to reference the element.
}
</script>
<form>
<input type="text" id = "TextFieldId" name="TextField" value="" />
<input type="hidden" id="OperationId" name="Operation" value="" />
<input type="submit" name="write" value="Write" onclick='doOperation("Write")'/>
<input type="submit" name="read" value="Read" onclick='doOperation("Read")'/>
</form>
При нажатии любой кнопки submit она сохраняет нужную операцию в скрытом поле (которое является строковым полем, включенным в модель, с которой связана форма) и передает форму контроллеру, который принимает все решения. В контроллере вы просто пишете::
// Do operation according to which submit button was clicked
// based on the contents of the hidden Operation field.
if (myModel.Operation == "Read")
{
// do read logic
}
else if (myModel.Operation == "Write")
{
// do write logic
}
else
{
// do error logic
}
Вы также можете немного подтянуть его, используя числовые коды операций, чтобы избежать разбора строк, но если вы не играете с Enums, код менее читаем, модифицируем и самодокументируем, а разбор все равно тривиален.
Именно это я и опробовал: 1. Вам нужно убедиться, что вы даете своим кнопкам разные имена 2. Напишите оператор if, который выполнит требуемое действие, если нажата любая из кнопок.
<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
В PHP,
if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}
if(isset($_POST['next']))
{
header("Location: next.html");
die();
}
От https://html.spec.whatwg.org/multipage/forms.html#имплицитные-представления
Кнопка по умолчанию элемента формы является первой кнопкой отправки в дереве заказ, владельцем формы которого является этот элемент формы.
Если агент пользователя поддерживает разрешение пользователю отправлять форму неявно (например, на некоторых платформах нажатие клавиши "enter" во время ввода текста поле ориентировано неявно подает форму)...
Наличие следующего входа типа="submit" и изменение предыдущего входа на тип="button" должно привести к желаемому поведению по умолчанию.
<form>
<input type="text" name="field1" /> <!-- put your cursor in this field and press Enter -->
<input type="button" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
Я столкнулся с этим вопросом, когда пытался найти ответ на практически то же самое, только с элементами управления asp.net, когда я выяснил, что кнопка asp имеет свойство под названием UseSubmitBehavior , которое позволяет вам установить, какой из них выполняет отправку.
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
Просто на случай, если кто-то ищет способ сделать это с помощью кнопки asp.net.
Попробовать это..!
<form>
<input type="text" name="Name" />
<!-- Enter the value -->
<input type="button" name="prev" value="Previous Page" />
<!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" />
<!-- But this is the button that I WANT to submit -->
</form>Я решил очень похожую проблему таким образом:
если
javascriptвключен (в большинстве случаев в настоящее время), то все кнопки отправки "деградируют" до кнопок при загрузке страницы черезjavascript(jquery). События щелчка по кнопке "degraded" типизированные кнопки обрабатываются также черезjavascript.если параметр
javascriptне включен, то форма подается в браузер с несколькими кнопками отправки. В этом случае нажатие enter наtextfieldвнутри формы отправит форму с первой кнопкой вместо предполагаемого значения по умолчанию , но, по крайней мере, форма все еще может использоваться: вы можете отправить как с помощью кнопок prev , так и next .
рабочий пример:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form action="http://httpbin.org/post" method="post">
If javascript is disabled, then you CAN submit the form with button1, button2 or button3.
If you press enter on a text field, then the form is submitted with the first submit button.
If javascript is enabled, then the submit typed buttons without the 'defaultSubmitButton'
style are converted to button typed buttons.
If you press enter on a text field, then the form is submitted with the only submit button
(the one with class defaultSubmitButton)
If you click on any other button in the form, then the form is submitted with that button's
value.
<br />
<input type="text" name="text1" ></input>
<button type="submit" name="action" value="button1" >button 1</button>
<br />
<input type="text" name="text2" ></input>
<button type="submit" name="action" value="button2" >button 2</button>
<br />
<input type="text" name="text3" ></input>
<button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button>
</form>
<script>
$(document).ready(function(){
/* change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */
$('form button[type=submit]').not('.defaultSubmitButton').each(function(){
$(this).attr('type', 'button');
});
/* clicking on button typed buttons results in:
1. setting the form's submit button's value to the clicked button's value,
2. clicking on the form's submit button */
$('form button[type=button]').click(function( event ){
var form = event.target.closest('form');
var submit = $("button[type='submit']",form).first();
submit.val(event.target.value);
submit.click();
});
});
</script>
</body>
</html>Используя приведенный вами пример:
<form>
<input type="text" name="field1" /><!-- put your cursor in this field and press Enter -->
<input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
<input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>
Если вы нажмете на "Previous Page", будет отправлено только значение "prev". Если вы нажмете на "Next Page", будет отправлено только значение "next".
Однако если вы нажмете enter где-нибудь в форме, то ни "prev", ни "next" не будут отправлены.
Таким образом, используя псевдокод, вы можете сделать следующее:
If "prev" submitted then
Previous Page was click
Else If "next" submitted then
Next Page was click
Else
No button was click