Vă mulțumim pentru susținere

Butoane de trimitere multiple într-un formular HTML

Să presupunem că creați un Expert într-un formular HTML. Un buton se întoarce și unul merge înainte. Deoarece butonul înapoi apare mai întâi în marcaj atunci când apăsați pe Enter, va folosi acel buton pentru a trimite formularul.

Exemplu:


 

Ceea ce aș vrea să fac este să decid ce buton este folosit pentru a trimite formularul când un utilizator apasă pe Enter. În acest fel, când apăsați Enter, expertul va trece la pagina următoare, nu la cea anterioară. Trebuie să utilizați tabindex pentru a face acest lucru?

0
adăugat editat

22 răspunsuri

Ar fi posibil să schimbați tipul butonului anterior într-un buton ca acesta:


Acum, butonul Următorul ar fi implicit, plus puteți adăuga, de asemenea, atributul implicit , astfel încât browser-ul dvs. să îl evidențieze astfel:


Sper că vă ajută.

0
adăugat
@BrettCaswell: schimbarea tipului acestor butoane este o solutie proasta (a se vedea comentariul meu anterior). Nu există un atribut implicit valabil pentru etichetele input (așa cum am spus mai devreme) în HTML, iar browserele (populare) NU evidențiază butonul care are acest atribut nu există o implementare nestandardă a acestui atribut - așa că încă nu știu ce a vorbit @Wally Lawless și de ce acest răspuns este atât de supraestimat. Există un singur atribut valid implicit introdus în HTML5, dar numai pentru eticheta :
adăugat autor Sk8erPeter
@Jonas: da, type = "button" nu trimite formularul, type = "submit" , dar schimbarea tipului acestor butoane nu este o soluție , pentru că aceste butoane ar trebui să se comporte în același mod - întrebarea OP a fost cum se face "Next" butonul implicit pentru apăsarea tastei Enter. Și există o soluție posibilă în răspunsul acceptat.
adăugat autor Sk8erPeter
Care este atributul implicit despre care vorbești? Nu există niciun atribut "implicit", care ar fi valabil: w3.org/html/wg/drafts/html/master/… nu în HTML5, HTML 4.01 Transitional / Strict, XHTML 1.0 Strict). Și nu văd de ce schimbarea tipului de intrare de la trimite la butonul ar fi mai bine. Puteți avea mai multe elemente de introducere a tipurilor de intrări într-o singură formă fără o
adăugat autor Sk8erPeter
mi-am dat seama că a oferit un răspuns în acest răspuns ... transformând prima intrare într-un buton astfel încât a doua intrare să ridice evenimentul de clic atunci când tasta Enter este apăsată ... deși .. încă condiționată
adăugat autor Brett Caswell
@ Sk8erPeter, @Jonas .... hmm .. Am bănui că acest atribut implicit este un atribut Global; enumerate atribut .. care este legat de enumerare afișează: w3.org/html/wg/drafts/html/master/… . în afară de acel punct .. aspectul butonului acestui răspuns nu este un răspuns .. este o sugestie condiționată sau o interogare întrebare în sine .
adăugat autor Brett Caswell
Având o intrare de tipul "buton" nu execută acțiunea formei. Poți avea un onclick sau altceva, executând astfel o altă funcție decât acțiunea formularului "implicit" (care este executată prin apăsarea butonului "trimite"). Aceasta este ceea ce căutam și de aceea l-am susținut. Nu pot vorbi pentru atributul "implicit", nu a făcut parte din problema mea;) mulțumesc pentru clarificări.
adăugat autor Jonas

Dați butoanele dvs. de trimitere același nume ca acesta:



Atunci când utilizatorul apasă pe tastatură și cererea Cerere merge la server, puteți verifica valoarea submitButton din codul de pe server care conține o colecție de formular name / valoare . De exemplu, în ASP clasic:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for Previous Page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for Next Page
End If

Reference: Using multiple submit buttons on a single form

0
adăugat
Acesta nu este ceea ce a cerut utilizatorul. Utilizatorul a vrut să știe cum să controleze care buton de trimitere într-o formă este activat când enter este apăsat ie. care este butonul implicit.
adăugat autor kosoant
nu funcționează într-o aplicație I18n unde nici măcar nu știți eticheta butonului.
adăugat autor Chris

Dacă se utilizează în mod prestabilit primul buton în mod prestabilit în browsere, de ce să nu le puneți calea cea dreaptă în codul sursă, apoi să utilizați CSS pentru a comuta pozițiile aparent? float le stânga și dreapta pentru a le schimba vizual, de exemplu.

0
adăugat

Aș folosi Javascript pentru a trimite formularul. Funcția ar fi declanșată de evenimentul OnKeyPress al elementului de formă și ar detecta dacă a fost selectată tasta Enter. În acest caz, va trimite formularul.

Iată două pagini care oferă tehnici pentru a face acest lucru: 1 , 2 . Pe baza acestora, iată un exemplu de utilizare (bazat pe aici ):





0
adăugat
Ce se întâmplă dacă javascript-ul este dezactivat?
adăugat autor Jon Winstanley
@Marecky Nu trebuie să comenteze JS. Acestea sunt ignorate în parsarea conținutului
adăugat autor leemes
Nu trebuie să utilizați pentru a comenta JS, aceste etichete nu sunt jetoane de limbaj Javascript
adăugat autor Marecky

Folosind exemplul pe care l-ai dat:


Dacă faceți clic pe "Pagina anterioară" va fi trimisă doar valoarea "prev". Dacă faceți clic pe "Pagina următoare", va fi trimisă numai valoarea "următoare".

Dacă, totuși, apăsați enter undeva în formular, nu vor fi trimise nici "prev", nici "următorul".

Prin utilizarea codului pseudo, puteți face următoarele:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
0
adăugat
Nu există niciodată o situație (fără utilizarea lui js) când nici unul dintre butoane nu este declanșat. Dacă apăsați ENTER, primul buton din cod va prinde evenimentul. În exemplul html este butonul prev-buton.
adăugat autor SimonSimCity

Poate lucra cu CSS

Puneți-le în marcaj ca primul buton următor, apoi butonul anterior următor.

Apoi folosiți CSS pentru a le poziționa astfel încât să apară așa cum doriți

0
adăugat

Uneori soluția furnizată de @palotasb nu este suficientă. Există cazuri de utilizare în care, de exemplu, un buton de trimitere "Filtru" este plasat deasupra butoanelor precum "Următorul și anterior". Am găsit o soluție pentru acest lucru: copiați butonul de trimitere care trebuie să acționeze ca buton implicit de trimitere într-un div ascuns și plasați-l în interiorul formularului de deasupra oricărui alt buton de trimitere. Din punct de vedere tehnic, acesta va fi trimis printr-un alt buton atunci când apăsați pe Enter atunci când faceți clic pe butonul Următor vizibil. Dar, deoarece numele și valoarea sunt aceleași, nu există nici o diferență în rezultat.




Filtered results

Filtered result 1 Filtered result 2 Filtered result 3
0
adăugat

Am dat peste această întrebare atunci când am încercat să găsească un răspuns la același lucru, doar cu controalele asp.net, când am dat seama că butonul asp are o proprietate numită UseSubmitBehavior care vă permite să stabiliți ce unul face trimiterea.


Doar în cazul în care cineva caută butonul asp.net ca să o facă.

0
adăugat

Kevin, acest lucru nu se poate face cu un HTML pur. Trebuie să vă bazați pe JavaScript pentru acest truc.

Cu toate acestea, dacă plasați două formulare pe pagina HTML, puteți face acest lucru.

Form1 ar avea butonul anterior.

Form2 ar avea orice intrări de utilizator + butonul următor.

Când utilizatorul apasă Enter în formularul 2, butonul Următorul trimite ar declanșa.

0
adăugat

Dacă chiar vrei să funcționeze ca un dialog de instalare, ce zici doar dând foc la butonul "Next" OnLoad. În acest fel, dacă utilizatorul lovește Return, formularul trimite și merge înainte. Dacă doresc să se întoarcă, pot să apese pe Tab sau să apese pe buton.

0
adăugat
Înseamnă că cineva completează un formular și se întoarce în timp ce se află într-un câmp de text.
adăugat autor Jordan Reiter

Sper ca asta ajuta. Doar fac trucul float în butoanele din dreapta.

În acest fel, butonul Prev este lăsat de butonul Următor, dar următorul este primul în codul HTML:

.f {
  float: right;
}
.clr {
  clear: both;
}

Edit: Benefits over other suggestions: no JavaScript, accessible, both buttons remain type="submit"

0
adăugat
Nu faceți acest lucru fără să schimbați, de asemenea, ordinea filelor, astfel încât apăsarea butonului tab va trece prin butoanele așa cum apar pe ecran.
adăugat autor Steve

Kevin,

Acest lucru funcționează fără javascript sau CSS în cele mai multe browsere:


Firefox, Opera, Safari, Google Chrome all work.
As always, IE is the problem.

Această versiune funcționează atunci când javascript este activat:


So the flaw in this solution is:
Previous Page does not work if you use IE with Javascript off.
Mind you, the back button still works!

0
adăugat
Fără javascript, nu veți putea activa butonul "pagina anterioară", deoarece butonul type = "!
adăugat autor riskop

păstrați numele tuturor butoanelor de trimitere la fel - "prev" Singura diferență este atributul value cu valori unice. Atunci când creăm scriptul, aceste valori unice ne vor ajuta să ne dăm seama care dintre butoanele de trimitere a fost apăsat.

Și scrie codificare follwing:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
0
adăugat
Problema este că apăsarea introducerii pe un câmp de text va trimite formularul cu primul buton de trimitere, nu cu cel dorit (cel de-al doilea în exemplu). Găsirea butonului de trimitere care a fost folosit pentru a trimite formularul este ușor și nu a fost o întrebare!
adăugat autor riskop

Schimbarea ordinii tab ar trebui să fie tot ce este necesar pentru a realiza acest lucru. Nu te complica.

O altă opțiune simplă ar fi să plasați butonul din spate după butonul de trimitere în codul HTML, dar să îl plutești în stânga, astfel încât să apară pe pagină înaintea butonului de trimitere.

0
adăugat

Aceasta este ceea ce am încercat: 1. Trebuie să vă asigurați că dați butoanele dvs. diferite 2. Scrieți o instrucțiune if, care va face acțiunea necesară, dacă oricare dintre butoanele apăsate.


În PHP,

if(isset($_POST['prev']))
{
header("Location: previous.html");
die();
}

if(isset($_POST['next']))
{
header("Location: next.html");
die();

}
0
adăugat
Problema este că apăsarea introducerii pe un câmp de text va trimite formularul cu primul buton de trimitere, nu cu cel dorit (cel de-al doilea în exemplu). Găsirea butonului de trimitere care a fost folosit pentru a trimite formularul este ușor și nu a fost o întrebare!
adăugat autor riskop

Dacă aveți mai multe butoane active pe o singură pagină, puteți face ceva de genul:

Marcați primul buton pe care doriți să-l declanșeze pe tasta Enter apăsată ca buton prestabilit pe formular. Pentru al doilea buton, asociați-l cu butonul Backspace de pe tastatură. Backspace evenimentul este 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");
    }
  }
});



 

Sper că acest lucru vă ajută.

0
adăugat

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

Un buton prestabilit al unui element de formular este primul buton de trimitere în copac   comanda al cărei proprietar de formă este acel element de formular.

     

În cazul în care agentul utilizator acceptă permițând utilizatorului să trimită implicit un formular   (de exemplu, pe unele platforme care lovesc tasta "enter" în timp ce un text   câmpul este concentrat implicit supune formularul) ...

Având următoarea intrare, introduceți tipul = "trimiteți" și modificați intrarea anterioară pentru a tasta = "butonul" ar trebui să dea comportamentul implicit dorit.



0
adăugat

Cu javascript (aici jQuery), puteți dezactiva butonul prev înainte de a trimite formularul.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
0
adăugat

Prima dată când am venit împotriva acestui lucru am venit cu un hack onclick () / js atunci când alegerile nu sunt prev / next pe care încă îmi place pentru simplitatea lui. Ea merge astfel:

@model myApp.Models.myModel    



 

Atunci când se face clic pe butonul de trimitere, se stochează operația dorită într-un câmp ascuns (care este un câmp de șir inclus în modelul cu care se asociază formularul) și trimite formularul către Controlor, care face totul decizia. În Controller, scrieți pur și simplu:

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

Puteți, de asemenea, să strângeți ușor acest lucru folosind codurile de operare numerice pentru a evita parsarea șirului, dar dacă nu jucați cu Enums, codul este mai puțin lizibil, modificabil și autocumentant, iar parsarea este trivială oricum.

0
adăugat

Incearca asta..!


0
adăugat

Am rezolvat o problemă foarte asemănătoare în acest fel:

  1. dacă javascript este activat (în cele mai multe cazuri din zilele noastre), atunci toate butoanele de trimitere sunt " degradate (jquery). Faceți clic pe evenimentele de pe butoanele " degradate " care sunt introduse și prin javascript .

  2. dacă javascript nu este activat, atunci formularul este difuzat în browser cu mai multe butoane de trimitere. În acest caz, apăsând introduceți într-un textfield din cadrul formularului, veți trimite formularul cu primul buton în loc de implicit , dar cel puțin formularul este încă utilizabil: trimiteți cu butoanele prev și următoarele .

exemplu de lucru:


    
    
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.


0
adăugat

Puteți utiliza Tabindex pentru a rezolva această problemă. De asemenea, schimbarea ordinii butonului ar fi o modalitate mai eficientă de a realiza acest lucru. Modificați ordinea butonului și adăugați valorile float pentru a le atribui poziția dorită pe care doriți să o afișați în vizualizarea HTML .

0
adăugat