Wiele przycisków Wyślij w formularzu HTML
Załóżmy, że tworzysz kreatora w formie HTML. Jeden przycisk wraca, a drugi idzie do przodu. Ponieważ przycisk wstecz pojawia się jako pierwszy w znacznikach po naciśnięciu klawisza Enter, użyje on tego przycisku Do przesłania formularza.
Przykład:
<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>To, co chciałbym zrobić, to zdecydować, który przycisk jest używany do przesłania formularza, gdy użytkownik naciśnie Enter. W ten sposób po naciśnięciu klawisza Enter Kreator przejdzie do następnej strony, a nie do poprzedniej. Czy musisz użyć tabindex, aby to zrobić?
23 answers
Mam nadzieję, że to pomoże. Robię sztuczkę z przyciskami po prawej stronie.
W ten sposób przycisk Prev jest na lewo od przycisku Next, ale następny jest pierwszy w kodzie 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>Edit: korzyści nad innymi sugestiami: brak JavaScript, dostępny, oba przyciski pozostają type="submit"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-15 21:23:34
Czy istnieje możliwość zmiany poprzedniego typu przycisku na taki:
<input type="button" name="prev" value="Previous Page" />
Teraz Następny przycisk będzie domyślny, dodatkowo możesz dodać do niego atrybut default, aby twoja przeglądarka podświetliła go tak:
<input type="submit" name="next" value="Next Page" default />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-06 22:50:09
Nadaj przyciskom submit taką samą nazwę:
<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />
Gdy użytkownik naciśnie enter i Request przejdzie do serwera, możesz sprawdzić wartość submitButton w kodzie po stronie serwera, który zawiera zbiór par formularzy name/value. Na przykład w klasycznym 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
Referencja: używanie wielu przycisków wyślij na jednym formularzu
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-14 07:55:42
Jeśli fakt, że pierwszy przycisk jest używany domyślnie jest spójny w różnych przeglądarkach, dlaczego nie umieścić je we właściwym kierunku w kodzie źródłowym, a następnie użyć CSS, aby zmienić ich pozorne pozycje? float je w lewo i w prawo, aby zmienić je wizualnie, na przykład.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-14 12:21:12
Jeśli naprawdę chcesz, aby działało jak okno instalacyjne, co powiesz na to, aby skupić się na przycisku" Następny " OnLoad. W ten sposób, jeśli użytkownik naciśnie Return, formularz przesyła i przechodzi do przodu. Jeśli chcą wrócić, mogą nacisnąć Tab lub kliknąć przycisk.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-26 03:41:44
Może pracować z CSS
Umieść je w znacznikach jako następny przycisk, a następnie poprzedni przycisk Następny.
Następnie użyj CSS, aby ustawić je tak, aby wyglądały tak, jak chcesz
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 12:16:05
Czasami podane przez @palotasb rozwiązanie nie jest wystarczające. Istnieją przypadki użycia, w których na przykład przycisk "Filtr" submit jest umieszczony nad przyciskami takimi jak"Następny i Poprzedni". Znalazłem obejście tego problemu: Skopiuj przycisk submit, który musi działać jako domyślny przycisk submit w ukrytym div I umieścić go w formularzu nad każdym innym przyciskiem submit. Technicznie będzie on przesłany przez inny przycisk po naciśnięciu Enter, a następnie po kliknięciu widocznego przycisku Next. Ale ponieważ nazwa i wartość są takie same, nie ma różnicy w wyniku.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-26 09:53:08
Kevin, nie można tego zrobić z czystym HTML. Musisz polegać na JavaScript dla tej sztuczki.
Jeśli jednak umieścisz dwa formularze na stronie HTML, możesz to zrobić.
Form1 będzie miał poprzedni przycisk.
Form2 miałby dowolne wejścia użytkownika + przycisk Następny.
Gdy użytkownik naciśnie Enter W Form2, Następny przycisk submit zostanie uruchomiony.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-01 18:41:04
Użyłbym Javascript do przesłania formularza. Funkcja zostanie wywołana przez Zdarzenie OnKeyPress elementu formularza i wykryje, czy klawisz Enter został wybrany. W takim przypadku prześle formularz.
Oto dwie strony, które dają techniki, jak to zrobić: 1, 2. Na ich podstawie, oto przykład użycia (na podstawie tutaj):
<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)" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-03 13:12:21
Kevin,
To działa bez javascript lub CSS w większości przeglądarek:
<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>
Jak zawsze problemem jest IE.
Ta wersja działa, gdy javascript jest włączony:
<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>
Więc wadą tego rozwiązania jest:
Poprzednia strona nie działa, jeśli używasz IE z wyłączonym Javascript.
Przycisk Wstecz nadal działa!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-09-16 12:12:37
Jeśli masz kilka aktywnych przycisków na jednej stronie, możesz zrobić coś takiego:
Zaznacz pierwszy przycisk, który chcesz wyzwalać na wprowadź klawisz jako domyślny przycisk w formularzu. Dla drugiego przycisku powiązać go z Backspace Przycisk na klawiaturze. Backspace kod zdarzenia to 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-11 20:50:34
Zmiana kolejności zakładek powinna wystarczyć, aby to osiągnąć. To proste.
Inną prostą opcją byłoby umieszczenie przycisku Wstecz po przycisku submit w kodzie HTML, ale przesuń go w lewo, aby pojawił się na stronie przed przyciskiem submit.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-27 22:27:41
Inną prostą opcją byłoby umieszczenie przycisku Wstecz po przycisku submit w kodzie HTML, ale przesuń go w lewo, aby pojawił się na stronie przed przyciskiem submit.
Zmiana kolejności zakładek powinna wystarczyć, aby to osiągnąć. To proste.
Nazwa wszystkich przycisków submit jest taka sama -- "prev" jedyną różnicą jest atrybut value z unikalnymi wartościami. Kiedy tworzymy skrypt, te unikalne wartości pomogą nam dowiedzieć się, który z przycisków submit został naciśnięty.
I napisać:
btnID = ""
if Request.Form("prev") = "Previous Page" then
btnID = "1"
else if Request.Form("prev") = "Next Page" then
btnID = "2"
end if
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-14 12:22:00
To jest to, co próbowałem: 1. Musisz upewnić się, że nadajesz przyciskom różne nazwy 2. Napisz instrukcję if, która wykona wymaganą akcję, jeśli któryś z przycisków zostanie kliknięty.
<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>
W PHP,
if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}
if(isset($_POST['next']))
{
header("Location: next.html");
die();
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-03 06:16:35
Z https://html.spec.whatwg.org/multipage/forms.html#implicit-submission
Domyślny przycisk elementu formularza jest pierwszym przyciskiem Wyślij w drzewie zamówienie, którego właścicielem jest ten element formularza.
Jeśli agent użytkownika umożliwia użytkownikowi przesłanie formularza (np. na niektórych platformach naciśnięcie klawisza "enter" podczas gdy tekst field is focused implicite submitted the form)...
O następnym wejściu be type= "submit" i zmiana poprzedniego wejścia na type = "button" powinna dać pożądane domyślne zachowanie.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-28 21:05:52
Po raz pierwszy wpadłem na to i wymyślił onclick () / js hack, gdy wybory nie są prev / next, że nadal lubię za jego prostotę. Idzie tak:
@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>
Po kliknięciu przycisku submit zapisuje żądaną operację w ukrytym polu (które jest polem łańcuchowym zawartym w modelu, z którym formularz jest powiązany) i przesyła formularz do kontrolera, który podejmuje wszystkie decyzje. W kontrolerze po prostu piszesz:
// 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
}
Można również dokręcić to się nieco przy użyciu numerycznych kodów operacji, aby uniknąć parsowania łańcuchów, ale jeśli nie grasz z Enums, kod jest mniej czytelny, modyfikowalny i samodokumentujący, a parsowanie jest trywialne, w każdym razie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-03 13:37:04
Natknąłem się na to pytanie, próbując znaleźć odpowiedź na zasadniczo to samo, tylko z asp.net controls, kiedy zorientowałem się, że przycisk asp ma właściwość o nazwie UseSubmitBehavior, która pozwala ustawić, który z nich robi przesyłanie.
<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />
Na wypadek, gdyby ktoś szukał asp.net przycisk sposób, aby to zrobić.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-24 17:29:22
Z javascript (tutaj jQuery), można wyłączyć przycisk prev przed przesłaniem formularza.
$('form').on('keypress', function(event) {
if (event.which == 13) {
$('input[name="prev"]').prop('type', 'button');
}
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-14 10:01:14
Rozwiązałem bardzo podobny problem w ten sposób:
Jeśli
javascriptjest włączone (w większości przypadków obecnie), to wszystkie przyciski submit są " zdegradowane" do przycisków przy ładowaniu strony poprzezjavascript(jquery). Kliknij na przycisk " zdegradowany " przyciski wpisane są obsługiwane również przezjavascript.Jeśli
javascriptnie jest włączona, formularz jest obsługiwany przez przeglądarkę za pomocą wielu przycisków wyślij. W tym przypadku naciśnięcie enter natextfieldw formularzu spowoduje wysłanie formularza z pierwszym przyciskiem zamiast zamierzonego domyślnym , ale przynajmniej formularz jest nadal użyteczny: możesz przesłać za pomocą obu przycisków prev i next.
Przykład roboczy:
<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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-06 10:32:08
Spróbuj tego..!
<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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-11 20:51:12
Możesz użyć Tabindex, aby rozwiązać ten problem, również zmiana kolejności przycisków byłaby bardziej efektywnym sposobem osiągnięcia tego celu. Zmień kolejność przycisków i dodaj wartości float, Aby przypisać im żądaną pozycję, którą chcesz pokazać w widoku HTML.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-25 06:28:32
Używając przykładu, który podałeś:
<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>
Jeśli klikniesz na "Poprzednia strona", zostanie wysłana tylko wartość" prev". Jeśli klikniesz na "Next Page", zostanie wysłana tylko wartość" next".
Jeśli jednak naciśniesz enter gdzieś w formularzu, ani "prev", ani" next " nie zostaną wysłane.
Więc używając pseudo kodu można zrobić:
If "prev" submitted then
Previous Page was click
Else If "next" submitted then
Next Page was click
Else
No button was click
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-08-05 15:08:42