Πολλαπλές υποβάλουν κουμπιά σε μορφή HTML

ψήφοι
233

Ας πούμε ότι έχετε δημιουργήσει ένα οδηγό σε μορφή HTML. Ένα κουμπί πηγαίνει πίσω, και το ένα πηγαίνει προς τα εμπρός. Από το πίσω κουμπί εμφανίζεται για πρώτη φορά στη σήμανση, όταν πατάτε Enter θα χρησιμοποιήσει αυτό το κουμπί για να υποβάλετε τη φόρμα.

Παράδειγμα:

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

Αυτό που θα ήθελα να κάνω, είναι να αποφασίσετε ποιο κουμπί χρησιμοποιείται για να υποβάλουν το έντυπο όταν κάποιος χρήστης πατήσει Enter. Με αυτόν τον τρόπο, όταν πατάτε Enter ο οδηγός θα προχωρήσουμε στην επόμενη σελίδα, όχι το προηγούμενο. Έχετε να χρησιμοποιήσετε tabindexγια να γίνει αυτό;

Δημοσιεύθηκε 01/08/2008 στις 14:01
πηγή χρήστη
Σε άλλες γλώσσες...                            


23 απαντήσεις

ψήφοι
133

Ελπίζω αυτό να βοηθήσει. Είμαι ακριβώς να κάνει το κόλπο της floatσης τα κουμπιά στα δεξιά.

Με αυτό τον τρόπο το κουμπί Προηγούμενο έχει απομείνει από το κουμπί Επόμενο, αλλά η συνέχεια έρχεται πρώτη στον κώδικα HTML:

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

Επεξεργασία: Τα οφέλη σε σχέση με άλλες προτάσεις: Δεν JavaScript, προσιτό, και τα δύο κουμπιά παραμένουνtype="submit"

Απαντήθηκε 28/08/2008 στις 10:34
πηγή χρήστη

ψήφοι
60

Θα ήταν δυνατό για σας να αλλάξετε τον προηγούμενο τύπο κουμπιού σε ένα κουμπί όπως αυτό:

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

Τώρα το κουμπί Επόμενο θα είναι η προεπιλογή, καθώς θα μπορούσε επίσης να προσθέσετε το defaultχαρακτηριστικό σε αυτό, έτσι ώστε το πρόγραμμα περιήγησής σας θα το αναδείξει σαν αυτό:

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

Ελπίδα που βοηθά.

Απαντήθηκε 01/08/2008 στις 14:14
πηγή χρήστη

ψήφοι
53

Δώστε σας υποβάλει κουμπιά ίδιο όνομα όπως αυτό:

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

Όταν εισαγάγετε ο χρήστης πατήσει και το αίτημα πηγαίνει στο διακομιστή, μπορείτε να ελέγξετε την τιμή submitButtonσε κώδικα διακομιστή σας, το οποίο περιέχει μια συλλογή από έντυπο name/valueζεύγη. Για παράδειγμα, στο κλασικό 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

Παραπομπή: Χρησιμοποιώντας πολλαπλά κουμπιά υποβολής σε μια ενιαία μορφή

Απαντήθηκε 01/08/2008 στις 14:10
πηγή χρήστη

ψήφοι
30

Αν το γεγονός ότι το πρώτο κουμπί χρησιμοποιείται από προεπιλογή είναι συνεπής σε όλους τους φυλλομετρητές, γιατί να μην τα βάζουμε το σωστό γύρω από τον τρόπο με τον πηγαίο κώδικα, στη συνέχεια, χρησιμοποιήστε το CSS για να αλλάξετε προφανή θέσεις τους; floatτα αριστερά και δεξιά για να μεταβείτε γύρω από οπτικά, για παράδειγμα.

Απαντήθηκε 02/08/2008 στις 12:24
πηγή χρήστη

ψήφοι
17

Μερικές φορές η λύση που παρέχεται από @palotasb δεν είναι επαρκής. Υπάρχουν περιπτώσεις όπου η χρήση για παράδειγμα ένα κουμπί «Φίλτρο» υποβάλει τοποθετείται πάνω από τα κουμπιά όπως «Επόμενο και Προηγούμενο». Βρήκα μια λύση για αυτό: αντιγράψτε το κουμπί υποβολής που πρέπει να δράσει ως προεπιλεγμένο κουμπί υποβολής σε μια κρυφή div και τοποθετήστε το στο εσωτερικό του εντύπου πάνω από κάθε άλλο κουμπί υποβολής. Τεχνικά θα υποβληθεί από διαφορετικό κουμπί όταν πατήσετε Enter, στη συνέχεια, όταν κάνετε κλικ στο ορατό κουμπί Επόμενο. Αλλά δεδομένου ότι το όνομα και η τιμή είναι η ίδια, δεν υπάρχει καμία διαφορά στο αποτέλεσμα.

<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>
Απαντήθηκε 26/10/2012 στις 10:53
πηγή χρήστη

ψήφοι
17

Μπορεί να λειτουργήσει με CSS

Βάλτε τους στη σήμανση ως το επόμενο κουμπί πρώτη, τότε το προηγούμενο κουμπί επόμενο.

Στη συνέχεια, χρησιμοποιήστε το CSS για να τα τοποθετήσετε να εμφανίζονται με τον τρόπο που θέλετε

Απαντήθηκε 16/09/2008 στις 13:16
πηγή χρήστη

ψήφοι
17

Kevin, αυτό δεν μπορεί να γίνει με καθαρό HTML. Θα πρέπει να βασίζονται σε τη Javascript για αυτό το τέχνασμα.

Ωστόσο, εάν τοποθετήσετε δύο μορφές στη σελίδα HTML μπορείτε να το κάνετε αυτό.

Φόρμα1 θα είχε το προηγούμενο κουμπί.

Form2 θα έχετε εισάγει ο χρήστης + το επόμενο κουμπί.

Όταν ο χρήστης πατήσει Enterτο Form2, το επόμενο κουμπί υποβολής θα απολύσει.

Απαντήθηκε 26/08/2008 στις 04:44
πηγή χρήστη

ψήφοι
17

Αν πραγματικά θέλουν απλά να λειτουργήσει σαν ένα παράθυρο διαλόγου εγκατάσταση, τι γίνεται με απλά δίνοντας έμφαση στο «Next» για OnLoad. Με αυτόν τον τρόπο, αν ο χρήστης πατήσει Return, η μορφή υποστηρίζει και πηγαίνει προς τα εμπρός. Αν θέλουν να πάνε πίσω μπορεί να χτυπήσει Tab ή κάντε κλικ στο κουμπί.

Απαντήθηκε 26/08/2008 στις 04:41
πηγή χρήστη

ψήφοι
15

Θα χρησιμοποιήσει τη Javascript για να υποβάλει τη φόρμα. Η λειτουργία θα ενεργοποιείται από το γεγονός OnKeyPress του στοιχείου μορφής, και θα διερευνήσει εάν επιλέχθηκε το πλήκτρο Enter. Αν αυτή είναι η περίπτωση, θα υποβάλει τη φόρμα.

Εδώ είναι δύο σελίδες που δίνουν τεχνικές για το πώς να το κάνετε αυτό: 1 , 2 . Με βάση αυτά, εδώ είναι ένα παράδειγμα της χρήσης (με βάση την εδώ ):

<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)" />
Απαντήθηκε 03/08/2008 στις 14:12
πηγή χρήστη

ψήφοι
14

Κέβιν,

Αυτό λειτουργεί χωρίς JavaScript ή CSS στα περισσότερα προγράμματα περιήγησης:

<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 όλες οι εργασίες.
Όπως πάντα, IE είναι το πρόβλημα.

Αυτή η έκδοση λειτουργεί όταν 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>

Έτσι, το ελάττωμα σε αυτή τη λύση είναι:
Προηγούμενη σελίδα δεν λειτουργεί αν χρησιμοποιείτε IE με Javascript off.
Το μυαλό εσείς, το κουμπί πίσω λειτουργεί ακόμα!

Απαντήθηκε 16/09/2008 στις 12:19
πηγή χρήστη

ψήφοι
13

Εάν έχετε πολλά ενεργά κουμπιά σε μία σελίδα, στη συνέχεια, μπορείτε να κάνετε κάτι σαν αυτό:

Σημειώστε το πρώτο κουμπί που θέλετε προκαλεί στο Enterπάτημα των πλήκτρων όπως defaultbutton στη φόρμα. Για το δεύτερο κουμπί το συνδέσει με Backspaceτο πλήκτρο στο πληκτρολόγιο. 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>

Η ελπίδα αυτό βοηθά.

Απαντήθηκε 14/03/2014 στις 15:51
πηγή χρήστη

ψήφοι
12

Μια άλλη απλή λύση θα ήταν να θέσει το κουμπί πίσω μετά το κουμπί υποβολής στον κώδικα HTML, αλλά επιπλέουν προς τα αριστερά έτσι ώστε να εμφανίζεται στην σελίδα πριν από το κουμπί υποβολής.

Αλλαγή της σειράς καρτέλα θα πρέπει να είναι το μόνο που χρειάζεται για να επιτευχθεί αυτό. Φροντίστε να είναι απλή.

Απαντήθηκε 14/10/2014 στις 17:02
πηγή χρήστη

ψήφοι
12

Αλλαγή της σειράς καρτέλα θα πρέπει να είναι το μόνο που χρειάζεται για να επιτευχθεί αυτό. Φροντίστε να είναι απλή.

Μια άλλη απλή λύση θα ήταν να θέσει το κουμπί πίσω μετά το κουμπί υποβολής στον κώδικα HTML, αλλά επιπλέουν προς τα αριστερά έτσι ώστε να εμφανίζεται στην σελίδα πριν από το κουμπί υποβολής.

Απαντήθηκε 27/11/2012 στις 23:27
πηγή χρήστη

ψήφοι
11

κρατήσει το όνομα όλων υποβάλουν τα κουμπιά ίδια - «prev» Η μόνη διαφορά είναι το valueχαρακτηριστικό με μοναδικές τιμές. Όταν δημιουργούμε το σενάριο, αυτές οι μοναδικές τιμές, θα μας βοηθήσει να καταλάβουμε ποια από τα κουμπιά υποβάλει πιέστηκε.

Και γράψτε ακολουθώντας τις κωδικοποίηση:

    btnID = ""
if Request.Form("prev") = "Previous Page" then
    btnID = "1"
else if Request.Form("prev") = "Next Page" then
    btnID = "2"
end if
Απαντήθηκε 05/06/2012 στις 10:19
πηγή χρήστη

ψήφοι
10

Την πρώτη φορά που ήρθα αντιμέτωπη με αυτό ήρθα με μια onclick () / js hack, όταν οι επιλογές δεν είναι προηγούμενο / επόμενο ότι μου αρέσει ακόμα για την απλότητά του. Πάει κάπως έτσι:

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

Όταν είτε κουμπί υποβολής κάνετε κλικ αποθηκεύει την επιθυμητή λειτουργία σε ένα κρυφό πεδίο (το οποίο είναι ένα πεδίο συμβολοσειράς που περιλαμβάνονται στο μοντέλο η μορφή συνδέεται με) και υποβάλλει το έντυπο στο χειριστήριο, το οποίο κάνει όλη τη λήψη αποφάσεων. Στο χειριστήριο, μπορείτε απλά να γράψετε:

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

Μπορείτε επίσης να ενισχύσει αυτό ελαφρά τη χρήση αριθμητικών κωδικών Λειτουργία για την αποφυγή της ανάλυσης string, αλλά αν παίζετε με Enums, ο κώδικας είναι λιγότερο ευανάγνωστο, τροποποιήσιμο, και αυτο-καταγραφή και η συντακτική ανάλυση είναι ασήμαντο, έτσι κι αλλιώς.

Απαντήθηκε 03/09/2015 στις 13:30
πηγή χρήστη

ψήφοι
10

από https://html.spec.whatwg.org/multipage/forms.html#implicit-submission

προεπιλεγμένο κουμπί ενός στοιχείου φόρμας είναι το κουμπί πρώτο υποβάλει για το δέντρο του οποίου η μορφή ιδιοκτήτης είναι το στοιχείο φόρμας.

Εάν ο πράκτορας χρήστη υποστηρίζει αφήσει ο χρήστης υποβάλει μια φόρμα έμμεσα (για παράδειγμα, σε ορισμένες πλατφόρμες πατώντας το πλήκτρο «enter», ενώ ένα πεδίο κειμένου εστιάζεται υποβάλλει εμμέσως τη φόρμα) ...

Έχοντας το επόμενο είσοδος είναι type = «submit» και αλλάζοντας την προηγούμενη είσοδο για να πληκτρολογήσετε = «κουμπί» θα πρέπει να δώσει την επιθυμητή προεπιλεγμένη συμπεριφορά.

<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>
Απαντήθηκε 28/03/2015 στις 21:05
πηγή χρήστη

ψήφοι
10

Αυτό είναι ό, τι έχω δοκιμάσει: 1. Θα πρέπει να βεβαιωθείτε ότι έχετε δώσει τα κουμπιά σας διαφορετικά ονόματα 2. Γράψτε μια εντολή if που θα κάνουν τις απαιτούμενες ενέργειες σε περίπτωση είτε κουμπί πατηθεί.

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

Στην PHP,

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

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

}
Απαντήθηκε 03/03/2014 στις 07:16
πηγή χρήστη

ψήφοι
8

Ήρθα σε αυτό το ερώτημα, όταν προσπαθούμε να βρούμε μια απάντηση ουσιαστικά το ίδιο πράγμα, μόνο με ελέγχους asp.net, όταν κατάλαβα ότι το κουμπί asp έχει μια ιδιότητα που ονομάζεται UseSubmitBehaviorπου σας επιτρέπει να ορίσετε ποια κάνει την υποβολή.

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

Ακριβώς σε περίπτωση που κάποιος ψάχνει για το κουμπί asp.net τρόπος για να το κάνουμε.

Απαντήθηκε 24/03/2016 στις 17:29
πηγή χρήστη

ψήφοι
7

Με javascript (εδώ jQuery), μπορείτε να απενεργοποιήσετε το κουμπί προηγ υποβάλει πριν από τη φόρμα.

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});
Απαντήθηκε 14/08/2015 στις 10:01
πηγή χρήστη

ψήφοι
0

Μπορείτε να χρησιμοποιήσετε Tabindexγια να επιλύσει αυτό το ζήτημα, επίσης αλλάζοντας τη σειρά του κουμπιού θα ήταν πιο αποτελεσματικός τρόπος για να επιτευχθεί αυτό. Αλλάξτε τη σειρά των κουμπιών και προσθέστε floatτις τιμές τους εκχωρήσετε την επιθυμητή θέση που θέλετε να εμφανίζονται στην σας HTMLάποψη.

Απαντήθηκε 25/04/2018 στις 06:28
πηγή χρήστη

ψήφοι
0

Θα λυθεί ένα πολύ παρόμοιο πρόβλημα με αυτό τον τρόπο:

  1. εάν javascriptείναι ενεργοποιημένη (στις περισσότερες περιπτώσεις σήμερα), τότε όλα τα κουμπιά αποστολή « υποβαθμισμένη » για κουμπιά φόρτωση της σελίδας μέσω javascript(jquery). Κάντε κλικ εκδηλώσεις για τα « υποβαθμισμένα » κουμπιών πληκτρολογήσει διεκπεραιώνονται και μέσω javascript.

  2. αν javascriptδεν είναι ενεργοποιημένη, τότε η μορφή σερβίρεται στο πρόγραμμα περιήγησης με πολλαπλά κουμπιά υποβολής. Σε αυτή την περίπτωση το χτύπημα εισάγετε στο ένα textfieldπλαίσιο με τη μορφή θα υποβάλει το έντυπο με το πρώτο κουμπί αντί για την προβλεπόμενη προεπιλογή , αλλά τουλάχιστον η μορφή είναι ακόμα χρησιμοποιήσιμη: μπορείτε να υποβάλετε τόσο με το προηγούμενο και επόμενο κουμπιά.

εργασίας παράδειγμα:

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

Απαντήθηκε 09/01/2018 στις 15:26
πηγή χρήστη

ψήφοι
0

Δοκιμάστε αυτό..!

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

Απαντήθηκε 29/09/2017 στις 04:58
πηγή χρήστη

ψήφοι
-3

Χρησιμοποιώντας το παράδειγμα που έδωσε:

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

Αν κάνετε κλικ στο «Σελίδα» μόνο την αξία του «prev» θα υποβληθεί. Εάν κάνετε κλικ στο «Επόμενη Σελίδα» μόνο θα υποβληθεί η αξία του «επόμενο».

Εάν, ωστόσο, πατήστε enter κάπου στο έντυπο, ούτε το «προηγούμενο», ούτε «επόμενο» θα υποβληθεί.

Έτσι, χρησιμοποιώντας τον κωδικό ψευδο θα μπορούσατε να κάνετε τα εξής:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click
Απαντήθηκε 05/08/2008 στις 16:08
πηγή χρήστη

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