Több bead gombok egy HTML form

Question

Több bead gombok egy HTML form

szavazat

233

Tegyük fel, hogy hozzon létre egy varázsló egy HTML űrlapot. Egy gomb megy vissza, és az egyik megy előre. Mivel a hátsó gomb jelenik meg először a jelölést, ha megnyomja az Enter akkor használja a gombra, hogy küldje el az űrlapot.

Példa:

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

Amit szeretnék csinálni, hogy eldönteni, hogy melyik gombbal lehet elküldeni az űrlapot, ha a felhasználó megnyomja az Entert. Így, amikor megnyomja az Enter varázsló fog mozogni a következő oldalra, és nem az előző. Van, hogy használja tabindexezt?

html form-submit html-form submit-button

A kérdést 01/08/2008 14:01
a forrás felhasználó Kevin

Más nyelveken...

23 válasz

szavazat

60

Lehetséges lenne, hogy módosítsa az előző gombtípus egy gomb, mint ez:

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

Most a Next gombra lenne az alapértelmezett, és akkor is hozzá az defaultattribútum úgy, hogy a böngésző kiemeli azt valahogy így:

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

Remélem segít.

Válaszolt 01/08/2008 14:14
a forrás felhasználó Wally Lawless

szavazat

53

Adjon bead gombok ugyanazt a nevet, mint ez:

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

Amikor a felhasználó megnyomja be, és a kérés megy szerverre, akkor ellenőrizze az értéket submitButtona kiszolgáló-oldali kód, amely a gyűjtemény formában name/valuepár. Például a klasszikus 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

Hivatkozás: A több bead gombok egy formanyomtatványon

Válaszolt 01/08/2008 14:10
a forrás felhasználó huseyint

szavazat

30

Ha az a tény, hogy az első gomb az alapértelmezett következetesen a böngészők, miért ne tegye a megfelelő irányban a forráskódot, majd CSS váltani látszólagos pozíciókat? floatbalra vagy jobbra váltani őket körül vizuálisan, például.

Válaszolt 02/08/2008 12:24
a forrás felhasználó Polsonby

szavazat

17

Előfordul, hogy a nyújtott megoldást @palotasb nem elegendő. Vannak esetek, amikor használat például a „Filter” küldés gomb fölött helyezkedik gombok, mint a „Következő és az Előző”. Találtam egy megoldás erre: másolja a küldés gombot, amelynek szüksége van fellépni az alapértelmezett küldés gombot, egy rejtett div és helyezze belül a fenti űrlap bármely más elküldés gombot. Technikailag benyújtásra kerül egy másik gomb megnyomására Enter majd amikor kattintva látható Next gombra. De mivel a név és az érték ugyanaz, nincs különbség az eredmény.

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

Válaszolt 26/10/2012 10:53
a forrás felhasználó netiul

szavazat

17

Úgy tudja, CSS

Tedd őket a jelölést a következő gomb az első, majd az előző gombra.

Ezután CSS helyzetbe, hogy megjelenjenek a kívánt módon

Válaszolt 16/09/2008 13:16
a forrás felhasználó qui

szavazat

17

Kevin, ez nem történhet tiszta HTML. Meg kell támaszkodni a JavaScript erre trükk.

Azonban ha a hely két formája a HTML-oldal, akkor ezt.

Form1 volna az előző gombra.

Form2 lesz semmilyen felhasználói bemenet + a következő gombot.

Ha a felhasználó megnyomja Entera form2, a Next küldés gomb fog tüzet.

Válaszolt 26/08/2008 04:44
a forrás felhasználó FlySwat

szavazat

17

Ha igazán csak azt szeretném, hogy a munka, mint egy telepítési párbeszédpanel mi a helyzet csak ad hangsúlyt, hogy a „Tovább” gombra onload. Így ha a felhasználó megnyomja Vissza az űrlapküldést és megy előre. Ha akarnak visszamenni tudnak nyomja le a Tab vagy kattintson a gombra.

Válaszolt 26/08/2008 04:41
a forrás felhasználó Scott Gottreu

szavazat

15

Szeretném használni Javascript elküldeni az űrlapot. A funkció akkor lépne életbe, a onkeypress esemény az űrlap elem, és ez érzékeli, hogy az Enter gomb lett kiválasztva. Ha ez az eset áll fenn, akkor küldje el az űrlapot.

Itt van két oldalakat, amelyek technikákat, hogyan kell ezt csinálni: 1 , 2 . Ezek alapján, itt egy példa a felhasználásra (az itt ):

<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)" />

Válaszolt 03/08/2008 14:12
a forrás felhasználó Yaakov Ellis

szavazat

14

Kevin,

Ez úgy működik, anélkül, JavaScript vagy CSS a legtöbb böngészőben:

<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 minden munkát.
Mint mindig, az IE a problémát.

Ez a verzió működik, ha a JavaScript engedélyezve van:

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

Tehát a hiba ebben a megoldás:
Előző oldal nem működik, ha használja az IE Javascript le.
Megjegyezném, a vissza gomb is működik!

Válaszolt 16/09/2008 12:19
a forrás felhasználó Jolyon

szavazat

13

Ha több aktív gombok egy oldalra akkor nem valami ilyesmi:

Mark az első gombot szeretne kiváltja a Entergombnyomás mint defaultbutton az űrlapon. A második gomb társítja azt a Backspacegombot a billentyűzeten. Backspaceeventcode 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>

Remélem ez segít.

Válaszolt 14/03/2014 15:51
a forrás felhasználó user1591131

szavazat

12

Egy másik egyszerű megoldás lenne, hogy a hátsó gombot, miután a küldés gombot, a HTML kódot, de lebegnek el balra, így az megjelenik az oldalon, mielőtt a 'Küldés' gombra.

Megváltoztatása a bejárási sorrendet kell minden kell ahhoz, hogy ennek az elvégzéséhez. Ne komplikáld túl.

Válaszolt 14/10/2014 17:02
a forrás felhasználó user4136731

szavazat

12

Megváltoztatása a bejárási sorrendet kell minden kell ahhoz, hogy ennek az elvégzéséhez. Ne komplikáld túl.

Egy másik egyszerű megoldás lenne, hogy a hátsó gombot, miután a küldés gombot, a HTML kódot, de lebegnek el balra, így az megjelenik az oldalon, mielőtt a 'Küldés' gombra.

Válaszolt 27/11/2012 23:27
a forrás felhasználó Kenny Johnson

szavazat

11

hogy a név is nyújtsa gomb ugyanaz - „prev” Az egyetlen különbség az valueattribútum egyedi értékeket. Amikor alkotunk a forgatókönyvet, ezeket az egyedi értékek segít kitalálni, hogy melyik a bead gombok megnyomásakor volt.

És írni follwing kódolás:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if

Válaszolt 05/06/2012 10:19
a forrás felhasználó jayu

szavazat

10

Amikor először jött fel ez ellen kitaláltam egy onclick () / js feltörni, amikor döntések nem prev / next, hogy én még mindig szeretem az egyszerűségét. Így hangzik:

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

Ha akár küldés gombra kattint tárolja el a kívánt műveletet egy rejtett mező (ami egy string mező tartalmazza a modell formájában társul), és elküldi az űrlapot a vezérlő, amely nem minden döntés. A vezérlő, akkor egyszerűen írja:

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

Azt is húzza ezt kissé numerikus műveleti kódok, hogy elkerüljék a húr elemzés, de ha játszani Enums, a kód kevésbé olvasható, módosítható, és öndokumentáló és az elemzési triviális, egyébként.

Válaszolt 03/09/2015 13:30
a forrás felhasználó MiddleAgedMutantNinjaProgrammer

szavazat

10

tól https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

Egy űrlap elem alapértelmezett gomb az első küldés gombot, fa érdekében, melynek formája tulajdonos, hogy a forma elem.

Ha a böngésző támogatja hogy a felhasználó a egy űrlapot implicit (például egyes platformokon üti az „Enter” billentyűt, miközben egy szöveges mező középpontjában hallgatólagosan elküldi az űrlapot) ...

Miután a következő beviteli legyen type = „submit” és a változó az előző beviteli type = „button” meg kell adni a kívánt alapértelmezett viselkedését.

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

Válaszolt 28/03/2015 21:05
a forrás felhasználó nikkypx

szavazat

10

Ez az, amit én kipróbáltam: 1. Meg kell győződnie róla, hogy adja meg a gombok különböző nevek 2. Írj egy if, hogy megteszi a szükséges lépéseket, ha bármelyik gombot kattintott.

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

A PHP-

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

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

}

Válaszolt 03/03/2014 07:16
a forrás felhasználó Samuel Mugisha

szavazat

8

Rábukkantam erre a kérdésre próbál választ találni arra, hogy lényegében ugyanaz, csak a asp.net ellenőrzés, amikor rájöttem, hogy a asp gombnak ingatlan hívott UseSubmitBehavior, hogy lehetővé teszi, hogy melyik működik a beküldő.

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

Csak abban az esetben, ha valaki keresi a asp.net gomb utat megtenni.

Válaszolt 24/03/2016 17:29
a forrás felhasználó Barry Franklin

szavazat

7

A javascript (itt jQuery), akkor letilthatja a prev gomb előtt küldje el az űrlapot.

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

Válaszolt 14/08/2015 10:01
a forrás felhasználó GuillaumeS

szavazat

0

Használhatja Tabindex, hogy megoldja ezt a problémát, szintén sorrendjének megváltoztatása gomb hatékonyabb lenne mód ennek eléréséhez. Sorrendjének módosítása gombra, és adjunk hozzá floatértékeket, hogy azokat a kívánt helyzetbe szeretné megjeleníteni a HTMLkilátás.

Válaszolt 25/04/2018 06:28
a forrás felhasználó Jyoti mishra

szavazat

0

Oldottam nagyon hasonló probléma a következő módon:

Ha javascriptengedélyezve van (a legtöbb esetben napjainkban), akkor az összes benyújtja gombok „ degradált ” a gombokat az oldalak betöltési keresztül javascript(jquery). Click események a „ degradálódott ” gomb begépelt gombok kezelése útján is javascript.
Ha javascriptnincs engedélyezve, akkor a forma szolgált, hogy a böngésző több bead gombok. Ebben az esetben az enter egy textfielda formában benyújtja a forma az első gomb helyett a tervezett alapértelmezett , de legalább a forma még mindig használható: akkor be mind a dok és a következő gombokat.

működő példa:

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

Válaszolt 09/01/2018 15:26
a forrás felhasználó riskop

szavazat

0

Próbáld ezt..!

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

Válaszolt 29/09/2017 04:58
a forrás felhasználó Gowtham Balusamy

szavazat

-3

A példa, amit adtál:

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

Ha rákattint a „Előző oldal” csak az érték „prev” elé kerül. Ha rákattint a „Következő oldal” csak az érték „következő” elé kerül.

Ha viszont entert.Ez valahol a forma, sem az „előző”, sem a „következő” kerül be.

Tehát használ pszeudo kódot akkor tegye a következőket:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

Válaszolt 05/08/2008 16:08
a forrás felhasználó GateKiller

palotasb · Accepted Answer · 2008-08-28 10:34

Remélem ez segít. Én csak ezzel a trükk floatING a gombok a jobb.

Így a Előző gomb marad a Next gombot, de a Next előbb a HTML kódot:

.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: Előnyök a további javaslatokat: nincs JavaScript, hozzáférhető, mindkét gomb maradtype="submit"