Probleme mit grafischen Button im IE!

[olhof]

Hallo zusammen,
ich habe im IE eine Login Form erstellt. Ich wollte jetzt den hässlichen grauen Submit Button durch einen schönen Button ersetzen und musste dann zu meinem entsetzen feststellen, dass der Login danach im IE nicht mehr funktioniert und die php Scripte nicht mehr abgearbeitet werden. Im Firefox ist alles wunderbar aber im IE funktioniert es nur wenn ich

<input type="submit" name="action_login" value="Log In">

anstatt

<input type="image" src="images/user_login.gif" name="action_login">

benutze!!!

Kann mir einer sagen, woran das liegen kann? Ich möchte nicht dazu verdammt sein, die öden grauen Buttons vom IE benutzen zu müssen!! :-?

Danke für eure Hilfe!

 

[gruenspan]

Beachten Sie:

Der Internet Explorer (getestet bis Version 6.0) verhält sich bei dieser Art Button leider falsch. Er sendet die Buttonbeschriftung, nicht den Inhalt des value-Attributes. Existieren mehrere Absende-Buttons, werden die Beschriftungen aller Buttons gesendet, nicht nur die des geklickten. Deshalb muss man dem IE leider attestieren, dass er dieses Feature derzeit noch nicht korrekt unterstützt.

Ich möchte nicht dazu verdammt sein, die öden grauen Buttons vom IE benutzen zu müssen

die Buttons sind nicht nur im IE grau sondern in allen Browsern Standard.

 

[Herold]

Soweit ich weis, sendet der IE bei diesem Typ die X- und Y-Koordinaten des Mauszeigers, angehängt an den Inhalt des Name-Attributs.

Wenn du diesen Code verwendest

<input type="image" src="http://www.html.de/images/user_login.gif" name="action_login">

überprüfst du die Auswertung vermutlich mit etwas ähnlichem wie

if(isset($_POST['action_login'])) {
...
}

ändere dies einfach wie folgt ab:

if(isset($_POST['action_login_x'])) { //_x weil überprüft werden soll, ob die X-Koordinate gesetzt wurde
...
}

Ich hoffe ich habe dein Problem richtig verstanden und konnte dir so einen Lösungsansatz zum 'type="image"'-Problem geben, so konnte ich es zumindest seinerzeit bei einem Kontaktformular lösen.

Alternativ könnte ich mir auch noch vorstellen (ohne es genau zu wissen), dass man den Standard-Button auch mittels CSS etwas ansehnlicher gestalten könnte.

Gruß
Thomas

 

[Sn0opy]

Hatte die Variante hier vor 1-2 Wochen schonmal gepostet.

Dies kommt in den head-Bereich deiner Homepage

<SCRIPT language="JavaScript">
function submit()
{
   document.formular.submit();
}
</SCRIPT>

Und dein Formular musst du dann wie folgt ändern

<form name="formular" action="login.php" method="post">
  <input name="submit" type="image" src="BILD.JPG" onClick="submit()" />
</form>

Wicht ist dabei eben, dass das Formular den Namen formular hat und dass beim Button das onClick="submit()" drin steht.


//Edit: Also diese Highlight Funktion ist ja ganz toll, verhaut aber immer wieder die Formatierung der Codes -.-

 

[olhof]

Hallo und danke für die Antworten. Ich bin auf dem Gebiet nicht so fit. Was meinst Du genau mit Deinen Programmieranweisungen? Soll man das in php oder in Javascript programmieren?

Ich kann den Ansatz leider nicht ganz nachvollziehen, da ich zu wenig Ahnung habe. Vielleicht kannst Du mir das etwas näher erläutern!?

Vielen Dank!

 

[olhof]

@Snoopy: Danke für das Script. Ich habe nun folgendes Problem:
In meiner Form gibt es schon ein "onclick" und zwar eines, welches abfragt, ob alle Felder ausgefüllt worden sind. Was mache ich denn jetzt?

So sieht das bei mir aus:
<input onclick="return onSubmitCheck(document.forms['sendfrm'])" type="submit" name="submit" value="Abschicken">

Da wird die ganze Form geprüft. Kann ich Deine Variante trotzdem benutzen? Und wenn ja, wie?

Danke!!!!!

 

[Herold]

Hatte die Variante hier vor 1-2 Wochen schonmal gepostet.

Dies kommt in den head-Bereich deiner Homepage

<SCRIPT language="JavaScript">
function submit()
{
   document.formular.submit();
}
</SCRIPT>

Und dein Formular musst du dann wie folgt ändern

In solchen fällen ist es jedoch nicht empfehlenswert JavaScript einzusetzen, da dies eine klientseitige Sprache ist, welche durch den Besucher deaktiviert werden kann und somit dein Formular absolut unbrauchbar ist.

Poste am Besten mal den Inhalt der PHP-Datei, mit welcher du den Formular Inhalt auswertest, damit kann man dir bestimmt gezieltere Lösungsansätze geben.

 

[olhof]

Ich benutze ja schon Javascript zum checken der Form. Dann sollte es doch kein Problem sein, wenn ich noch ein Bisschen mehr JS benutze!? Oder rede ich gerade an Dir vorbei? :-) Welche Lösung gibt es noch, wenn ich schon ein "OnClick" in meiner Form benutze?

Ich arbeite mit .php Dateien, welche .tpl Dateien includen. Der Source für die Form ist also komplett in .html.

 

[Sn0opy]

Nein, er redet von anderen Personen, die deine Seite besuchen werden, die dann aber Javascript deaktiviert haben.

Poste doch mal dein jetziges Javascript, weil normalerweise kannst du das "document.formular.submit();" dann immernoch einbauen.

 

[olhof]

Hallo!
Ich poste dann mal den Sourcecode:

----------------------------------------------------------------------

<form name="sendfrm" action="{$baseurl}/contact.php" method="post">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="10"><img src="http://www.html.de/images/spacer.gif" width="10"></td>
</tr>
<tr>
<td class="main_bold" valign="top" width="25%">E-Mail Adresse:</td>
<td width="1%"><img src="http://www.html.de/images/spacer.gif" width="5"></td>
<td width="74%"><input name="refromemailid" title="Email" type="text" size="40" value="{$smarty.request.refromemailid}">
</td>
</tr>
<tr>
<td class="main_bold" valign="top">Nachricht:</td>
<td width="1%"><img src="http://www.html.de/images/spacer.gif" width="5"></td>
<td width="74%"><textarea name="rtmailbody" title="Nachricht" cols="40" rows="5">{$smarty.request.rtmailbody}</textarea>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input onclick="return onSubmitCheck(document.forms['sendfrm'])" type="submit" name="submit" value="Abschicken"></td>
</tr>
</table>
</form>
-------------------------------------------------------------

Und wenn ich jetzt in dem unteren Teil "<input onclick="return onSubmitCheck(document.forms['sendfrm'])" type="submit" name="submit" value="Abschicken">" versuche ein Bild einzubauen, dann rafft der IE es leider nicht mehr! :-(

 

[Sn0opy]

Ich bin leider eher die Javascript-Null, aber ist bei dem onclick das komplette Javascript schon drin, oder steht noch was im Header? Du könntest das alles in eine Funktion schreiben und meinen obigen code hinzufügen. Da ich deinen Code leider nicht genau interpretieren kann, weiß ich eben nicht, ob das wirklich geht xP

 

[znay]

Button Element für den Submit Button verwenden und die Grafik per CSS als Hintergrundgrafik definieren. Dadurch erspart man dem Benutzer weiteren JS Kram zu laden und der HTML Code wird schlanker und übersichtlicher.

 

[olhof]

Hallo Znay: Danke für diesen Lösungsansatz! Könntest Du mir kurz näher erklären, wie das genau funktioniert? Das wäre super nett. Vielen Dank für die Hilfe!

 

[znay]

Als Button benutzt du nicht <input type="submit"[..] sondern einfach <button type="submit"[...].
Per CSS entfernst du dann den Rahmen (border) und die Grafik, die als Button verwendet werden soll, setzt du als Hintergrundbild des Buttons, um die Beschriftung des Buttons zu entfernen benutzt du einen großen, negativen Wert für text-indent.
Solltest Du mit dem CSS Kram noch nicht all zu viel anfangen können, schau Dir doch mal die Artikel dazu bei CSS 4 You - The Finest in Stylesheets an.