Multiple prezinte butoane într-un formular HTML

voturi
233

Să presupunem că creați un Expert într - un formular HTML. Un buton merge înapoi, iar unul merge mai departe. Deoarece spate butonul apare pentru prima dată în markup atunci când apăsați Enter va folosi acest buton pentru a depune formularul.

Exemplu:

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

Ceea ce aș dori să fac, este de a lua pentru a decide ce buton este utilizat pentru a trimite formularul atunci când un utilizator prese Enter. În acest fel, atunci când apăsați Enter Expertul se va muta la pagina următoare, nu anterior. Nu trebuie să utilizați tabindexpentru a face acest lucru?

Întrebat 01/08/2008 la 14:01
sursa de către utilizator
În alte limbi...                            


23 răspunsuri

voturi
133

Sper ca asta ajuta. Fac doar truc de floatING butoanele de pe dreapta.

Astfel, butonul Anterior rămâne din butonul Next dar următorul vine prima în codul 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>

Editare: Beneficii peste alte sugestii: nu JavaScript, accesibil, ambele butoane rământype="submit"

Publicat 28/08/2008 la 10:34
sursa de către utilizator

voturi
60

Ar fi posibil să schimbați tipul de buton precedent într-un buton ca aceasta:

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

Acum , butonul următor ar fi implicit, plus puteți adăuga , de asemenea, defaultatributul pentru ea , astfel încât browser - ul dvs. va evidenția astfel:

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

Sper că vă ajută.

Publicat 01/08/2008 la 14:14
sursa de către utilizator

voturi
53

Dă-va prezinte butoane de același nume de genul:

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

Atunci când utilizatorul apasă intră și Request merge la server, puteți verifica valoarea de submitButtonpe codul de server-side , care conține o colecție de formă de name/valueperechi. 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

Referință: Utilizarea multiplă depune butoane de pe un singur formular

Publicat 01/08/2008 la 14:10
sursa de către utilizator

voturi
30

În cazul în care faptul că primul buton este utilizat în mod implicit este consecventă în browsere, de ce nu le -a pus runda mod corect în codul sursă, apoi utilizați CSS pentru a comuta pozițiile lor aparente? floatle - stânga și dreapta pentru a le schimba în jurul valorii de vizual, de exemplu.

Publicat 02/08/2008 la 12:24
sursa de către utilizator

voturi
17

Uneori , soluția oferită de @palotasb nu este suficientă. Există cazuri de utilizare în cazul în care , de exemplu , un buton „Filter“ submit este plasat deasupra butoane , cum ar fi „Next și Previous“. Am găsit o soluție pentru acest lucru: copiați butonul de trimitere , care trebuie să acționeze ca implicit butonul depune într - un div ascuns și puneți - l în interiorul formularul de mai sus orice alt buton de trimitere. Punct de vedere tehnic va fi prezentat de un alt buton când se apasă Enter , apoi , atunci când faceți clic pe butonul vizibil următor. Dar din moment ce numele și valoarea este același, nu există nici o diferență în rezultat.

<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>
Publicat 26/10/2012 la 10:53
sursa de către utilizator

voturi
17

Se poate lucra cu CSS

Pune-le în markup ca butonul de lângă întâi, apoi butonul precedent următor.

Apoi, utilizați CSS pentru a le poziționa să apară așa cum doriți

Publicat 16/09/2008 la 13:16
sursa de către utilizator

voturi
17

Kevin, acest lucru nu se poate face cu HTML pur. Trebuie să se bazeze pe JavaScript pentru acest truc.

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

Form1 ar avea butonul anterior.

Form2 ar avea orice date introduse de utilizatori + butonul următor.

Atunci când utilizatorul apasă Enterîn Form2, următoarea depune butonul se va declanșa.

Publicat 26/08/2008 la 04:44
sursa de către utilizator

voturi
17

Dacă într-adevăr doriți doar să lucreze ca un dialog de instalare, ceea ce despre a da doar se concentreze pe butonul „Next“ onload. În acest fel, în cazul în care utilizatorul hit-uri de returnare, forma susține și merge mai departe. Dacă ei doresc să se întoarcă pot lovi Tab sau faceți clic pe butonul.

Publicat 26/08/2008 la 04:41
sursa de către utilizator

voturi
15

Mi-ar folosi Javascript pentru a depune formularul. Funcția va fi declanșat de evenimentul onkeypress elementului de formular, și ar detecta dacă tasta Enter a fost selectată. Dacă acesta este cazul, se va depune formularul.

Aici sunt două pagini care dau tehnici cu privire la modul de a face acest lucru: 1 , 2 . Pe baza acestora, aici este un exemplu de utilizare (bazată pe aici ):

<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)" />
Publicat 03/08/2008 la 14:12
sursa de către utilizator

voturi
14

Kevin,

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

<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 toate lucrările.
Ca întotdeauna, IE este problema.

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

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

Deci defect în această soluție este:
Pagina anterioară nu funcționează dacă utilizați IE cu Javascript off.
Dacă nu te superi, butonul din spate încă mai funcționează!

Publicat 16/09/2008 la 12:19
sursa de către utilizator

voturi
13

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

Mark primul buton pe care doriți declanșează pe Enterkeypress ca defaultbutton pe formular. Pentru al doilea buton asocia cu Backspacebuton de pe tastatură. Backspaceeventcode 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");
    }
  }
});
<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>

Sper că acest lucru vă ajută.

Publicat 14/03/2014 la 15:51
sursa de către utilizator

voturi
12

O altă opțiune ar fi simplu de a pune butonul înapoi după butonul de trimitere în codul HTML, dar float-l la stânga astfel încât să apară pe pagina înainte ca butonul de trimitere.

Modificarea ordinii tab-ar trebui să fie tot ce este nevoie pentru a realiza acest lucru. Nu te complica.

Publicat 14/10/2014 la 17:02
sursa de către utilizator

voturi
12

Modificarea ordinii tab-ar trebui să fie tot ce este nevoie pentru a realiza acest lucru. Nu te complica.

O altă opțiune ar fi simplu de a pune butonul înapoi după butonul de trimitere în codul HTML, dar float-l la stânga astfel încât să apară pe pagina înainte ca butonul de trimitere.

Publicat 27/11/2012 la 23:27
sursa de către utilizator

voturi
11

păstrează numele tuturor depune butoane de aceeași - „prev“ Singura diferență este valueatributul cu valori unice. Când vom crea script - ul, aceste valori unice ne va ajuta să dau 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
Publicat 05/06/2012 la 10:19
sursa de către utilizator

voturi
10

Prima dată când am venit împotriva acestei am venit cu un onclick () / hack js atunci când alegerile nu sunt anterioare / următoare că eu încă place pentru simplitatea sa. Se merge așa:

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

Atunci când oricare dintre butoane submit se dă clic pe acesta stochează operația dorită într-un câmp ascuns (care este un câmp șir inclus în modelul de formular este asociat cu) și prezintă forma Controller, care face tot ce decide. Î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 strânge, de asemenea, această activitate ușor cu ajutorul codurilor numerice de funcționare pentru a evita parsarea șir, dar dacă nu te joci cu enums, codul este mai ușor de citit, modificabil, și auto-documentarea și parsarea este banală, oricum.

Publicat 03/09/2015 la 13:30
sursa de către utilizator

voturi
10

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

Butonul implicit O formă elementului este butonul de trimitere mai întâi în ordine copac al cărui proprietar forma este ca element de formular.

În cazul în care agentul utilizator acceptă de a lăsa utilizatorul să prezinte un formular implicit (de exemplu, pe unele platforme apăsând tasta „enter“, în timp ce un câmp de text este focalizat susține implicit forma) ...

Având intrare următoare să fie de tip = „submit“ și schimbarea de intrare anterior type = „butonul“ ar trebui să dea comportamentul implicit dorit.

<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>
Publicat 28/03/2015 la 21:05
sursa de către utilizator

voturi
10

Aceasta este ceea ce am încercat: 1. Trebuie să vă asigurați că vă dau butoane diferite nume 2. Scrieți o declarație în cazul în care se va face acțiunea necesară în cazul în care, fie buton pe clic.

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

În PHP,

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

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

}
Publicat 03/03/2014 la 07:16
sursa de către utilizator

voturi
8

Am dat peste această întrebare atunci când încearcă să găsească un răspuns la practic același lucru, numai cu controale asp.net, atunci când am dat seama că butonul asp are o proprietate numită UseSubmitBehaviorcare vă permite să setați pe care o face depunerea.

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

Doar în cazul în care cineva este în căutarea pentru butonul asp.net mod de a face acest lucru.

Publicat 24/03/2016 la 17:29
sursa de către utilizator

voturi
7

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

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Publicat 14/08/2015 la 10:01
sursa de către utilizator

voturi
0

Puteți folosi Tabindexpentru a rezolva această problemă, de asemenea schimbarea ordinii butonului ar fi mult mai eficient pentru a realiza acest lucru. Modificarea ordinii de buton și adăugați floatvalorile pentru a le atribui poziția dorită pe care doriți să se afișeze în dvs. de HTMLvedere.

Publicat 25/04/2018 la 06:28
sursa de către utilizator

voturi
0

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

  1. în cazul în care javascripteste activată (în cele mai multe cazuri , în zilele noastre) , atunci toate butoanele prezintă sunt „ degradate “ la butoane la sarcină prin intermediul paginii javascript(jquery). Faceți clic pe evenimente „ degradate Nasturii tastat“ sunt tratate , de asemenea , prin intermediul javascript.

  2. în cazul în care javascriptnu este activat atunci când formularul este servit la browser cu butoane multiple prezinte. În acest caz , intră pe o lovire textfieldîn formularul va depune formularul cu primul buton în locul destinat implicit , dar cel puțin forma este încă utilizabilă: puteți depune cu atât prev și următoarele butoane.

exemplu de lucru:

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

Publicat 09/01/2018 la 15:26
sursa de către utilizator

voturi
0

Incearca asta..!

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

Publicat 29/09/2017 la 04:58
sursa de către utilizator

voturi
-3

Folosind exemplul ți-a dat:

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

Dacă faceți clic pe „pagina anterioară“ numai valoarea „anterioare“ va fi trimis. Dacă faceți clic pe „Next Page“ numai valoarea „Next“ va fi trimis.

Dacă totuși, apăsați introduceți undeva pe formular, nici „prev“, nici „următoarea“ va fi trimis.

Deci, folosind codul de pseudo-ai putea 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
Publicat 05/08/2008 la 16:08
sursa de către utilizator

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