Drücken von "Return" in einem HTML-Formular mit mehreren Submit-Buttons

Stellen wir uns vor, ein HTML-Formular mit zwei submit-buttons. einer von Ihnen befindet sich in der oberen Hälfte der form und tut etwas weniger wichtig. der andere Knopf ist der eigentliche submit-button, der speichert die eingegebenen Daten. dieser Knopf am Ende des Formulars. die beiden Tasten löst den verschiedenen Aktions-urls.

erfahrene Benutzer wie Ihre Formulare senden durch drücken der Taste "enter" oder "return" anstelle von einem Klick auf den entsprechenden button.

leider, der browser sucht nach dem ersten submit-button des jeweiligen Formulars und verwenden Sie diese, um auszuführen, form-submit. da es in meiner form auf die zweite Schaltfläche ist der eigentliche submit-Schaltfläche, ich muss sagen, der browser, um die Verwendung dieser bestimmten Taste (oder die action-url, der verbunden ist mit es).

ich nicht link javascript-Listener, die suchen-Taste gedrückt halten oder sowas. also ich bin auf der Suche nach einem besseren Ansatz für dieses problem. allerdings javascript-oder jquery-Lösungen (ohne keypressed-listerner) sind willkommen.

danken Ihnen sehr für Ihre Hilfe im Voraus.

Kommentar zu dem Problem

Das ist nicht wahr in allen Browsern, als dieses Verhalten war sehr schlecht definiert ist nicht lange her (HTML-Formulare im Allgemeinen schon immer und sind immer noch eine schreckliche Kloake der Ungewissheit). Frühere Versionen von Internet Explorer behandeln, wie Gehorsam, als wenn keine der submit-buttons, wo gedrückt, (denn das ist technisch der Fall ist). Kommentarautor: David

InformationsquelleAutor der Frage DiegoFrings | 2010-01-20

8

Könnte man, zumindest theoretisch, drei submit Tasten in Ihrer form.

Taste zwei ist die vorhandene "weniger wichtig" - Taste (von der Mitte der form), die Taste drei ist die bestehende 'ist-senden" - Taste Ihrer bestehenden form.

Button ausgeblendet werden soll (mit CSS display:none oder visibility: hidden) und sollte ausführen genau die gleiche Funktion wie Ihre aktuelle 'ist-senden.' Ich denke, es werden immer noch die erste Schaltfläche zu finden, die vom browser, unabhängig von seiner Sichtbarkeit.
```
<form method="post" method="whatever.php" enctype="form/multipart">

<fieldset id="first">

<label>...<input />
<label>...<input />
<label>...<input />

<input type="submit" value="submit" style="visibility: hidden;"  />
<input class="less_important" type="submit" value="submit" />

</fieldset>

<fieldset id="second">

<label>...<input />
<label>...<input />
<label>...<input />

<input type="submit" value="submit" class="actual_submit" />

</fieldset>

</form>
```
Bearbeitet in Reaktion auf die Kommentare:

Dachte ich, versteckte Knöpfe waren auch standardmäßig deaktiviert? [md5sum]

Einen gültigen Punkt, aber ich machte den Fehler, Prüfung nur im Firefox (3.5.7, Ubuntu 9.10) vor dem posting, in dem die Technik funktionierte¹, für beide. Die vollständige xhtml-Datei eingefügt (unten), bildet die Grundlage meiner Prüfung nachträglich für diese Kommentare.
```
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>3button form</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
        <script type="text/javascript" src="js/jquery.js"></script>


        <script type="text/javascript">

$(document).ready(

    function() {

        $('input[type="submit"]').click(
            function(e){
                alert("button " + $(this).attr("name"));
            }
        );

    }
);
        </script>


</head>

<body>

<form method="post" method="whatever.php" enctype="form/multipart">

<fieldset id="first">

<label>...<input />
<label>...<input />
<label>...<input />

<input name="one" type="submit" value="submit" style="display:none;" /> 
<input name="two" class="less_important" type="submit" value="submit" />

</fieldset>

<fieldset id="second">

<label>...<input />
<label>...<input />
<label>...<input />

<input name="three" type="submit" value="submit" class="actual_submit" />

</fieldset>

</form>


</body>

</html>
```
display: none sollte verhindern, dass eine Taste wird zu einem aktiven Teil der form (in die Ergebnismenge aufgenommen, und berechtigt, für Standard-button-ness); visibility: hidden sollte nicht. Aber diese beiden Fälle sind irrten durch einige Browser. Der normale Weg, um eine unsichtbare ersten submit-button ist position: absolute; es und verschieben Sie es Weg von der Seite (zB. mit Links: -4000px). Das ist hässlich, aber zuverlässig. Es ist auch eine gute Idee, ändern Sie dessen tabindex-Eigenschaft, so dass es nicht stören in der erwarteten form Tab-Reihenfolge.

Gibt es mindestens zwei Punkte, die ich extra zu diesem Kommentar. In der Reihenfolge:
1. "Der normale Weg..." ich war nicht bewusst, dass es einen normalen Weg, und präsentiert diese option als eine Möglichkeit zu erreichen, ein Ziel, in dem vollen wissen, dass es waren/sind fast sicher, eine beliebige Anzahl von besseren Möglichkeiten, insbesondere angesichts der Tatsache, dass ich nicht sehe, einen guten Grund für mehrere submit-buttons auf der gleichen form.
2. Angesichts der letztere Satz der oben genannten Punkt möchte ich klarstellen, dass ich nicht befürworten, dies zu tun. An alle. Es fühlt sich an wie eine hässliche und nicht-semantische, hack, um mehr als einen submit-button mit in den OP Instanz - eine Taste offenbar nicht einen submit-button.
3. Der Begriff `position: absolute; left: -4000px;` hatte, fiel mir ein, aber es schien Wirkung viel das gleiche wie " Sicht: versteckt;", und ich habe eine angeborene Abneigung gegen `position: absolute;` aus welchem Grund auch immer...also ging ich mit der option, das weniger anstößig für mich an der Zeit zu schreiben... =)
Ich Schätze Ihren Kommentar über die tabindex-Eigenschaft, obwohl, das war etwas, was ich nie gab jeglichen Gedanken auf, bei allen.

Tut mir Leid, wenn ich Klang etwas schnippisch, es ist spät, ich bin müde...yadda-yadda; ich habe die Prüfung in den verschiedenen Browsern ist, da ich zurück nach Hause und es scheint, dass Firefox 3.5+ gibt, die das gleiche Verhalten -reporting '- Taste eine' auf beiden Windows XP und Ubuntu 9.10, alle Webkit-Browser (Midori, Epiphany, Safari und Chrome) Versagen und Bericht ' - button zwei.'

Also ist es definitiv ein fail-gute Idee, zu display: none; den submit-button. In der Erwägung, dass die visibility:hidden zumindest funktioniert.
1. Ich meine, schlagen Sie "enter" ausgelöst, werden die form-submit-Ereignis oder das click-Ereignis des ersten submit-button des Formulars, unabhängig davon, ob das erste reichen war `display: none; "oder" visibility: hidden`.
  
  Bitte beachten Sie, dass meine jQuery-Kenntnisse sind begrenzt, so dass die tests eingesetzt (ich lief erst zu einem Zeitpunkt, zu versuchen und zu verhindern, dass Konflikte auftreten, in der Ausführung, auskommentieren, die ich nicht gleichzeitig ausgeführt werden, beide präsentiert werden-ein, klar, auskommentiert) kann gut sein, unzureichend und nicht repräsentativ.
InformationsquelleAutor der Antwort David Thomas
19

ändern Sie Ihre erste Schaltfläche, um eine <input type="button" />.

InformationsquelleAutor der Antwort Lucas
3

Was bedeutet der erste button? Wenn Sie brauchen nur eine Taste, um schonmal ein js-listener, die nicht senden, verwenden Sie
```
<button type="button" id="myButton">Text Here</button>
```
InformationsquelleAutor der Antwort Erik
0

Ist es eine option für absolute Positionierung auf Ihre weniger wichtig submit-button und es erscheint, nachdem Sie Ihre primäre submit-button in HTML? So können Sie haben:
```
<form>
<p>
Stuff
<input type="submit" value="This is my main submit button" />
<input type="submit" value="This is my secondary submit button" style="position: absolute; left: 0px; top: 0px; />
</p>
</form>
```
Ihre sekundäre submit-button erscheint zuerst auf dem Bildschirm, aber das primäre submit-button Vorrang haben sollte, wenn die EINGABETASTE gedrückt wird.

InformationsquelleAutor der Antwort Wes

<script>
$(function(){
    $('#button-new-captcha').click(function(){
        $('input[name=button-submit]').prop('name', 'button-new-captcha').click();
    });
});
</script>

<div class="buttons">
    <a class="btn btn-cancel" href="/login">Cancel</a> 
    <a class="btn btn-default" href="#" id="button-new-captcha">New Image</a> 
    <input type="submit" name="button-submit" class="btn btn-default" value="Send Username">    
</div>

InformationsquelleAutor der Antwort dev

0

Anderen Abhilfe zu schaffen, ist eine zusätzliche nicht-funktionale submit-input-am Anfang die form und verstecken Sie es mit Deckkraft:
```
<input type="submit" value="" onclick="return false;" style="opacity: 0">
```
Den button gezeichnet wird auf der Seite, wenn auch transparent, so müssen Sie einige Immobilien. Alternativ können Sie auch spielen Sie mit drücken Sie ihn hinter einem anderen element mit z-index oder das rendering außerhalb der Seite, wie andere vorgeschlagen haben, hier vor.

Was gewinnen Sie mit onclick="return false;" ist, dass das Formular nicht eingereicht werden, wenn man "Enter" mehr; kein Neuladen der Seite, entweder.

InformationsquelleAutor der Antwort gopherIT

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.