Mittwoch, 14. Oktober 2009

HTML CSS

IE und Form-Buttons Problem

Der Internet Explorer 6, 7 und 8 haben ein unterschiedliches Verhalten bei Buttons vom Typ Submit.

Hier gilt es unbedingt Vorsicht walten lassen, denn bei jeder Version des Microsoft Internet Explorer kommen andere Werte auf dem Server an.

Der folgende Quellcode beschreibt das Problem:

Download Code!

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>Internet Explorer Button Problem</title>
  6. </head>
  7. <body>
  8. <pre><?php print_r($_POST);?></pre>
  9. <form method="post">
  10. <button name="a" value="a-value" type="submit">a-text</button>
  11. <button name="b" value="b-value" type="submit">b-text</button>
  12. </form>
  13. </body>
  14. </html>

Eine Online-Demo davon - kann man hier sehen: Internet Explorer Button Problem

Die verschiedenen Internet Explorer Varianten liefern beim klicken auf den Button "a-text" jedesmal ein anderes Ergebniss ab:

Internet Explorer 6

Download Code!

  1. Array
  2. (
  3.     [a] => a-text
  4.     [b] => b-text
  5. )

Internet Explorer 7

Download Code!

  1. Array
  2. (
  3.     [a] => a-text
  4. )

Internet Explorer 8

Download Code!

  1. Array
  2. (
  3.     [a] => a-value
  4. )

Das muss sollte man sich, unbedingt die unterschiedliche Verhalte des IE merken, sonst kann das ordentlich schiefgehen. Beispielsweise wenn man einen bestimmten Wert, als Parameter von einem Submit-Button erwartet.

So was macht man jetzt? Gibt es ein Workaround?

Bestimmt - Mr. Foo hat eigentlich immer eine Lösung parat :-)

Einschränkung - es geht nur mit eingeschaltetem Javascript :/

Der Trick ist hierbei, den Wert der Action so abzuändern, dass der Status via GET übertragen wird:

Download Code!

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  5. <title>Internet Explorer Button Problem</title>
  6. </head>
  7. <body>
  8. <pre><?php print_r($_POST);print_r($_GET)?></pre>
  9. <form method="post">
  10. <button name="a" value="a-value" type="submit">a-text</button>
  11. <button name="b" value="b-value" type="submit">b-text</button>
  12.  
  13. </form>
  14. <hr/>
  15. <h2>L&ouml;sung</h2>
  16. <form method="post" action="loesung.php" name="someform">
  17. <button name="a" value="a-value" onclick="document.forms.someform.action += '?a=a-value'" type="submit">a-text</button>
  18. <button name="b" value="b-value" onclick="document.forms.someform.action += '?b=b-value'" type="submit">b-text</button>
  19. </form>
  20. </body>
  21. </html>

Online-Demo: Internet Explorer Button Problem Lösung

Bewertung: 2 von 5, 4 Stimme(n) 1425 Klicks
, , , , ,
Von Mr.Foo in HTML CSS am 14.10.09@11:44 Uhr

Trackbacks
Trackback für spezifische URI dieses Eintrags

Keine Trackbacks

2 Kommentare
Ansicht der Kommentare: (Linear | Verschachtelt)

Karlnickel - #1 - 17.10.2009 10:50 - (Antwort)

Lieber Mr. Foo,

für solche Dinge benutzt man aus gutem Grund auch nicht den Submit-Button, sondern eher versteckte Formularfelder. Dann kann man sich den ganzen JavaScript-Kram auch browserübergreifend sparen.

groetjes
KarlNickel

dhe - #2 - 19.10.2009 17:35 - (Antwort)

Ähm, bitte?
was hat denn bitte ein input type="hidden" mit der Problematik zu tun?
Es geht hier um < button >'s und wie man denen einen Status mitgeben kann.
Wenn man einen < button > braucht, geht es eben nicht anders.

Zudem: was bringen mir denn die hidden Felder? Wie verwendest du die denn? Wie soll das hidden Feld auf den Button einwirken? Woher soll es wissen, welcher Button gedrückt wurde? Versteh das nicht. Klär mich auf :-)


Kommentar schreiben

Umschließende Sterne heben ein Wort hervor (*wort*), per _wort_ kann ein Wort unterstrichen werden.
Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert.
Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.
Sie können [geshi lang=LANG][/lang] Tags verwenden um Quellcode abhängig von der gewählten Programmiersprache einzubinden