nicht angemeldet
Öffne form mit onclick - was, wenn user JS deaktiviert hat?
1 
Der Martin
0 0 
Gunnar Bittersmann
0 Gunnar Bittersmann
Öffne form mit onclick - was, wenn user JS deaktiviert hat?
Hallo,
auf meiner Gästebuchseite befindet sich auch das Formular für einen neuen
Eintrag (mit display:none). Klickt der Besucher auf "neuen Eintrag hinzufügen",
so wird mit Javascript die display-Eigenschaft auf "block" gesetzt.
Für Besucher mit deaktiviertem JS könnte ich natürlich auf eine andere Seite
weiterleiten, auf der sich ebenfalls das Formular befindet.
Das bedeutete aber einen großen Aufwand, da dadurch auch die Seiten, auf denen
die Einträge ausgewertet werden (in DB eintragen, Vorschau geben, auf Fehler
hinweisen etc.), geändert werden müssten.
Könnte ich als Alternative zu JS vielleicht einfach die Gästebuchseite
refreshen, wenn der Besucher auf "neuen Eintrag hinzufügen" klickt, die
display-Eigenschaft inline schreiben (also in den form-tag, statt in der externen CSS)
und beim Refresh eine GET-Variable übermitteln?
Dann könnte die form-tag etwa so aussehen:
<form action="checkentry.php" method="post" style="display:
<?php if(isset($_GET[...])) {echo "block"; .......?>;">
Das scheint mir eine Noobie-Lösung zu sein (wenn's überhaupt so funktioniert) -
Hat jemand eine Idee/einen Vorschlag, wie ich das Problem anders lösen könnte?
Danke und lieben Gruß,
Merle
-
Hi,
auf meiner Gästebuchseite befindet sich auch das Formular für einen neuen Eintrag (mit display:none).
direkt statisch (also im Stylesheet) auf none gesetzt? Keine gute Idee.
Klickt der Besucher auf "neuen Eintrag hinzufügen", so wird mit Javascript die display-Eigenschaft auf "block" gesetzt. Für Besucher mit deaktiviertem JS könnte ich natürlich auf eine andere Seite weiterleiten, auf der sich ebenfalls das Formular befindet.
Das wäre auch eine Möglichkeit, aber -wie du schon feststellst- mit zusätzlichem Aufwand verbunden. Und unnötig.
Könnte ich als Alternative zu JS vielleicht einfach die Gästebuchseite refreshen, wenn der Besucher auf "neuen Eintrag hinzufügen" klickt, die display-Eigenschaft inline schreiben (also in den form-tag, statt in der externen CSS) und beim Refresh eine GET-Variable übermitteln?
Warum so kompliziert? Lass das Formular normal sichtbar, und setze beim Laden der Seite dessen display-Eigenschaft mit Javascript auf "none". Dann ist das Formular für Javascript-Abstinenzler permanent sichtbar und benutzbar, und für die anderen blendest du es bei Bedarf wieder ein, wie du es jetzt schon machst.
Ciao,
Martin--
Früher habe ich mich vor der Arbeit gedrückt, heute könnte ich stundenlang zusehen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
direkt statisch (also im Stylesheet) auf none gesetzt? Keine gute Idee.
warum?
Warum so kompliziert? Lass das Formular normal sichtbar, und setze beim Laden der Seite dessen display-Eigenschaft mit Javascript auf "none". Dann ist das Formular für Javascript-Abstinenzler permanent sichtbar und benutzbar, und für die anderen blendest du es bei Bedarf wieder ein, wie du es jetzt schon machst.
momentan verdeckt es, wenn sichtbar, einen Großteil der Seite - ich müsste dann
also das Formular nach unten "schieben" - wäre natürlich auch ne Möglichkeit.Danke Dir für die schnelle und hilfreiche Antwort :-}
lg, Merle-
So, hallo nochmal!
Habe mir eine 3. Lösung übelegt (falls zufällig noch jemand dasselbe Problem
hat und über dieses Thema hier stolpert):ursprüngliche HTML:
<div onclick="javascript:openForm()">neuen Eintrag hinzufügen</div>jetzt:
<div id="toForm" onclick="javascript:openForm()">
<noscript>
<p><div><a href="#form">neuen Eintrag hinzufügen</a></div>
</noscript>
</div>
<script type="text/javascript">
<!--
document.getElementById('toForm').innerHTML = "neuen Eintrag hinzufügen";
//-->
</script>Dann das Formular unter letzten GB-Eintrag positionieren, mit Anker
(name="form") versehen und - so wie es Gunnar vorgeschlagen hat -
dem Formular 2 Klassen spendieren (1 für JS, 1 für Besucher mit deaktiviertem JS).
[übrigens hatte ich für das Formular visibility:hidden und nicht display:none - my bad]
Auf diese Weise verdeckt das Formular nicht das Gästebuch und man kommt trotzdem
bequem über die Anker-Referenz auch ohne JS dort hin.Liebe Grüße, Merle
-
Mahlzeit Merle (Lösung #3),
Habe mir eine 3. Lösung übelegt (falls zufällig noch jemand dasselbe Problem
hat und über dieses Thema hier stolpert):Die erscheint mir doch etwas von-hinten-durch-die-Brust-ins-Auge ... wie wär's einfach mit:
<a href="#form" onclick="openForm(); return false;">neuen Eintrag hinzufügen</a>-
ein Link ist IMHO in diesem Fall angebracht, da die Standardaktion tatsächlich ein Sprung zu einem auf der Seite befindlichen Anker ist
-
wenn Javascript nicht verfügbar bzw. aktiv ist, wird genau dorthin gesprungen
-
wenn Javascript aktiv ist, wird die Funktion "openForm()" aufgerufen und anschließend durch das "return false" *nicht* die Standardfunktionalität ausgeführt - d.h. der Anker sollte *nicht* angesprungen werden
So sparst Du Dir viel Code, vergibst keine überflüssigen IDs und machst die ganze Konstruktion erheblich wartbarer.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
<a href="#form" onclick="openForm(); return false;">neuen Eintrag hinzufügen</a>Hey danke!
Was so ein kleines "return false" doch alles bewirken kann :-}
lieben Gruß, Merle-
@@Merle:
nuqneH
Was so ein kleines "return false" doch alles bewirken kann :-}
Wussten Sie schon, dass "return false" nicht immer den falschen Wert zurückgibt?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Lieber Gunnar,
Wussten Sie schon, dass "return false" nicht immer den falschen Wert zurückgibt?
stimmt. Neulich musste ich mir ergoogeln, dass im IE8 ein
myLink.onclick=function(){return false}nicht immer die Ausführung eines Links zuverlässig blockiert. Da musste ich vorher window.event.returnValue auf false setzen. So ein Drecksbrowser - und das in der neunten Generation!Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
IE8 [...] in der neunten Generation!
kleine Zählschwäche?
Und nein, die Ausrede, die Zählung hätte mit 0 angefangen, zählt hier nicht. :-)*scnr*
Martin--
Es gibt Dinge, die sind sooo falsch, dass nicht einmal das Gegenteil stimmt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Lieber Martin,
wenn IE5.0 und IE5.5 für Dich dieselbe Generation ist, dann magst Du mit meiner Zählschwäche Recht behalten.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo,
wenn IE5.0 und IE5.5 für Dich dieselbe Generation ist, dann magst Du mit meiner Zählschwäche Recht behalten.
ja, ich sehe das so. Version 5.0 war ja nur eine überstürzte Betaversion des IE5. Erst die letzte Ausgabe der 5er-Generation, der IE5.5/SP2 war wirklich alltagstauglich.
Ciao,
Martin--
Ordnung schaffen heißt, das Eigelb vom Dotter zu trennen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Lieber Martin,
wenn IE5.0 und IE5.5 für Dich dieselbe Generation
ja, ich sehe das so.
und die 9er Version hast Du auch noch nicht anerkannt...?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Moin,
wenn IE5.0 und IE5.5 für Dich dieselbe Generation
ja, ich sehe das so.
und die 9er Version hast Du auch noch nicht anerkannt...?nein, noch nicht. Erstens ist sie noch legewarm und ich warte mindestens ein halbes Jahr ab, bevor ich mich ernsthaft damit befasse, zweitens lässt man die Generation Windows 5.x jetzt endgültig links liegen, was für mich heißt, dass Windows an sich ausgeschlossen ist.
Denn die Windows-Versionen nach XP sind für mich nicht mehr akzeptabel. Ein Windows 7 habe ich noch in einer VM installiert und fahre es gelegentlich mal für irgendwelche Tests hoch; für den normalen Alltagsgebrauch ist es IMO untauglich. Zu nervenzehrend, umständlich, verspielt.Und nebenbei: Du hattest den IE8 mit "der neunten Generation" assoziiert, nicht den IE9.
Schönen Tag noch,
Martin--
Was du heute kannst besorgen,
das geht sicher auch noch morgen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
-
-
-
-
-
-
@@Der Martin:
nuqneH
setze beim Laden der Seite dessen display-Eigenschaft mit Javascript auf "none".
Nein! Ändere keine CSS-Eigenschaften direkt per JavaScript! (Beispiel gefällig, wozu das führen kann?)
Sinnvoller ist es, _alle_ Angaben zur Darstellung im Stylesheet zu machen. Und per JavaScript Klassenzugehörigkeiten zu ändern. Warum ist das nur so schwer in die Köpfe der Menschen zu bringen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Herr Pawlow,
setze beim Laden der Seite dessen display-Eigenschaft mit Javascript auf "none".
Nein! Ändere keine CSS-Eigenschaften direkt per JavaScript!über das konkrete "wie" hatte ich noch gar kein Wort verloren.
Sinnvoller ist es, _alle_ Angaben zur Darstellung im Stylesheet zu machen. Und per JavaScript Klassenzugehörigkeiten zu ändern.
Dem stimme ich zu. Das wäre dann aber ein Detail der konkreten Implementierung, das erst zur Sprache kommt, wenn man sich mal für das Konzept an sich entschieden hat.
Ciao,
Martin--
Wie kann es sein, dass ich von 100 Gramm Schokolade zwei Kilo zunehme?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Lieber Gunnar,
jedes Dogma hat seine Schwachstellen.
Nein! Ändere keine CSS-Eigenschaften direkt per JavaScript!
Sinnvoller ist es, _alle_ Angaben zur Darstellung im Stylesheet zu machen. Und per JavaScript Klassenzugehörigkeiten zu ändern.
wie willst Du sonst Animationen machen? Es mag zwar CSS-Transitions geben, aber sicher nicht für jeden denkbaren Anwendungsfall - und von einem "festen Standard" sind sie auch noch Welten entfernt.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
-
@@Merle:
nuqneH
Das scheint mir eine Noobie-Lösung zu sein
Auch ein blindes Huhn findet mal ein Korn. Aber nicht immer.
Hat jemand eine Idee/einen Vorschlag, wie ich das Problem anders lösen könnte?
Ja, ganz einfach: Das Formular nicht für alle verstecken, sondern nur bei aktiviertem JavaScript.
Dazu verpasst du mit JavaScript einem Vorfahrenelement ('html' oder 'body' bieten sich an) eine Klasse "js". Siehe „Javascript mehrstufig zünden“ in [PERFORMANCE-BP2]
Im Stylesheet steht dann
.js form { display: none }Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Auch ein blindes Huhn findet mal ein Korn. Aber nicht immer.
Dazu verpasst du mit JavaScript einem Vorfahrenelement ('html' oder 'body' bieten sich an) eine Klasse "js".Hey Gunnar,
genau so eine Antwort hab mich mir erhofft - tolle Lösung und so einfach :}
Vielen Dank für das Korn!
Merle -
Hm,
@ Gunnar,Martin:
eigentlich gute Idee. Nur: auf der Gästebuchseite finde ich keinen Platz,
das Formular für non-js-user dauerhaft sichtbar zu halten - es sei denn, ganz
unten unter dem letzten GB-Eintrag (unschön).
Irgendwie muss ich mir wohl doch nochmal ne andere Lösung einfallen lassen..
@ Gunnar:
das habe ich hier im Forum schon ein paarmal gelesen, dass man style-Eigenschaften
nicht mit js ändern, sondern stattdessen die Klasse ändern sollte. Werd
mich später mal auf die Seite begeben, deren Link du angeführt hast, um die
Begründung zu erfahren - würd mich sehr interessieren, da ich mir das für z.B.
Animationen mit js, wo man bspw. left in Zeitintervallen verändert/erhöht,
schwer vorstellen kann. Bin gespannt :}Also danke nochmal,
lg,
Merle
-