Stwardnienie złożyć przyciski w formularzu HTML

głosy
233

Powiedzmy utworzyć Kreator w postaci HTML. Jeden przycisk wraca i idzie do przodu. Ponieważ z powrotem pojawi się przycisk pierwszy w adiustacji po naciśnięciu klawisza Enter będzie użyć tego przycisku, aby wysłać formularz.

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>

Co chciałbym zrobić, to dostać się zdecydować, który przycisk służy do przesłania formularza, gdy użytkownik naciśnie klawisz Enter. W ten sposób, po naciśnięciu klawisza Enter kreator przejdzie do następnej strony, a nie poprzednia. Czy trzeba użyć tabindex, aby to zrobić?

Utwórz 01/08/2008 o 14:01
źródło użytkownik
W innych językach...                            


23 odpowiedzi

głosy
133

Mam nadzieję, że to pomoże. Ja tylko robi trick floating przyciski po prawej stronie.

W ten sposób przycisk Prev jest na lewo od przycisku Dalej jednak Następnie przychodzi pierwsza 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 ponad inne sugestie: brak JavaScript, dostępne, oba przyciski pozostajątype="submit"

Odpowiedział 28/08/2008 o 10:34
źródło użytkownik

głosy
60

Czy byłoby możliwe, aby zmienić poprzednią typ przycisku do przycisku jak poniżej:

<input type="button" name="prev" value="Previous Page" />

Teraz przycisk Dalej będzie domyślnym, plus można również dodać defaultatrybut do niego tak, że Twoja przeglądarka zaprezentuje go tak:

<input type="submit" name="next" value="Next Page" default />

Nadzieję, że pomaga.

Odpowiedział 01/08/2008 o 14:14
źródło użytkownik

głosy
53

Podaruj przyciski przesyłania samą nazwę jak ten:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

Gdy użytkownik naciśnie klawisz Enter, a Zapytanie trafia do serwera, można sprawdzić wartość submitButtonna kod po stronie serwera, który zawiera zbiór formularzy name/valueparach. Na przykład w klasycznej 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

Numer referencyjny: Korzystanie z wielu złożyć przycisków na jednym formularzu

Odpowiedział 01/08/2008 o 14:10
źródło użytkownik

głosy
30

Jeśli fakt, że pierwszy przycisk jest używany domyślnie jest zgodny w różnych przeglądarkach, to dlaczego nie umieścić je właściwej odwrotnie w kodzie źródłowym, a następnie użyć CSS, aby przełączyć ich widocznej pozycji? floatw lewo iw prawo, aby włączyć je wokół wizualnie, na przykład.

Odpowiedział 02/08/2008 o 12:24
źródło użytkownik

głosy
17

Czasami rozwiązanie przewidziane przez @palotasb nie jest wystarczające. Istnieją przypadki, w których stosowanie na przykład „Filter” submit przycisk jest umieszczony powyżej przycisków jak „Dalej i Wstecz”. Znalazłem obejście tego: kopiowanie w przycisk, który musi działać jako domyślny przycisk złożyć w ukrytym div i umieścić go wewnątrz formularza powyżej jakikolwiek inny przycisk Wyślij. Technicznie zostanie przedłożone przez innego przycisku po naciśnięciu Enter następnie po kliknięciu przycisku Dalej w widocznym. Ale ponieważ nazwa i wartość jest taka sama, nie ma różnicy w wynikach.

<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>
Odpowiedział 26/10/2012 o 10:53
źródło użytkownik

głosy
17

Może pracować z CSS

Umieścić je w znacznikach jako kolejny przycisk, następnie poprzedni przycisk obok.

Następnie użyć CSS je umieszczać pojawiać się tak, jak chcesz

Odpowiedział 16/09/2008 o 13:16
źródło użytkownik

głosy
17

Kevin, nie można tego zrobić z czystym HTML. Musisz polegać na JavaScript dla tej sztuczki.

Jednakże, jeśli umieścić dwa formularze na stronie HTML można to zrobić.

Form1 miałby poprzedni przycisk.

Form2 miałby żadnych wejść użytkownika + kolejny przycisk.

Gdy użytkownik naciśnie Enterna Form2, następny złożyć przycisk będzie ogień.

Odpowiedział 26/08/2008 o 04:44
źródło użytkownik

głosy
17

Jeśli naprawdę po prostu chcesz go do pracy jak okna instalacji, co tylko skupienia się na „Dalej” onload. W ten sposób, jeśli użytkownik wciśnie Enter, forma podnosi i idzie do przodu. Jeśli chcą wrócić mogą uderzyć Tab lub kliknij na przycisku.

Odpowiedział 26/08/2008 o 04:41
źródło użytkownik

głosy
15

Chciałbym użyć JavaScript, aby wysłać formularz. Funkcja zostanie wywołane przez zdarzenie onkeypress elementu formularza i będzie wykryć, czy klawisz Enter został wybrany. Jeśli tak jest, to wysłać formularz.

Oto dwie strony, które dają techniki, jak to zrobić: 1 , 2 . W oparciu o te, tutaj jest przykładem wykorzystania (w oparciu o 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)" />
Odpowiedział 03/08/2008 o 14:12
źródło użytkownik

głosy
14

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>

Firefox, Opera, Safari, Google Chrome wszystkie prace.
Jak zawsze, IE jest problem.

Ta wersja działa, gdy jest włączona obsługa 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>

Więc wadą tego rozwiązania jest:
Poprzednia strona nie działa w przypadku korzystania z IE JavaScript off.
Pamiętaj, przycisk wstecz nadal działa!

Odpowiedział 16/09/2008 o 12:19
źródło użytkownik

głosy
13

Jeśli masz kilka aktywnych przycisków na jednej stronie, to możesz zrobić coś takiego:

Mark pierwszy przycisk chcesz wyzwala na Enternaciśnięcie klawisza jak defaultButton na formularzu. Dla drugiego przycisku skojarzyć go do Backspaceprzycisku na klawiaturze. Backspaceeventcode wynosi 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>

Mam nadzieję że to pomoże.

Odpowiedział 14/03/2014 o 15:51
źródło użytkownik

głosy
12

Innym prostym rozwiązaniem byłoby umieścić przycisk Wstecz po naciśnięciu przycisku złożyć w kodzie HTML lecz unoszą go w lewo tak, że pojawi się na stronie przed przycisk Wyślij.

Zmiana kolejności kartę powinno być wszystko to trwa do osiągnięcia tego celu. Nie komplikuj.

Odpowiedział 14/10/2014 o 17:02
źródło użytkownik

głosy
12

Zmiana kolejności kartę powinno być wszystko to trwa do osiągnięcia tego celu. Nie komplikuj.

Innym prostym rozwiązaniem byłoby umieścić przycisk Wstecz po naciśnięciu przycisku złożyć w kodzie HTML lecz unoszą go w lewo tak, że pojawi się na stronie przed przycisk Wyślij.

Odpowiedział 27/11/2012 o 23:27
źródło użytkownik

głosy
11

zachować nazwę wszystkim przedstawić takie same przyciski - „prev” Jedyną różnicą jest valueatrybut o unikalnych wartościach. Kiedy tworzymy scenariusz, te unikalne wartości pomogą nam zorientować się, który z przycisków złożą został naciśnięty.

I napisać follwing kodowanie:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Odpowiedział 05/06/2012 o 10:19
źródło użytkownik

głosy
10

Po raz pierwszy wpadłem na to wpadłem onclick () / js włamać gdy wybory nie są wstecz / dalej, że nadal lubię jego prostoty. To 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>

Kiedy jeden przycisk submit kliknięciu przechowuje żądaną operację w ukrytym polu (który jest pole ciąg zawarty w modelu formularz jest związany z) i przekazuje formularz do sterownika, który robi wszystko decydującym. W kontrolerze, wystarczy napisać:

// 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 też dokręcić to lekko używając numerycznych kodów operacji, aby uniknąć analizowania ciąg, ale jeśli grasz z wyliczenia, kod jest mniej czytelny, modyfikować i samodokumentujące i parsowanie jest trywialne, tak.

Odpowiedział 03/09/2015 o 13:30
źródło użytkownik

głosy
10

od https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

przycisk domyślny element formularza jest pierwszym złożyć przycisk w kolejności drzewa, którego właściciel forma jest to, że element formularza.

Jeśli aplikacja kliencka obsługuje pozwalając użytkownikowi złożyć formularz w sposób dorozumiany (na przykład na niektórych platformach naciśnięcie klawisza „Enter”, podczas gdy pole tekstowe koncentruje się niejawnie przesyła formularz) ...

Mając obok wejścia być type = „submit” i zmieniając poprzedni wejście do type = „button” powinno dać pożądany zachowanie domyślne.

<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>
Odpowiedział 28/03/2015 o 21:05
źródło użytkownik

głosy
10

To co próbowałem się: 1. Należy upewnić się, dasz przycisków różnymi nazwami 2. napisać oświadczenie, że jeśli zrobi wymaganych działań, jeśli albo przycisk w 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();

}
Odpowiedział 03/03/2014 o 07:16
źródło użytkownik

głosy
8

Natknąłem się na to pytanie, próbując znaleźć odpowiedź na w zasadzie to samo, tylko z kontrolkami ASP.NET, kiedy zorientowali się, że przycisk asp ma właściwość o nazwie UseSubmitBehavior, która pozwala określić, które jeden robi składania.

<asp:Button runat="server" ID="SumbitButton" UseSubmitBehavior="False" Text="Submit" />

Tylko w przypadku, gdy ktoś patrzy na przycisk asp.net drodze, aby to zrobić.

Odpowiedział 24/03/2016 o 17:29
źródło użytkownik

głosy
7

Z javascript (jQuery tutaj), można wyłączyć przycisk wstecz przed złożeniem formularza.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Odpowiedział 14/08/2015 o 10:01
źródło użytkownik

głosy
0

Można użyć Tabindex, aby rozwiązać ten problem, należy także zmienić kolejność przycisku byłby bardziej skuteczny sposób na osiągnięcie tego celu. Zmienić kolejność przycisku i dodać floatwartości do przypisania im pożądaną pozycję, którą chcesz wyświetlić w HTMLwidoku.

Odpowiedział 25/04/2018 o 06:28
źródło użytkownik

głosy
0

I rozwiązać bardzo podobny problem w ten sposób:

  1. jeśli javascriptjest włączona (obecnie w większości przypadków), a następnie złożyć wszystkie przyciski są „ zdegradowany ” do przycisków na stronie obciążenia poprzez javascript(jQuery). Kliknij wydarzenia dotyczące „ zdegradowanych ” przycisk wpisane przyciski są obsługiwane również przez javascript.

  2. jeśli javascriptnie jest włączona wtedy forma podawane jest do przeglądarki z wieloma przedłożyć przyciski. W tym przypadku uderzenia Enter na textfieldw formie przedstawi formularz z pierwszego przycisku zamiast zamierzonego domyślnie , ale przynajmniej forma jest nadal użyteczny: można złożyć zarówno z poprz i kolejnych przycisków.

Przykład pracy:

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

Odpowiedział 09/01/2018 o 15:26
źródło użytkownik

głosy
0

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>

Odpowiedział 29/09/2017 o 04:58
źródło użytkownik

głosy
-3

Na przykładzie dał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” tylko wartości „prev” zostanie przedstawiony. Jeśli klikniesz na „Next Page” tylko zostanie przedstawiony wartość „next”.

Jeśli jednak naciśnij enter gdzieś na formularzu, ani „wstecz”, ani „next” zostanie przedstawiony.

Więc za pomocą pseudo kod można wykonać następujące czynności:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Odpowiedział 05/08/2008 o 16:08
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more