Select Box ohne JS

[waki]

Hallo Leute,

ich möchte gerne eine Idee umsetzten, bin mir aber nicht ganz sicher, ob dies auch 100% umsetzbar ist oder gar total nutzerunfreunldlich:

ich habe ein Formular mit Selectfeldern - hier kann der User wie ein Sprungmenü auf die Unterseiten zugreifen.

Jetzt möchte ich diese Möglichkeit ohne Submit-Button anbieten bzw. halt per JS lösen, da kenne ich auch geeignete Skripte für...

Jetzt halt meine Frage, wenn JS abgeschaltet ist: kann man abfragen (falls ja, wie?), ob JS vorhanden ist? Ich würde in diesem Fall gerne die Submit-Buttons weglassen - falls JS aber nicht aktiv sein sollte, würde ich entweder gerne:

1. den Submit-Button anzeigen oder gar

2. die Select-Auwahl komplett weglassen und alternativ die Texte aus dem Selectfeld untereinander als Liste/Hyperlinks ausgeben

Es muss also irgendwie abgefragt werden, ob JS vorhanden ist und dann sollte entweder die Select-Auswahl ohne Submit-Button stattfinden oder halt - falls JS deaktiviert - stattdessen eine ungeordnete Liste erscheinen.

Vielen Dank für Unterstützung und Ideen.

Gruss,
waki

[JürgenB]

Hallo waki,

erstelle die Selektboxen mit document.write und biete im <noscript>-Bereich eine alternative Navigation oder sonstige Info an.

Gruß, Jürgen

[globe]

n'abend,

Jetzt halt meine Frage, wenn JS abgeschaltet ist: kann man abfragen (falls ja, wie?), ob JS vorhanden ist?

wird JS ausgeführt, ist JS aktiv. wird kein JS ausgeführt, ist JS deaktiviert. Recht simpel, eigentlich.

Ich würde in diesem Fall gerne die Submit-Buttons weglassen - falls JS aber nicht aktiv sein sollte, würde ich entweder gerne:

1. den Submit-Button anzeigen oder gar

dann willst du ihn standardmäßig anzeigen und wenn JS zur Verfügung steht den Button einfach ausblenden:

window.onload = function()  
{  
  /*  
   * suchen wir unseren button, dem wir im Beispiel einfach mal die ID 'derButton' geben.  
   * haben wir ihn gefunden, blenden wir ihn mittels CSS (display:none) einfach aus.  
   */  
  var button = document.getElementById('derButton');  
  if( button )  
    button.style.display = 'none';  
}

Es gibt noch weitere Funktionen um Elemente zu "suchen":
getElementById()
getElementsByName()
getElementsByTagName()

Wie du deinen Button findest bleibt dir überlassen.

2. die Select-Auwahl komplett weglassen und alternativ die Texte aus dem Selectfeld untereinander als Liste/Hyperlinks ausgeben

Das wird schon lustiger. Siehe Info unten.

Es muss also irgendwie abgefragt werden, ob JS vorhanden ist und dann sollte entweder die Select-Auswahl ohne Submit-Button stattfinden oder halt - falls JS deaktiviert - stattdessen eine ungeordnete Liste erscheinen.

Du musst andersrum denken.

Wenn ich kein JS zur Verfügung habe, will ich eine Liste sehen. Also wird meine Seite standardmäßig mit einer Liste ausgeliefert.

Wenn ich nun merke, dass ich Javascript habe, dann baue ich meine Liste zur Select-Box um.

um das 2. Vorhaben umzusetzen musst du lediglich die Liste durchlaufen und für jedes Listenelement eine Option für deine Select-Box erstellen.

weiterhin schönen abend...

[waki]

Danke! Das mit dem Verstecken klappt zwar, allerdings wird er Button kurz vor dem Verstecken kurz angezeigt...hier ist entweder das CSS oder das JS wohl nicht schnell genug :-(

Ich habe nun mal folgendes Skript:

<script type="text/javascript">document.write("<form method='get' action='index.php'><select name='page' onChange= "if (this.value != '') { document.location.href = 'index?page='+this.value; } return false;" ><option value=''>Zur Auswahl stehen...</option><option value='2'>Start</option><option value='3'>Seite 2</option><option value='6'>Seite 3</option><option value='5'>Seite 4</option><option value='4'>Seite 5</option></select><input type='submit' value='GO' id='submit_menu'></form>");</script>

Leider findet hier noch keine Weiterleitung statt, weil der if-Befehl nicht akzeptiert wird...weisst Du viell. woran die Abfrage genau scheitert?

Gruss,
waki

[globe]

n'abend,

Danke! Das mit dem Verstecken klappt zwar, allerdings wird er Button kurz vor dem Verstecken kurz angezeigt...hier ist entweder das CSS oder das JS wohl nicht schnell genug :-(

die Seite muss erst vollständig geladen sein, bevor das Script ausgeführt wird. Und genau das beabsichtigen wir übrigens auch. Ansonsten bräuchten wir den Kram nicht window.onload zuweisen.

Ich habe nun mal folgendes Skript:

<script type="text/javascript">document.write("<form method='get' action='index.php'><select name='page' onChange= "if (this.value != '') { document.location.href = 'index?page='+this.value; } return false;" ><option value=''>Zur Auswahl stehen...</option><option value='2'>Start</option><option value='3'>Seite 2</option><option value='6'>Seite 3</option><option value='5'>Seite 4</option><option value='4'>Seite 5</option></select><input type='submit' value='GO' id='submit_menu'></form>");</script>

So dachte ich mir das zwar nicht, aber wenn du derartige Konstrukte magst, dann eben so.

Schau doch bitte mal ganz genau nach wie deine " und ' da drin spielen. Dann wirst du feststellen, dass obiger Code schlicht nicht durch den Parser kommt. Wenn du bei onchange="...." die Anführungszeichen escapest, kommst du vielleicht weiter. (siehe unten)

Weiter sei angemerkt, dass ein String in einer Zeile stehen muss.

var einString= " 1. zeile  
2\.zeile  
3\.zeile";

wird nicht funktionieren.

var einString= " 1. zeile" +  
"2.zeile" +  
"3.zeile";

hingegen schon.

var einString= "Die Funktion "helloWorld" ist toll";

wird nicht funktionieren. ganz einfach weil die Anführungszeichen um helloWorld nicht escaped wurden und somit zu einem Syntax-Fehler führen.

var einString= "Die Funktion \"helloWorld\" ist toll";

wird dich, im Gegensatz zum ersten Versuch nicht im Stich lassen.

weiterhin schönen abend...