Veelvuldige indienknoppies in 'n HTML-vorm

StackOverflow https://stackoverflow.com/questions/48

Vra

Kom ons sê jy skep 'n Wizard in 'n HTML-vorm.Een knoppie gaan terug, en een gaan vorentoe.Sedert die terug knoppie verskyn eerste in die opmaak wanneer jy Enter druk dit sal daardie knoppie gebruik om die vorm in te dien.

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 ek graag wil doen, is om te besluit watter knoppie gebruik word om die vorm in te dien wanneer 'n gebruiker Enter druk.Op hierdie manier, wanneer jy Enter druk, sal die Wizard na die volgende bladsy beweeg, nie die vorige nie.Moet jy gebruik tabindex om dit te doen?

Was dit nuttig?

Oplossing

Ek hoop hierdie help.Ek doen net die truuk van floatdeur die knoppies aan die regterkant te gebruik.

Op hierdie manier die Prev knoppie is links van die Next knoppie maar die Next kom eerste in die HTML-struktuur:

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

Wysig: Voordele bo ander voorstelle:geen JavaScript, toeganklik, beide knoppies bly type="submit"

Ander wenke

Sou dit vir jou moontlik wees om die vorige tipe knoppie in 'n knoppie soos hierdie te verander: 

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

Nou sal die Volgende-knoppie die verstek wees, en jy kan ook die byvoeg default ken dit toe sodat jou blaaier dit so sal uitlig:

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

Hoop dit help.

Gee jou indienknoppies dieselfde naam soos volg:

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

Wanneer die gebruiker enter druk en die Versoek na die bediener gaan, kan u die waarde nagaan submitButton op jou bediener-kant kode wat 'n versameling vorm bevat name/value pare.Byvoorbeeld in 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

Verwysing: Gebruik veelvuldige indienknoppies op 'n enkele vorm

As die feit dat die eerste knoppie by verstek gebruik word konsekwent oor blaaiers heen is, hoekom plaas dit dan nie op die regte manier in die bronkode nie, gebruik dan CSS om hul oënskynlike posisies te verander? float hulle links en regs om hulle byvoorbeeld visueel om te skakel.

As jy regtig net wil hê dit moet werk soos 'n installeringsdialoog, wat daarvan om net fokus te gee aan die "Volgende" knoppie OnLoad.Op hierdie manier, as die gebruiker Return tik, word die vorm ingedien en vorentoe gaan.As hulle wil teruggaan, kan hulle Tab druk of op die knoppie klik.

Soms is die verskafde oplossing deur @palotasb nie voldoende nie.Daar is gebruiksgevalle waar byvoorbeeld 'n "Filter" indien knoppie bo knoppies soos "Volgende en Vorige" geplaas word.Ek het 'n oplossing hiervoor gevind: kopieer die indien-knoppie wat as die verstek indien-knoppie moet optree in 'n versteekte div en plaas dit binne die vorm bo enige ander indien-knoppie.Tegnies sal dit deur 'n ander knoppie ingedien word wanneer u Enter druk en dan wanneer u op die sigbare Volgende-knoppie klik.Maar aangesien die naam en waarde dieselfde is, is daar geen verskil in die resultaat nie.

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

Kevin, dit kan nie met suiwer HTML gedoen word nie.Jy moet staatmaak op JavaScript vir hierdie truuk.

As jy egter twee vorms op die HTML-bladsy plaas, kan jy dit doen.

Form1 sal die vorige knoppie hê.

Form2 sal enige gebruikerinvoer + die volgende knoppie hê.

Wanneer die gebruiker druk Voer in in Form2 sal die Next submit-knoppie brand.

Jy kan dit met CSS doen.

Plaas die knoppies in die opmaak met die Next knoppie eers, dan die Prev knoppie daarna.

Gebruik dan CSS om hulle te posisioneer om te verskyn soos jy wil.

Ek sal Javascript gebruik om die vorm in te dien.Die funksie sal geaktiveer word deur die OnKeyPress-gebeurtenis van die vormelement, en sal opspoor of die Enter-sleutel gekies is.Indien dit die geval is, sal dit die vorm indien.

Hier is twee bladsye wat tegnieke gee oor hoe om dit te doen: 1, 2.Op grond hiervan is hier 'n voorbeeld van gebruik (gebaseer op 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)" />

Kevin,

Dit werk sonder javascript of CSS in die meeste blaaiers:

<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 werk almal.
Soos altyd is IE die probleem.

Hierdie weergawe werk wanneer javascript aangeskakel is:

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

Die fout in hierdie oplossing is dus:
Vorige bladsy werk nie as jy IE gebruik met Javascript af nie.
Let wel, die terugknoppie werk steeds!

As jy veelvuldige aktiewe knoppies op een bladsy het, kan jy so iets doen:

Merk die eerste knoppie waarop jy snellers wil hê Voer in sleuteldruk as verstekknoppie op die vorm.Vir die tweede knoppie assosieer dit met Backspace knoppie op sleutelbord. Backspace gebeurteniskode is 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>

Hoop dit help.

Die verandering van die oortjie-volgorde behoort al te wees om dit te bereik.Hou dit eenvoudig.

Nog 'n eenvoudige opsie sou wees om die terug-knoppie na die indien-knoppie in die HTML-kode te plaas, maar dit na links te laat dryf sodat dit op die bladsy voor die indien-knoppie verskyn.

Nog 'n eenvoudige opsie sou wees om die terug-knoppie na die indien-knoppie in die HTML-kode te plaas, maar dit na links te laat dryf sodat dit op die bladsy voor die indien-knoppie verskyn.

Die verandering van die oortjie-volgorde behoort al te wees om dit te bereik.Hou dit eenvoudig.

hou die naam van alle indien-knoppies dieselfde -- "prev" Die enigste verskil is die value kenmerk met unieke waardes.Wanneer ons die skrif skep, sal hierdie unieke waardes ons help om uit te vind watter van die indien-knoppies gedruk is.

En skryf die volgende kodering:

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

Die eerste keer wat ek hierteen teëgekom het, het ek met 'n onclick()/js-hack vorendag gekom wanneer keuses nie prev/next is nie, waarvan ek steeds hou vir sy eenvoud.Dit gaan so:

@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 van die indien-knoppies geklik word, stoor dit die verlangde bewerking in 'n versteekte veld (wat 'n stringveld is wat ingesluit is in die model waarmee die vorm geassosieer word) en die vorm aan die kontroleerder, wat al die besluit neem.In die kontroleerder skryf jy eenvoudig:

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

Jy kan dit ook effens verskerp deur numeriese bewerkingskodes te gebruik om die string-ontleding te vermy, maar tensy jy met Enums speel, is die kode minder leesbaar, veranderbaar en selfdokumenterend en die ontleding is in elk geval triviaal.

Dit is wat ek probeer het:1.U moet seker maak dat u u knoppies verskillende name 2 gee.Skryf 'n if-stelling wat die vereiste aksie sal doen as enige van die knoppies geklik word.

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

}

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

Die standaardknoppie van 'n vormelement is die eerste Submit -knoppie in boomorde waarvan die vorm -eienaar die vormelement is.

As die gebruikersagent ondersteun om die gebruiker implisiet 'n vorm in te dien (byvoorbeeld op sommige platforms wat die "Enter" -toets tref, terwyl 'n teksveld implisiet gefokus is, dien die vorm in) ...

As die volgende invoer type="submit" is en die vorige invoer verander na type="button" behoort die verlangde verstekgedrag te gee.

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

Ek het op hierdie vraag afgekom toe ek probeer het om 'n antwoord op basies dieselfde ding te vind, net met asp.net-kontroles, toe ek uitgevind het dat die asp-knoppie 'n eienskap het genaamd UseSubmitBehavior wat jou toelaat om te bepaal watter een die indiening doen. 

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

Net ingeval iemand op soek is na die asp.net-knoppie manier om dit te doen.

Met javascript (hier jQuery), kan u die vorige knoppie deaktiveer voordat u die vorm indien.

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

Ek het 'n baie soortgelyke probleem op hierdie manier opgelos:

  1. as javascript is geaktiveer (in die meeste gevalle deesdae) dan is al die indien-knoppies "verneder" na knoppies by bladsy laai via javascript (jquery).Klik op gebeurtenisse op die "verneder"-knoppie-getikte knoppies word ook hanteer via javascript.

  2. as javascript is nie geaktiveer nie, dan word die vorm aan die blaaier bedien met veelvuldige indienknoppies.In hierdie geval druk enter op a textfield binne die vorm sal die vorm indien met die eerste knoppie in plaas van die beoogde verstek, maar die vorm is ten minste nog bruikbaar:jy kan indien met beide die vorige en volgende knoppies.

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

Probeer hierdie..!

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

Jy kan gebruik Tabindex om hierdie probleem op te los, sal ook die verandering van die volgorde van die knoppie meer doeltreffende manier wees om dit te bereik.Verander die volgorde van die knoppie en voeg by float waardes om aan hulle die verlangde posisie toe te wys wat jy in jou wil wys HTML beskou.

Gebruik die voorbeeld wat jy gegee het:

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

As jy op "Vorige Bladsy" klik, sal slegs die waarde van "vorige" ingedien word.As jy op "Volgende Bladsy" klik, sal slegs die waarde van "volgende" ingedien word.

As jy egter iewers op die vorm enter druk, sal nie "vorige" of "volgende" ingedien word nie.

So met behulp van pseudo-kode kan jy die volgende doen:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top