IE sendet beim Klicken auf ein Button-Element einen inneren HTML-Code

8

Ich habe den folgenden HTML-Code in meiner Webseite (vereinfacht).

%Vor%

In Firefox wird "ButtonA" als Wert für den Formularwert "action" übergeben. In IE7 wird jedoch "Hier klicken" gesendet. Gibt es eine Möglichkeit, dies zu lösen? Ich möchte keine Eingabe-Tags verwenden, weil ich in der Lage sein muss, den Text anzupassen, ohne die Werte zu beeinflussen, die zurück an das Formular gesendet werden (Lokalisierung). Grundsätzlich möchte ich mehrere Schaltflächen mit demselben Namen haben und je nach Wert eine andere Aktion ausführen. Ist es einfach, IE in diesem Fall richtig zu handeln?

[MEHR]

Vielleicht sollte ich klarer sein, aber ich kann nicht

verwenden %Vor%

Ich muss den angezeigten Text für Lokalisierungsregeln ändern können, ohne den tatsächlichen Wert der Schaltfläche zu beeinflussen, die mit dem Formular gesendet wurde.

[MEHR]

Um noch mehr zu erläutern, Grundsätzlich möchte ich mit dem Button je nach Sprache "Save" oder "Sauver" sagen können, aber nicht den Wert ändern, der an den Server übermittelt wird. Ich möchte auch mehrere Schaltflächen mit demselben Namen haben und je nach Wert etwas tun, statt vom Namen der Schaltfläche abhängig zu sein, und testen, ob es einen Wert für diese Schaltfläche gibt. Der Code ist bereits aus dieser Perspektive geschrieben, und ich möchte nur den angezeigten Text in den Werten ändern können, ohne den serverseitigen Verarbeitungscode zu verwenden.

Hier ist ein Link mit einer sehr guten Erklärung des Problems , mit einigen möglichen Arbeitsumgebungen.

    
Kibbee 18.12.2008, 17:48
quelle

12 Antworten

3

Eine Lösung besteht darin, Javascript und ein verstecktes Feld zu verwenden

%Vor%

Dies funktioniert auch als versteckter CATPCHA, und Sie können eine Client-Validierung in der JavaScript-Funktion hinzufügen

Bearbeiten:

Da Sie sagen, dass Sie zu Nicht-Javascript-Browsern degradieren möchten, können Sie diese Version verwenden, die den Personen ohne JavaScript nur eine Standardaktion erlaubt

Die zusätzlichen Schaltflächen sind in HTML deaktiviert, aber dann mit Javascript wieder aktiviert.
Getesteter Code:

%Vor%     
Eduardo Molteni 18.12.2008 17:56
quelle
2

Die übliche Problemumgehung, um mit einem Input-Submit arbeiten zu können, besteht darin, den Wert in mehrere "name" -Attribute einzufügen, zB:

%Vor%

Der Formularlayer, den ich persönlich verwende, wird automatisch so konvertiert, als würde ein "Submit" -Steuerelement mit dem Wert "buttonA" oder "buttonB" angeklickt, aber in den meisten Umgebungen sollte es einfach manuell zu machen sein.

    
bobince 20.12.2008 13:09
quelle
2

Ich musste mich einfach mit der wunderbaren Implementierung von button elements von IE6 beschäftigen. Diese Lösung funktioniert mit Javascript, aber manche finden sie vielleicht nützlich.

Es ist besonders ärgerlich, wenn Sie den AbstractWizardController im Spring-Framework verwenden, da das button -Element die ideale Lösung für die Schaltflächen "Next", "Back" und "Finish" des Assistenten ist, aber in IE6 nicht funktioniert / p>

Also habe ich am Ende ein kleines jQuery-basiertes Update geschrieben (obwohl es ziemlich trivial ist, es zu konvertieren, so dass Sie die jQuery-Bibliothek nicht benutzen müssen).

%Vor%

Dies fügt allen Schaltflächenelementen ein onclick-Ereignis hinzu. Wenn auf eine Schaltfläche geklickt wird, wird das upperHTML der Schaltfläche abgerufen, z. B .:

%Vor%

und parse das Wertattribut aus. Es scheint eine Menge Probleme zu bestehen, um den Wert zu erhalten, aber ich fand, dass getAttributeNode('value').value das innereHTML anstatt das spezifizierte Wertattribut zurückgab, war also nicht sehr hilfreich. Wir setzen dann das Submatch der Regex als den Wert der Schaltfläche. Es sollte übereinstimmen, wenn Sie entweder doppelte oder einfache Anführungszeichen als Trennzeichen verwenden, aber Sie müssen eine Art Trennzeichen verwenden .

Das Ergebnis davon ist, dass anstatt "Walter Payton" gepostet wird, stattdessen "34" gepostet wird. Der Nachteil ist, dass das Aussehen der Schaltfläche auf der Seite auch auf "34" wechselt, kurz bevor das Formular abgeschickt wird.

Schließlich findet das Skript alle Schaltflächenelemente außer dem angeklickten und setzt ihr disabled -Attribut, um es zu deaktivieren. Dies stellt sicher, dass sie nicht im POST enthalten sind und Sie keine falschen positiven Ergebnisse erhalten.

    
Luke 17.06.2009 16:28
quelle
1

Wie Eduardo erwähnt, klingt JavaScript wie Ihre beste Option. Sie müssen jedoch die Tatsache berücksichtigen, dass ein Benutzer, der JavaScript deaktiviert hat, nicht den entsprechenden Wert erhält.

    
cLFlaVA 18.12.2008 18:00
quelle
1

Ich denke, dass Sie dieses ganze Konzept überdenken sollten. Ich habe das Gefühl, dass dein Szenario ungefähr so ​​aussieht:

  • Der Benutzer klickt auf Speichern oder Abbrechen
  • Serverseitig prüfen Sie, ob der Wert "Speichern" oder "Abbrechen"
  • ist
  • Sie führen Aktionen basierend auf diesem
  • durch

In der Realität sollte es egal sein, was der Wert einer Schaltfläche "Speichern" ist. In PHP zum Beispiel können Sie einfach im Element Speichern nach a suchen. Unabhängig davon, ob der Wert "Save" oder "Sauver" ist, können Sie die Speicherfunktion ausführen.

Ich entschuldige mich, wenn ich hier weit weg bin. Lassen Sie mich wissen, ob meine Annahmen richtig sind.

    
cLFlaVA 18.12.2008 19:07
quelle
1

Gute Neuigkeiten: Microsoft hat dies in IE8 behoben (nur im Standardmodus)

Schlechte Nachrichten: Es ist immer noch in der Beta

Diese jQuery-Korrektur funktioniert in Ordnung oder Sie kann deinen eigenen JS hacken, um IE zu behandeln.

Was diejenigen betrifft, die eine Eingabe über die Schaltfläche vorschlagen, ist das in Ordnung, aber wenn Sie Grafiken oder verschiedene Stile auf Ihrer Schaltfläche möchten, ist die Schaltfläche die einzige Möglichkeit.

    
scunliffe 18.12.2008 21:47
quelle
1

Der Link, den Sie in der Frage bereitgestellt haben , erklärt, dass IE6 einreicht Alle Schaltflächen bei jeder Formularübermittlung, sodass Ihre App nicht mit IE6 funktioniert, egal, welche Problemumgehung Sie verwenden. Ich habe das getestet und verifiziert, dass IE6 das tatsächlich tut. Dies bedeutet, dass ohne Javascript die & lt; Schaltfläche & gt; Tag ist nutzlos mit IE6, und angesichts der anderen Einschränkung ist es stark mit IE7 ebenso eingeschränkt. Die einzige Problemumgehung ohne Javascript, die ich mir vorstellen kann, ist, dass Sie Ihre & lt; Schaltfläche & gt; Tags außerhalb Ihrer Haupt & lt; Form & gt; in ihren eigenen Formen. Sie können dies mit & lt; a & gt; Tags, aber ich kann nicht empfehlen, da Links immer GET-Anfragen sind und GET-Anfragen niemals Nebenwirkungen haben sollten, wie zum Beispiel das Ändern von Daten.

%Vor%

Der Nachteil der Verwendung mehrerer Formulare besteht darin, dass Sie in Bezug darauf, was Sie übertragen können, eingeschränkt sind. Wenn der Benutzer die Menge im obigen Formular ändert, werden die Informationen nicht übermittelt, wenn der Benutzer auf "Entfernen" klickt. Aber Sie könnten diese graziöse Degradierung für Nicht-JS-Benutzer in Betracht ziehen und JS verwenden, um die Daten im Hauptformular mit den versteckten Formularen zu synchronisieren.

    
quelle
0

Ich denke, Sie sollten <input type="submit" /> anstelle von <button> verwenden.

    
Abram Simon 18.12.2008 17:51
quelle
0

Verwenden Sie <input> anstelle von <button> . Ansonsten ist hier eine Beschreibung eines netten jQuery-basierten Hacks .

    
Bullines 18.12.2008 17:53
quelle
0

Ich kenne keine Möglichkeit, es in IE7 (oder IE6) ohne JavaScript (oder seltsame Multi-Form-Konstruktionen) funktionieren zu lassen.

Ist das nicht auch irgendwie zugänglich für das Backend? Angenommen, der Text stammt aus einer Datenbank oder wird er nur in den lokalen Vorlagen eingebunden? Sie sollten in der Lage sein, die lokalisierte Version des Etiketts sowohl beim Drucken als auch beim Überprüfen des Formulars auf dem Back-End zu erhalten, sollten Sie nicht auch nur den unveränderlichen Wert verwenden, wie Sie wirklich sollten tun)?

Es gibt immer die JavaScript-Lösung ...

Das Folgende ist eher ein Proof-of-Concept, das einige Verbesserungen erfordert, als ein vorgefertigter jQuery-One-Liner, aber es sollte funktionieren, ohne den HTML-Code ändern zu müssen:

%Vor%

Wenn es nur in IE7 und nicht in IE6 funktioniert, kann die Funktion fiXValue() auf nur reduziert werden:

%Vor%     
mercator 19.12.2008 00:27
quelle
0

Sehen Sie sich dieses ie-button-fix -Projekt an, das IE-Verhalten (z. B. JavaScript) verwendet sauber das Problem zu lösen.

    
Tamlyn 03.09.2009 10:09
quelle
-1

Eine einfache Problemumgehung ohne Javascript ist das:

%Vor%     
George Panic 13.02.2012 01:29
quelle