Multiple předložit tlačítka v podobě HTML

hlasů
233

Řekněme, že jste vytvořit Průvodce ve formě HTML. Jedno tlačítko se vrátí, a jeden jde kupředu. Vzhledem k tomu, znovu tlačítko se zobrazí jako první v značkovacího jazyka při stisknutí klávesy Enter bude používat toto tlačítko pro odeslání formuláře.

Příklad:

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

To, co jsem chtěl udělat, je dostat se rozhodnout, které tlačítko slouží k odeslání formuláře, když uživatel stiskne klávesu Enter. Tímto způsobem, když stisknete Enter Průvodce přejde na další stránku, ani předchozí. Máte použít tabindex, jak to udělat?

Položena 01/08/2008 v 14:01
zdroj uživatelem
V jiných jazycích...                            


23 odpovědí

hlasů
53

Dejte svůj předložit tlačítek stejný název jako je tento:

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

Když uživatel stiskne klávesu Enter a Request jde do serveru, můžete zkontrolovat hodnotu submitButtonz kódu na straně serveru, který obsahuje sbírku formulářů name/valuepárů. Například v klasickém 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

Reference: Použití více předložit tlačítka na jednom formuláři

Odpovězeno 01/08/2008 v 14:10
zdroj uživatelem

hlasů
60

Bylo by možné, že je potřeba vyměnit předchozí typ tlačítek do jednoho tlačítka, jako je tento:

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

Nyní tlačítko Next by být výchozí, a navíc můžete také přidat defaultatribut k tomu, aby váš prohlížeč upozorní jej jako tak:

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

Naděje, která pomáhá.

Odpovězeno 01/08/2008 v 14:14
zdroj uživatelem

hlasů
30

V případě, že skutečnost, že první tlačítko slouží jako výchozí je konzistentní napříč prohlížeči, proč ne dát jim správným způsobem ve zdrojovém kódu, poté pomocí CSS k přepínání své zdánlivé pozice? floatje doleva a doprava k jejich přepínání kolem vizuálně, například.

Odpovězeno 02/08/2008 v 12:24
zdroj uživatelem

hlasů
15

Chtěl bych použít Javascript odeslat formulář. Funkce bude spuštěna akce OnKeyPress tohoto formuláře prvku, a bude zjišťovat, zda byla zvolena klávesa Enter. Je-li tomu tak, bude to odeslat formulář.

Zde jsou dvě stránky, které poskytují metody, jak to udělat: 1 , 2 . Na jejich základě, zde je příklad využití (vztaženo na zde ):

<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)" />
Odpovězeno 03/08/2008 v 14:12
zdroj uživatelem

hlasů
-3

Na příkladu jste dal:

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

Pokud kliknete na „předchozí strana“ pouze hodnoty „prev“ bude předložen. Pokud kliknete na „Next Page“ jen bude předložen hodnota „next“.

Pokud však budete klávesu enter někde na formuláři, ani „předchozí“, ani „next“ bude předložen.

Takže pomocí pseudo kód, který jste mohli provést následující kroky:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Odpovězeno 05/08/2008 v 16:08
zdroj uživatelem

hlasů
17

Pokud jste opravdu jen chtít pracovat jako dialog instalaci, co jen dávat důraz na tlačítko „Další“ onLoad. Tak v případě, že uživatel narazí Návrat forma předkládá a jde kupředu. Chtějí-li se vrátit mohou zasáhnout Tab nebo klepnutím na tlačítko.

Odpovězeno 26/08/2008 v 04:41
zdroj uživatelem

hlasů
17

Kevin, toto nemůže být provedeno s čistým HTML. Musíte spoléhat na JavaScriptu pro tento trik.

Nicméně, pokud umístíte dvě formy na HTML stránky, můžete to udělat.

Form1 by měla předchozí tlačítko.

Form2 by mít žádné uživatelské vstupy + další tlačítko.

Když uživatel stiskne Enterv formulář2 Next předložit tlačítko by oheň.

Odpovězeno 26/08/2008 v 04:44
zdroj uživatelem

hlasů
133

Doufám, že to pomůže. Dělám jen trik floating tlačítek na pravé straně.

Tímto způsobem tlačítka Prev je vlevo tlačítko Další, ale další je na prvním místě v HTML kódu:

.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: Výhody oproti jiným návrhům: ne JavaScript, přístupné, obě tlačítka zůstávajítype="submit"

Odpovězeno 28/08/2008 v 10:34
zdroj uživatelem

hlasů
14

Kevin

Tento postup funguje bez javascript nebo CSS ve většině prohlížečů:

<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 všechny práce.
Jako vždy, IE je ten problém.

Tato verze funguje, když je zapnutý 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>

Takže chyba v tomto roztoku je:
Předchozí stránka nefunguje, pokud používáte IE Javascript off.
Nezapomínejme, tlačítko zpět stále funguje!

Odpovězeno 16/09/2008 v 12:19
zdroj uživatelem

hlasů
17

Je možné pracovat s CSS

Dát do značek jako další tlačítka jako první, pak předchozí tlačítko vedle.

Pak použít CSS k jejich umístění se zobrazí tak, jak chcete

Odpovězeno 16/09/2008 v 13:16
zdroj uživatelem

hlasů
11

ponechat název všichni předložit tlačítka stejné - „prev“ Jediný rozdíl je valueatribut s jedinečnými hodnotami. Když vytvoříme scénář, budou tyto jedinečné hodnoty nám pomůže zjistit, který z těchto tlačítek předloží bylo stisknuto.

A psát domácí kódování:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Odpovězeno 05/06/2012 v 10:19
zdroj uživatelem

hlasů
17

Někdy je poskytována řešením by @palotasb nestačí. Existují případy, kdy použití například „filtr“ předložit tlačítko umístěné nad tlačítky jako „Další a předchozí“. Našel jsem řešení pro tento: zkopírovat na tlačítko Odeslat která musí působit jako výchozí tlačítko pro odeslání ve skryté div a umístěte jej do formuláře výše jakékoliv jiné tlačítko Odeslat. Technicky to bude předložena jiným tlačítkem při stisknutí klávesy Enter pak po klepnutí na tlačítko Další viditelné. Ale protože název a hodnota je stejná, není žádný rozdíl ve výsledku.

<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>
Odpovězeno 26/10/2012 v 10:53
zdroj uživatelem

hlasů
12

Změna pořadí prvků by mělo být vše, co je potřeba k dosažení tohoto cíle. Nech si to jednoduché.

Dalším jednoduchým řešením by bylo dát na tlačítko zpět poté, co tlačítko Odeslat v HTML kódu, ale vznáší se na levé straně tak, aby se na stránce objeví před tlačítko Odeslat.

Odpovězeno 27/11/2012 v 23:27
zdroj uživatelem

hlasů
10

To je to, co jsem se snažil out: 1. Musíte se ujistit, že dát svým tlačítkům různými jmény 2. psát if, který se postará o potřebné kroky, pokud jedno z tlačítek na klepnutí.

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

V PHP,

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

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

}
Odpovězeno 03/03/2014 v 07:16
zdroj uživatelem

hlasů
13

Pokud máte více aktivních tlačítek na jedné straně pak si můžete udělat něco takového:

Mark první tlačítko Chcete se spouští při Enterstisku klávesy jako defaultbutton na formuláři. Za druhé tlačítko přiřadit jej k Backspacetlačítku na klávesnici. 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>

Snad to pomůže.

Odpovězeno 14/03/2014 v 15:51
zdroj uživatelem

hlasů
12

Dalším jednoduchým řešením by bylo dát na tlačítko zpět poté, co tlačítko Odeslat v HTML kódu, ale vznáší se na levé straně tak, aby se na stránce objeví před tlačítko Odeslat.

Změna pořadí prvků by mělo být vše, co je potřeba k dosažení tohoto cíle. Nech si to jednoduché.

Odpovězeno 14/10/2014 v 17:02
zdroj uživatelem

hlasů
10

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

Výchozí tlačítko elementu formuláře je první tlačítko Odeslat ve stromu, aby jejíž podoba vlastníkem je, že forma element.

V případě, že uživatelský agent podporuje nechal uživatel odeslat formulář implicitně (například na některých platformách zasáhnout „Enter“, zatímco textové pole je zaměřen implicitně odešle formulář) ...

Mít další vstup být type = „submit“ a mění předchozí vstup type = „Tlačítko“ by měl dát požadovaný výchozí chování.

<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>
Odpovězeno 28/03/2015 v 21:05
zdroj uživatelem

hlasů
7

Pomocí JavaScriptu (jQuery zde), můžete zakázat tlačítko prev před odeslat formulář.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Odpovězeno 14/08/2015 v 10:01
zdroj uživatelem

hlasů
10

Poprvé, když jsem narazil na to jsem přišel s onClick () / js zaseknout když volby nejsou předchozí / další, které jsem ještě rád pro svou jednoduchost. Je to takhle:

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

Když buď tlačítko Odeslat klepnutí uloží požadovanou operaci v skryté pole (což je řetězec pole obsažené v modelu forma je spojena s) a odešle formulář na Controller, který dělá všechno rozhodne. V řídicí jednotce, stačí napsat:

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

Můžete také dotáhnout to až mírně pomocí číselných Provoz kódů, aby se zabránilo řetězec analýze, ale pokud budete hrát s výčty, kód je méně čitelný, modifikovatelné, a self-dokumentovat a rozebrat je triviální, tak jako tak.

Odpovězeno 03/09/2015 v 13:30
zdroj uživatelem

hlasů
8

Narazil jsem na tuto otázku, když se snaží najít odpověď na v podstatě totéž, jen s ovládacími prvky ASP.NET, když jsem přišel na to, že tlačítko asp má vlastnost s názvem UseSubmitBehavior, který vám umožní nastavit, který z nich dělá předkládání.

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

Jen v případě, že někdo hledá tlačítka asp.net způsob, jak to udělat.

Odpovězeno 24/03/2016 v 17:29
zdroj uživatelem

hlasů
0

Zkuste to..!

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

Odpovězeno 29/09/2017 v 04:58
zdroj uživatelem

hlasů
0

Vyřešil jsem velmi podobný problém tímto způsobem:

  1. pokud javascriptje povoleno (ve většině případů v současné době), pak všechny předložit tlačítka jsou „ degradován “ tlačítkům na načtení stránky pomocí javascript(jQuery). Klepněte na dění na „ zhoršených podmínek “ tlačítko tlačítka zadali jsou zpracovávány i prostřednictvím javascript.

  2. pokud javascriptnení povolen, pak forma je podávána do prohlížeče s více předložit tlačítek. V tomto případě stisknutím klávesy Enter na textfieldv podobě předloží formulář s prvním tlačítkem namísto zamýšleného standardně , ale aspoň je formulář tagů: můžete odeslat s oběma předchozího dokumentu a dalších tlačítek.

Pracovní příklad:

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

Odpovězeno 09/01/2018 v 15:26
zdroj uživatelem

hlasů
0

Můžete použít Tabindexk vyřešení tohoto problému, a to i změnou pořadí tlačítka by bylo účinnější způsob, jak toho dosáhnout. Změnit pořadí tlačítka a přidat floathodnoty jim přiřadit požadovanou pozici, kterou chcete zobrazit v HTMLpohledu.

Odpovězeno 25/04/2018 v 06:28
zdroj uživatelem

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