Több bead gombok egy HTML form

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

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.

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.

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

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

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.

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.

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!

Ú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

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

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>

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.

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();

}

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.

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.

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>

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');
    }
});

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.

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.

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>

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

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

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

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.