Multiple sende knappene i et HTML-skjema

stemmer
239

La oss si at du oppretter en veiviser i et HTML-skjema. En knapp går tilbake, og man går frem. Siden tilbake -knappen vises først i markup når du trykker på Enter det vil bruke denne knappen for å sende inn skjemaet.

Eksempel:

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

Det jeg ønsker å gjøre, er å få til å bestemme hvilken knapp som brukes til å sende inn skjemaet når en bruker trykker på Enter. På den måten når du trykker Enter veiviseren vil flytte til neste side, ikke den forrige. Må du bruke tabindextil å gjøre dette?

Publisert på 01/08/2008 klokken 13:01
kilden bruker
På andre språk...                            


23 svar

stemmer
133

Jeg håper dette hjelper. Jeg bare gjør utslaget av floating knappene til høyre.

På denne måten Prev knappen er igjen av Neste-knappen, men neste kommer først i HTML-koden:

.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: Fordeler fremfor andre forslag: nei Javascript, tilgjengelig, begge knappene forblirtype="submit"

Svarte 28/08/2008 kl. 09:34
kilden bruker

stemmer
61

Ville det være mulig for deg å endre den forrige knappen type i en knapp som dette:

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

Nå Neste-knappen vil være standard, pluss at du kan også legge til defaultattributt til det slik at nettleseren vil markere det slik:

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

Håper det hjelper.

Svarte 01/08/2008 kl. 13:14
kilden bruker

stemmer
54

Gi sende knapper samme navn som dette:

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

Når brukeren trykker på Enter og Request går til serveren, kan du sjekke verdien for submitButtondin server-side kode som inneholder en samling av skjema name/valuepar. For eksempel i klassisk 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

Annonse: Bruke flere sende knapper på et enkelt skjema

Svarte 01/08/2008 kl. 13:10
kilden bruker

stemmer
31

Hvis det faktum at den første knappen brukes som standard er konsistent på tvers av nettlesere, hvorfor ikke sette dem riktig vei i kildekoden, og deretter bruke CSS til å bytte sine åpenbare posisjoner? floatdem til venstre og høyre for å bytte dem rundt visuelt, for eksempel.

Svarte 02/08/2008 kl. 11:24
kilden bruker

stemmer
17

Noen ganger gitt løsningen ved @palotasb er ikke tilstrekkelig. Det er bruk tilfeller der for eksempel en "Filter" send-knappen er plassert over knapper som "Neste og Forrige". Jeg fant en løsning på dette: kopiere på send-knappen som må fungere som standard send-knappen i en skjult div og plassere den i skjemaet ovenfor noen annen send-knappen. Teknisk sett vil det bli presentert av en annen knapp når du trykker Enter når du klikker på den synlige Neste-knappen. Men siden navnet og verdien er den samme, er det ingen forskjell i resultatet.

<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>
Svarte 26/10/2012 kl. 09:53
kilden bruker

stemmer
17

Det kan fungere med CSS

Sett dem i markeringen som neste knappen først, da den forrige knappen ved siden av.

Deretter kan du bruke CSS til å posisjonere de skal vises slik du vil

Svarte 16/09/2008 kl. 12:16
kilden bruker

stemmer
17

Kevin, dette kan ikke gjøres med ren HTML. Du må stole på Javascript for dette trikset.

Men hvis du plasserer to former på HTML-siden kan du gjøre dette.

Form1 ville ha den forrige knappen.

Form2 ville ha noen brukerinnganger + neste knapp.

Når brukeren trykker Enterpå Form2, Next send-knappen ville brann.

Svarte 26/08/2008 kl. 03:44
kilden bruker

stemmer
17

Hvis du egentlig bare vil at det skal fungere som en installasjon dialog, hva med bare å gi fokus til "Neste" -knappen OnLoad. På den måten hvis brukeren treffer Return, sender inn skjemaet og går fremover. Hvis de ønsker å gå tilbake de kan treffe Tab eller klikk på knappen.

Svarte 26/08/2008 kl. 03:41
kilden bruker

stemmer
16

Jeg ville bruke Javascript for å sende inn skjemaet. Funksjonen vil bli utløst ved den onkeypress tilfelle av den skjemaelementet, og vil detektere hvorvidt Enter ble valgt. Hvis dette er tilfelle, vil det sende inn skjemaet.

Her er to sider som gir teknikker på hvordan du gjør dette: 1 , 2 . Basert på disse, her er et eksempel på bruk (basert på her ):

<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)" />
Svarte 03/08/2008 kl. 13:12
kilden bruker

stemmer
14

Kevin,

Dette fungerer uten Javascript og CSS i de fleste nettlesere:

<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 alt arbeid.
Som alltid, er IE problemet.

Denne versjonen fungerer når javascript er slått på:

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

Så feil i denne løsningen er:
Forrige side fungerer ikke hvis du bruker IE med Javascript slått av.
Mind du, fortsatt fungerer på tilbake-knappen!

Svarte 16/09/2008 kl. 11:19
kilden bruker

stemmer
13

Hvis du har flere aktive knapper på den ene siden så kan du gjøre noe som dette:

Mark første knappen du vil utløser på Entertastetrykk som defaultbutton på skjemaet. For den andre knappen knytte den til Backspaceknappen på tastaturet. BackspaceEVENTCODE er åtte.

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

Håper dette hjelper.

Svarte 14/03/2014 kl. 14:51
kilden bruker

stemmer
12

En annen enkel mulighet vil være å sette den tilbake-knappen etter på send-knappen i HTML-koden, men flyter den til venstre slik at den vises på siden før på send-knappen.

Endre tab rekkefølge skal være alt som trengs for å oppnå dette. Hold det enkelt.

Svarte 14/10/2014 kl. 16:02
kilden bruker

stemmer
12

Endre tab rekkefølge skal være alt som trengs for å oppnå dette. Hold det enkelt.

En annen enkel mulighet vil være å sette den tilbake-knappen etter på send-knappen i HTML-koden, men flyter den til venstre slik at den vises på siden før på send-knappen.

Svarte 27/11/2012 kl. 22:27
kilden bruker

stemmer
11

holde navnet på alle sende knapper det samme - "prev" Den eneste forskjellen er valueattributt med unike verdier. Når vi oppretter skriptet, vil disse unike verdiene hjelpe oss å finne ut hvilke av de sender knapper ble trykket.

Og skrive follwing koding:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Svarte 05/06/2012 kl. 09:19
kilden bruker

stemmer
10

Første gang jeg kom opp mot dette jeg kom opp med en onclick () / js hack når valgene er ikke forrige / neste at jeg fortsatt liker for sin enkelhet. Det går slik:

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

Når enten sende klikkes lagrer ønsket operasjon i et skjult felt (som er en streng felt inkludert i modellen form er forbundet med) og sender skjemaet til Controller, som gjør alt de bestemmer seg. I Controller, du bare skrive:

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

Du kan også stramme opp dette litt hjelp av talloperasjonskoder for å unngå streng tolking, men med mindre du spiller med enums, er koden mindre lesbar, modifiserbare, og selv dokumentere og analyseringen er trivielt, uansett.

Svarte 03/09/2015 kl. 13:30
kilden bruker

stemmer
10

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

En form element standardknapp er den første send-knappen i tre for hvis form eieren er at skjemaelement.

Hvis brukeren agenten støtter la brukeren sende inn et skjema implisitt (for eksempel på noen plattformer trykke "enter" -tasten mens et tekstfelt er fokusert implisitt sender inn skjemaet) ...

Å ha neste innspill være type = "submit" og endre den tidligere innspill til type = "button" bør gi den ønskede standard oppførsel.

<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>
Svarte 28/03/2015 kl. 21:05
kilden bruker

stemmer
10

Dette er hva jeg har prøvd ut: 1. Du må sørge for at du gir knappene forskjellige navn 2. Skriv en if setning som vil gjøre de nødvendige tiltak dersom enten knappen klikkes.

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

I PHP,

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

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

}
Svarte 03/03/2014 kl. 06:16
kilden bruker

stemmer
8

Jeg kom over dette spørsmålet når du prøver å finne et svar på i utgangspunktet det samme, bare med ASP.NET kontroller, da jeg fant ut at asp knappen har en egenskap kalt UseSubmitBehaviorsom lar deg angi hvilke man gjør innsending.

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

Bare i tilfelle noen er ute for asp.net knappen måten å gjøre det.

Svarte 24/03/2016 kl. 17:29
kilden bruker

stemmer
7

Med javascript (her jQuery), kan du deaktivere den forrige knappen før du sender inn skjemaet.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Svarte 14/08/2015 kl. 10:01
kilden bruker

stemmer
0

Du kan bruke Tabindexfor å løse dette problemet, også endre rekkefølgen på knappen ville være mer effektiv måte å oppnå dette. Endre rekkefølgen på knappen og legge floatverdier for å tildele dem ønsket posisjon du ønsker å vise i HTMLvisningen.

Svarte 25/04/2018 kl. 06:28
kilden bruker

stemmer
0

Jeg løste en veldig lignende problem på denne måten:

  1. hvis javascripter aktivert (i de fleste tilfeller i dag) så alle de sende knappene er " degradert " til knappene på siden lastes via javascript(jquery). Klikk aktiviteter de " degradert " -knappen skrevet knapper håndteres også via javascript.

  2. hvis javascriptikke er aktivert da skjemaet blir servert til nettleseren med flere sender knapper. I dette tilfellet treffer fyll en textfieldi skjemaet vil sende inn skjemaet med den første knappen i stedet for den tiltenkte standard , men minst formen er fortsatt brukbare: du kan sende med både forrige og neste knapper.

arbeider eksempel:

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

Svarte 09/01/2018 kl. 15:26
kilden bruker

stemmer
0

Prøv dette..!

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

Svarte 29/09/2017 kl. 04:58
kilden bruker

stemmer
-3

Ved å bruke eksempelet du ga:

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

Hvis du klikker på "Forrige side" bare verdien av "forrige" vil bli presentert. Hvis du klikker på "Neste side" bare verdien av "neste" vil bli sendt.

Hvis derimot, trykker du skriver et sted på skjemaet, verken "forrige" eller "neste" vil bli sendt.

Så bruker pseudo-kode kan du gjøre følgende:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Svarte 05/08/2008 kl. 15:08
kilden bruker

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