IE und value im <button>

Alles, was PHP betrifft, kann hier besprochen werden.

IE und value im <button>

Postby startist » 26. July 2008 13:12

Ich grübele schon seit längerem über folgendes Problem: Im <button>-Tag habe ich einen value-Wert stehen. Beispiel:
Code: Select all
<button type="submit" name="submit_mult" class="submit_mult" value="Bearbeiten" title="Markierte Treffer bearbeiten">
    <img src="img/system/ic_edit.gif" alt="Bearbeiten" border="0">
</button>
<button type="submit" name="submit_mult" class="submit_mult" value="Löschen" title="Markierte Treffer löschen" onclick="return confirm('ACHTUNG! Möchten Sie die Auswahl wirklich löschen?')">
    <img src="img/system/ic_delete.gif" alt="Löschen" border="0">
</button>


Firefox sendet auch tatsächlich den Wert "Bearbeiten" für submit_mult. Der IE schickt jedoch als Wert den <img>-Tag,
also beispielsweise "<img src="img/system/ic_edit.gif" alt="Bearbeiten" border="0">"

Wer machts eigentlich laut Spezifikation richtig? Und wie kann ich das umgehen, wenn ich genau diesen Wert benötige? In diesem Fall brauche ich den Wert für unterschiedliche Aktionen. Unterschiedliche Namen vergeben ist mir auch schon eingefallen. Ich möchte aber den Namen für beide gern gleich haben und je nach Value dann eine Aktion ausführen.

Ist ein value-Wert überhaupt im <button>-Tag erlaubt?

Grüße, startist
User avatar
startist
 
Posts: 55
Joined: 24. June 2008 14:10
Location: Dresden

Postby Nobbie » 26. July 2008 13:44

Das value-Attribut ist erlaubt und sollte auch der Formularwert bei Auslösen des Buttons sein.

Aber mit <button> konnte IE (oder Microsoft) noch nie richtig umgehen.

Zwei Lösungsansätze:

1) Entweder (was ich sowieso immer empfehle) die Namen für die Buttons eindeutig definieren, also jeder <button> bekommt seinen eigenen Namen (statt immer "submit_mult"), Du könntest beispielsweise den Wert, den Du sonst bei value hast, auch als Namen benutzen. Dann weißt Du nachher ganz sicher, welcher button ausgelöst wurde.

2) Oder nicht <button>, sondern <input type="submit" ...> benutzen, da macht IE es richtig und die anderen Browser auch. Wenn Du eine Grafik als Button anzeigen willst, geht auch <input type="image" ...>, das ergibt auch einen Submitbutton, aber eben mit Bildchen. Achtung: bei type="image" wird nicht der Name des Buttons in POST-Array übertragen, sondern zwei(!) Werte, nämlich name_x und name_y (wobei name hier der Button-Name ist), und die Werte sind die Pixelkoordinaten der Maus im Bild beim Clickevent.

P.S.:
Unterschiedliche Namen vergeben ist mir auch schon eingefallen. Ich möchte aber den Namen für beide gern gleich haben und je nach Value dann eine Aktion ausführen.


Sehe ich gerade erst - wieso? Funktioniert ja nicht und hat auch keinerlei Vorteile.
Nobbie
 
Posts: 8772
Joined: 09. March 2008 13:04

IE 6.5 und 2 "submit" in einem Formular

Postby startist » 20. August 2008 10:23

Das IE6.5-Problem geht weiter. Die Version mit Input vom Type Image funktioniert zwar, sagt mir aber nicht sehr zu, da die Bilder auf der Schaltfläche verzerrt werden (sind halt kleine Icons, die gemeinsam mit anderen Schaltflächen genutzt werden). Eine angegebene Breite wird für das Icon ignoriert.

Ich habe in dem Formular jetzt beiden Buttons jeweils einen Namen zugewiesen. Nach dem Senden prüfe ich, ob der Name gesendet wurde, wobei ich einfach nur abfrage, ob ein Wert vorhanden ist, da der IE6.5 sowieso nicht den Value-Wert sendet, sondern als Wert den IMG-Tag.

Der IE6.5 sendet aber beide Werte, vollkommen gleich, welche Schaltfläche gedrückt wurde.

So schauts jetzt aus:
Code: Select all
<button type="submit" name="submit_mult_e" class="submit_mult" value="Bearbeiten" title="Markierte Treffer bearbeiten">
   <img src="img/system/ic_edit.gif" alt="Bearbeiten" border="0">
</button>
<button type="submit" name="submit_mult" class="submit_mult" value="Löschen" title="Markierte Treffer löschen" onClick="return confirm(\'ACHTUNG! Möchten Sie die Auswahl wirklich löschen?\')">
   <img src="img/system/ic_delete.gif" alt="Löschen" border="0">
</button>


$_POST[submit_mult] und $_POST[submit_mult_e]sind im IE6.5 beide wahr bei Auslösung einer Schaltfläche.

Was kann ich tun, um auch im IE6.5 die Schaltflächen eindeutig zu identifizieren? Kann ich vielleicht per JavaScript einen Wert mitsenden, den ich alternativ prüfen kann? Wenn ja, wie? Ich bin nicht gerade ein JS-Haudegen :)

startist
User avatar
startist
 
Posts: 55
Joined: 24. June 2008 14:10
Location: Dresden

Postby Nobbie » 20. August 2008 11:30

>$_POST[submit_mult] und $_POST[submit_mult_e]sind im IE6.5 beide wahr bei Auslösung einer Schaltfläche.

"wahr" ist äußerst grob - wie sind denn die genauen Werte? Vielleicht erkennt man es daran.
Nobbie
 
Posts: 8772
Joined: 09. March 2008 13:04

Postby startist » 20. August 2008 12:10

nun im Falle des IE6.5 steht als Wert für $_POST[submit_mult]: <img src="img/system/ic_edit.gif" alt="Bearbeiten" border="0">

und als Wert für $_POST[submit_mult_e]: <img src="img/system/ic_delete.gif" alt="Löschen" border="0">

Wie gesagt, vollkommen egal, welchen Button ich klicke, es sind im IE6.5 nach dem Senden immer beide Werte vorhanden.
User avatar
startist
 
Posts: 55
Joined: 24. June 2008 14:10
Location: Dresden

Postby Nobbie » 20. August 2008 12:14

So, ich habe mal weiter getestet, also mit type="submit" geht es nicht, aber mit einem kleinen Trick, indem man ein hidden-Input Feld dazu nimmt, das nenne ich sinnigerweise "button" und weise im jeweiligen onClick diesem den Wert des gedrückten Buttons zu. Dazu muss man aber type="button" wählen, damit nicht automatisch der submit() ausgeführt wird (besonders beim Löschen nicht erwünscht).

Die Abfrage des confirms() war so falsch, ich habe sie durch eine funktionierende ersetzt.

Du mußt nun im php-Script einfach grundsätzlich den Wert von $_POST['button'] abfragen, da steht drin, welcher Knopf gedrückt wurde. Das ganze sieht im HTML dann so aus:

Code: Select all
...
<form action="phpinfo.php" method="post">
<input type="hidden" name="button">
<button type="button" name="submit_mult_e" onClick="button.value='Bearbeiten';submit()" class="submit_mult" value="Bearbeiten" title="Markierte Treffer bearbeiten">
   <img src="pc000010.gif" alt="Bearbeiten" border="0">
</button>
<button type="button" name="submit_mult" class="submit_mult" value="Löschen" title="Markierte Treffer löschen" onClick="button.value='Löschen';if (confirm('Wollen Sie diesen Satz wirklich löschen?')) submit()">
   <img src="pc000050.gif" alt="Löschen" border="0">
</button>
</form>
...


Da ich Deine Icons nicht haben, habe ich sie durch eigene ersetzt. Als Testscript nehme ich immer phpinfo.php (mit gleichem Funktionsaufruf), da sieht man am besten, was ankommt.

Das obige Script sollte in allen Browsern laufen - setzt aber JavaScript voraus (sonst läuft es gar nicht).
Nobbie
 
Posts: 8772
Joined: 09. March 2008 13:04

Postby startist » 20. August 2008 12:37

Vielen Dank Nobbie, du warst mir wieder eine sehr große Hilfe. Jetzt funktioniert es auch beim IE6.5 so, wie ich es wünsche.

startist
User avatar
startist
 
Posts: 55
Joined: 24. June 2008 14:10
Location: Dresden


Return to PHP

Who is online

Users browsing this forum: No registered users and 1 guest