Meerdere submit knoppen in een HTML-formulier

stemmen
233

Laten we zeggen dat je een wizard te creëren in een HTML-formulier. Een knop gaat terug, en men gaat vooruit. Omdat de back -knop voor het eerst in de markup wordt weergegeven wanneer u op Enter drukt zal die knop gebruiken om het formulier te verzenden.

Voorbeeld:

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

Wat ik zou willen doen, is het krijgen om te beslissen welke knop wordt gebruikt om het formulier in te dienen wanneer een gebruiker op Enter drukt. Op die manier, wanneer u op Enter drukt de wizard gaat naar de volgende pagina, niet de vorige. Heeft u te gebruiken tabindexom dit te doen?

De vraag is gesteld op 01/08/2008 om 14:01
bron van user
In andere talen...                            


23 antwoorden

stemmen
53

Geef je dezelfde naam in te dienen knoppen als volgt uit:

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

Wanneer de gebruiker op te voeren en de aanvragen gaat naar de server, kunt u de waarde te controleren submitButtonop uw server-side code die een verzameling van formulier bevat name/valueparen. Bijvoorbeeld in de klassieke 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

Referentie: Het gebruik van meerdere indienen knoppen op een enkel formulier

antwoordde op 01/08/2008 om 14:10
bron van user

stemmen
60

Zou het mogelijk zijn dat u met het voorgaande type knop veranderen in een knop als volgt uit:

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

Nu zou de knop Volgende de standaard zijn, plus je kon ook de toe te voegen defaultattribuut om het zo dat uw browser zal markeren als volgt:

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

Hoop dat het helpt.

antwoordde op 01/08/2008 om 14:14
bron van user

stemmen
30

Indien het feit dat de eerste knop wordt standaard is consistent in verschillende browsers, waarom niet zet ze op de juiste manier in de broncode, dan gebruik CSS om hun schijnbare posities te schakelen? floatze links en rechts om ze rond visueel te schakelen, bijvoorbeeld.

antwoordde op 02/08/2008 om 12:24
bron van user

stemmen
15

Ik zou Javascript gebruiken om het formulier te verzenden. De functie zal worden geactiveerd door de OnKeyPress gebeurtenis van het formulier element, en zou detecteren of de Enter-toets werd geselecteerd. Als dit het geval is, zal het formulier.

Hier zijn twee pagina's die technieken over hoe om dit te doen te geven: 1 , 2 . Op basis van deze, hier is een voorbeeld van het gebruik (op basis van hier ):

<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)" />
antwoordde op 03/08/2008 om 14:12
bron van user

stemmen
-3

Met behulp van het voorbeeld dat je gaf:

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

Als u klikt op "Vorige pagina" alleen de waarde van de "vorige" zal worden voorgelegd. Als u klikt op "Next Page" alleen de waarde van de "next" zal worden voorgelegd.

Als u echter drukt u invoert ergens op het formulier, noch "prev" of "next" zal worden voorgelegd.

Dus met behulp van pseudo-code kon je het volgende doen:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
antwoordde op 05/08/2008 om 16:08
bron van user

stemmen
17

Als je echt wil gewoon dat het werkt als een dialoog te installeren, hoe zit het gewoon aandacht te richten op de "Next" knop OnLoad. Op die manier als de gebruiker raakt Return, het formulier indient en gaat vooruit. Als ze willen om terug te gaan kunnen ze op Tab of klik op de knop.

antwoordde op 26/08/2008 om 04:41
bron van user

stemmen
17

Kevin, dit kan niet worden gedaan met pure HTML. Je moet vertrouwen op JavaScript voor deze truc.

Echter, als je twee vormen te plaatsen op de HTML-pagina kunt u dit doen.

Form1 zou de vorige knop te hebben.

Formulier2 zou iedere gebruiker ingangen + de volgende knop te hebben.

Wanneer de gebruiker op Enterin formulier2, de Next submit knop zou schieten.

antwoordde op 26/08/2008 om 04:44
bron van user

stemmen
133

Ik hoop dat dit helpt. Ik doe gewoon de truc van floating de knoppen aan de rechterkant.

Op deze manier de Vorige knop links van de knop Volgende maar de Next komt eerst in de HTML-code:

.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: De voordelen ten opzichte van andere suggesties: geen JavaScript, toegankelijk, beide knoppen blijventype="submit"

antwoordde op 28/08/2008 om 10:34
bron van user

stemmen
14

Kevin,

Dit werkt zonder javascript of CSS in de meeste browsers:

<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 al het werk.
Zoals altijd, IE is het probleem.

Deze versie werkt wanneer javascript is ingeschakeld:

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

Dus de fout in deze oplossing is:
Vorige pagina werkt niet als je IE af te gebruiken met Javascript.
Let wel, de back-knop werkt nog steeds!

antwoordde op 16/09/2008 om 12:19
bron van user

stemmen
17

Het kan werken met CSS

Leg ze in de markup als de volgende knop eerst, dan de vorige knop naast.

Maak dan gebruik van CSS om ze te positioneren aan de manier waarop u wilt voorkomen

antwoordde op 16/09/2008 om 13:16
bron van user

stemmen
11

houden de naam van alle in te dienen knoppen hetzelfde - "prev" Het enige verschil is het valueattribuut met unieke waarden. Toen we het script te maken, zullen deze unieke waarden ons helpen om erachter te komen welke van de in te dienen knoppen werd gedrukt.

En schrijf follwing codering:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
antwoordde op 05/06/2012 om 10:19
bron van user

stemmen
17

Soms zijn de geleverde oplossing door @palotasb is niet voldoende. Er zijn use cases waarin bijvoorbeeld een "Filter" submit knop boven knoppen zoals "Next en Previous" geplaatst. Ik vond een oplossing voor dit: kopieer de submit knop die moet fungeren als standaard submit knop in een verborgen div en plaats deze in de vorm boven alle andere verzendknop. Technisch gezien zal worden ingediend door een andere knop wanneer op Enter te drukken dan bij het klikken op de zichtbare knop Volgende. Maar omdat de naam en de waarde is hetzelfde, er is geen verschil in het resultaat.

<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>
antwoordde op 26/10/2012 om 10:53
bron van user

stemmen
12

Het veranderen van de tabvolgorde moet alles wat nodig is om dit te bereiken zijn. Hou het simpel.

Een andere eenvoudige optie zou zijn om de back-knop gezet na de submit knop in de HTML-code, maar drijven deze naar links, zodat deze op de pagina voor de submit knop.

antwoordde op 27/11/2012 om 23:27
bron van user

stemmen
10

Dit is wat ik heb geprobeerd: 1. U moet ervoor zorgen dat u geeft uw knoppen verschillende namen 2. Schrijf een if-statement dat de vereiste actie zal doen als een van de knoppen in aangeklikt.

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

In PHP,

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

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

}
antwoordde op 03/03/2014 om 07:16
bron van user

stemmen
13

Als u meerdere actieve knoppen op één pagina dan kun je zoiets als dit te doen:

Markeer de eerste knop die u wilt triggers op Entertoetsaanslag als defaultButton op het formulier. Voor de tweede knop te koppelen aan Backspaceknop op het toetsenbord. 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>

Ik hoop dat dit helpt.

antwoordde op 14/03/2014 om 15:51
bron van user

stemmen
12

Een andere eenvoudige optie zou zijn om de back-knop gezet na de submit knop in de HTML-code, maar drijven deze naar links, zodat deze op de pagina voor de submit knop.

Het veranderen van de tabvolgorde moet alles wat nodig is om dit te bereiken zijn. Hou het simpel.

antwoordde op 14/10/2014 om 17:02
bron van user

stemmen
10

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

Een vorm element default knop is de eerste knop in te dienen in de boom orde waarvan de vorm eigenaar is die vorm element.

Als de user agent ondersteunt laten de gebruiker een formulier impliciet (bijvoorbeeld op sommige platforms raken van de "enter" toets ingedrukt terwijl een tekstveld is gericht impliciet legt de vorm) ...

Het hebben van de volgende input type = "submit" en het veranderen van de vorige invoer naar type = "button" moet de gewenste standaard gedrag te geven.

<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>
antwoordde op 28/03/2015 om 21:05
bron van user

stemmen
7

Met javascript (hier jQuery), kunt u deze uitschakelen van de vorige knop voordat het formulier.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
antwoordde op 14/08/2015 om 10:01
bron van user

stemmen
10

De eerste keer dat ik kwam op tegen dat ik kwam met een onclick () / js hack wanneer keuzes niet vorige / volgende dat ik nog steeds graag voor zijn eenvoud. Het gaat als volgt:

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

Wanneer een submit knop wordt geklikt slaat de gewenste bewerking in een verborgen veld (dat is een string veld in het model de vorm wordt geassocieerd met) en legt het formulier naar de Controller, die doet al de beslissende. In de Controller, je gewoon schrijven:

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

U kunt dit ook vast iets omhoog met behulp van de numerieke bediening codes om de string parsing te vermijden, maar tenzij je speelt met opsommingen, de code minder leesbaar, aanpasbaar, en zelf-documenteren en het interpreteren is triviaal, maar toch.

antwoordde op 03/09/2015 om 13:30
bron van user

stemmen
8

Ik kwam over deze vraag wanneer het proberen om een antwoord te vinden in principe hetzelfde, alleen met asp.net controles, toen ik erachter dat de asp-knop heeft een eigenschap UseSubmitBehaviordie u toelaat om te stellen welke de indienende doet.

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

Voor het geval dat iemand die op zoek is naar de asp.net knop manier om het te doen.

antwoordde op 24/03/2016 om 17:29
bron van user

stemmen
0

Probeer dit..!

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

antwoordde op 29/09/2017 om 04:58
bron van user

stemmen
0

Ik loste een zeer soortgelijk probleem op deze manier:

  1. wanneer javascriptis ingeschakeld (in de meeste gevallen tegenwoordig) dan zullen alle submit knoppen zijn " gedegradeerd " tot knoppen pagina te laden via javascript(jQuery). Klik evenementen op de " gedegradeerde " knop getypte toetsen worden ook afgehandeld via javascript.

  2. zo javascriptis dan niet mogelijk het formulier wordt geserveerd op de browser met meerdere indienen knoppen. In dat geval slaan voer op een textfieldbinnen de vorm zal het formulier met de eerste knop in plaats van de beoogde te dienen standaard , maar in ieder geval de vorm is nog steeds bruikbaar is: je kunt indienen met zowel de vorige en volgende knoppen.

werkend voorbeeld:

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

antwoordde op 09/01/2018 om 15:26
bron van user

stemmen
0

U kunt gebruiken Tabindexom dit probleem op te lossen, verandert ook de volgorde van de knop zou meer efficiënte manier om dit te bereiken zijn. De volgorde van de knop en voeg floatwaarden ze de gewenste positie die u wilt tonen in je toewijzen HTMLuitzicht.

antwoordde op 25/04/2018 om 06:28
bron van user

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