Selektbox sofort ausführen

[Maren]

Hallo ich nochmal,

Es gibt doch bestimmt eine Möglichkeit, dass die Auswahl einer Checkbox sofort ausgeführt wird, ohne dass der Nutzer noch auf einen Button klicken muss.

Da ich mit in Javascript eigentlich garnicht auskenne also die Frage, ist das leicht zu erklären, so das auch ich es verstehe, oder ist das so komplex, dass ich eine andere Lösung suchen muss?

Liebe Grüße Maren

[EKKi]

Mahlzeit,

Es gibt doch bestimmt eine Möglichkeit, dass die Auswahl einer Checkbox sofort ausgeführt wird, ohne dass der Nutzer noch auf einen Button klicken muss.

Du kannst einer <select>-Box per HTML-Attribut einen Javascript-Eventhandler zuweisen, so dass bei einem bestimmten Ereignis Javascript-Code ausgeführt wird - in diesem Fall böte sich hierfür "http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange@title=onchange" an.

Beispiel:

  
[...]  
<form>  
[...]  
<select name="foo" onchange="this.form.submit();">  
  <option value="bar1">bar1</option>  
  <option value="bar2">bar2</option>  
  <option value="bar3">bar3</option>  
</select>  
[...]  
</form>  
[...]

Wenn sich der Wert des <select>-Elements ändert, wird das übergeordnete Formular abgeschickt.

MfG,
EKKi

[minicrispie]

Wenn sich der Wert des <select>-Elements ändert, wird das übergeordnete Formular abgeschickt.

man muss das aber nicht in einem Formular machen ...
man kann auch ganz normal:

<script language="Javascript">
  function SelectBox()
   {
     //Anweisungen
   }
</script>

[...]

<select name="Box" onChange="Javascript:SelectBox()">
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>

[suit]

man kann auch ganz normal:

aber wenn, dann bitte richtig

<script language="Javascript">

<script type="text/javascript">

<select name="Box" onChange="Javascript:SelectBox()">

<select name="Box" onChange="SelectBox();">

[minicrispie]

An Ekki:
Das type-Attribut hab ich vergessen - geb ich zu...
ABER:

1.Ob bei dem Attribut das c nun klein oder groß ist, ist egal --> der Browser versteht beides.
2. Dieses "Javascript:" kann ebenfalls groß geschrieben werden weil der Browser das auch versteht.
3. Ich muss keine eigene Funktion pro SelectBox schreiben:

<script language="Javascript">
  function SelectBox(Box)
   {
     location.href = document.getElementById(Box).value;
   }
</script>

[...]

<select name="Box1" onChange="Javascript:SelectBox('Box1')">
  <option value="www.google.de">www.google.de</option>
  <option value="www.wikipedia.de">www.wikipedia.de</option>
  <option value="www.yahoo.de">www.yahoo.de</option>
</select>

An suit:

<select name="Box" onChange="SelectBox();">

Das ist dem Browser egal und mir auch ob das ein Semikolon steht oder nicht...

[EKKi]

Mahlzeit,

1.Ob bei dem Attribut das c nun klein oder groß ist, ist egal --> der Browser versteht beides.

Solange Du HTML schreibst. Bei XHTML schon nicht mehr. Deswegen halte ich es für sinnvoll, sich gleich die "richtige" Schreibweise anzugewöhnen ... :-)

2. Dieses "Javascript:" kann ebenfalls groß geschrieben werden weil der Browser das auch versteht.

Das "javascript:" ist - bei Eventhandlern - KOMPLETT ÜBERFLÜSSIG und falsch. Egal wie man es schreibt.

3. Ich muss keine eigene Funktion pro SelectBox schreiben:

<script language="Javascript">
  function SelectBox(Box)

Komiker!

In Deinem ersten Beitrag zu dem Thema hast Du die Funktion folgendermaßen deklariert:

function SelectBox()

Und in DEM Fall müsstest Du sehr wohl für jeden Fall eine eigene Funktion schreiben. Deswegen wies ich ja darauf hin, dass es sinnvoll ist, das Elementobjekt (oder meinetwegen auch seine ID) an die Funktion zu übergeben - was Du ja im zweiten Anlauf auch tust. Aber verwechsle bitte nicht Äpfel mit Birnen ...

MfG,
EKKi

[suit]

Aber verwechsle bitte nicht Äpfel mit Birnen ...

aber auch mit denen kann man rechnen :p SCNR

[Maren]

Hallo,
sorry das ich Euch in Eurer heissen Diskussion unterbreche,
aber ich habe jetzt folgendes gemacht:
----------------------------------------
[...]
<script language="Javascript">
 function SelectWochentag()
  {
    location.reload()
    }
</script>
[...]
$test=$_POST["test"];
echo"Selektiert wurde: $test";
[...]
echo"<td><select name="test" onchange="Javascript:SelectTest()"><option>1</option><option>2</option><option>3</option></select>";
[...]
----------------------------------------
Sobald ich eine Selektion mache poppt ersteinmal ein Fenster auf:
"Die bereits eingegebenen Informationen, müssen erneut gesendet werden, um die Webseite wieder anzuzeigen." blah blah Buttons: "Wiederholen" und "Abbrechen".

Nachdem ich dann wiederholen drücke steht in Test nichts drin :(

Habt Ihr noch nen Tipp?

Danke

[Cheatah]

Hi,

aber ich habe jetzt folgendes gemacht:
<script language="Javascript">

bitte lies die Kritiken! Dieser Code ist falsch!

location.reload()
$test=$_POST["test"];

Die aktuelle Seite wird neu geladen. Wenn sie nicht bereits ursprünglich über ein Formular der Methode POST (bzw. bei $_GET: der Methode GET) aufgerufen wurde, welches über ein Eingabefeld mit dem Namen "test" verfügte, kann auch beim Neuladen der Seite der entsprechende Wert nicht existieren.

echo"Selektiert wurde: $test";

Du solltest Leerzeichen sinnbehaftet einsetzen.

echo"<td><select name="test" onchange="Javascript:SelectTest()"><option>1</option><option>2</option><option>3</option></select>";

Lies die Kritiken!!![1] Ein "Javascript:", "javascript:", "JavaScript:" oder "Flubberdibubber:" zu Beginn eines Event-Handlers ist vollkommen sinnfrei!

Sobald ich eine Selektion mache poppt ersteinmal ein Fenster auf:

Das macht der Browser ganz automatisch, wenn man eine mit POST angeforderte Seite neu zu laden versucht.

Habt Ihr noch nen Tipp?

Ja: Erkläre was Du eigentlich willst und welches Problem Du bei der Umsetzung hast, und zwar so, dass Außenstehende es auch verstehen können.

Cheatah

[1] Ja, multiple Ausrufezeichen. Beim nächsten Mal sind es fünf.

[suit]

Das type-Attribut hab ich vergessen - geb ich zu...

blos nicht zu viel zugeben :D

1.Ob bei dem Attribut das c nun klein oder groß ist, ist egal --> der Browser versteht beides.

in xhtml 1.0 aufwärts ist das nicht zulässig, auch wenns der browser versteht

2. Dieses "Javascript:" kann ebenfalls groß geschrieben werden weil der Browser das auch versteht.

es ging darum, dass javascript: ansich absurd ist, da der eventhandler sowieso nur javascript ansteuert

dass text/javascript oder tExt/JavascRipt usw keinen unterschied macht ist klar - die typen und subtypen sind nicht case-sensitive, aber dennoch ist text/javascript bei der IANA kleingeschrieben registiert und ist auch in RFC 4329 so festgehalten http://www.rfc-editor.org/rfc/rfc4329.txt - das ist einfach ein ästhetisches problem ;)

<select name="Box" onChange="SelectBox();">
Das ist dem Browser egal und mir auch ob das ein Semikolon steht oder nicht...

ja, aber es erleichtert die lesbarkeit des codes - wenn du mit mehreren leuten an einem programm oder einer website arbeitest, wirst du solche kleinigkeiten schätzen lernen

[EKKi]

Mahlzeit,

man muss das aber nicht in einem Formular machen ...

Habe ich auch nicht gesagt. Ich bin nur davon ausgegangen, dass eine Dropdown-Box in einem Formular der Normalfall ist.

man kann auch ganz normal:

... und ganz falsch ...

<script language="Javascript">

Es fehlt das <http://de.selfhtml.org/html/referenz/attribute.htm#script@title=zwingend erforderliche> "type"-Attribut.

function SelectBox()
[...]
<select name="Box" onChange="Javascript:SelectBox()">

1. heißt das Attribut "onchange" (klein geschrieben),

2. ist die Angabe des Pseudoprotokolls "javascript:" (klein geschrieben) überflüssig, weil die Werte von Eventhandler-Attributen IMMER als Scriptcode interpretiert werden und

3. müsstest Du auf diese Weise für jede Selectbox eine eigene Funktion schreiben - sinnvoller wäre es, das Elementobjekt, das die Funktion auslöst, als Parameter zu übergeben.

MfG,
EKKi

[suit]

1. heißt das Attribut "onchange" (klein geschrieben),

in xhtml ist das in der tat tragisch, ansonsten nicht soo schlimm

[Maren]

Hallo Ihr alle,

Ich benötige da doch nochmal Eure Hilfe bei dieser Aktion.
Da ich das ganze Formular neu ausführen möchte, reicht es mir nicht, wie im Beispiel von Ekki, die Select-Box innerhalb eines Form-Tags zu legen, da auch noch andere Form-Tags vorhanden sind, die sich in die Quere kommen würden.

Also muss ich folgendes BEispiel nehmen:

<script language="Javascript">
  function SelectBox()
   {
     //Anweisungen
   }
</script>

[...]

<select name="Box" onChange="Javascript:SelectBox()">
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>

Wie gesagt, es soll einfach nur die Komplette Seite neu geladen werden.
Das aber sobald man ein Attrinut in der Selektbox angeklickt hat. Dieses Attribut soll einen Wert übergeben, mit dem die komplette Seite neu geladen werden soll. Was muss ich denn jetzt in die "//Anweisung" im Script-Tag schreiben.
Ich kenne mich mit JAvascript wirklich nur ganz wenig, eigentlich garnicht aus.

Danke für Eure Gedult und Hilfe.

Lieben Gruß Maren

[Cheatah]

Hi,

Da ich das ganze Formular neu ausführen möchte, reicht es mir nicht, wie im Beispiel von Ekki, die Select-Box innerhalb eines Form-Tags zu legen, da auch noch andere Form-Tags vorhanden sind, die sich in die Quere kommen würden.

vielleicht solltest Du anfangen, in einer verständlichen Sprache zu sprechen. "Das Formular (neu) ausführen" oder "Selektbox sofort ausführen" sind Worte, die nur einzeln Sinn ergeben, nicht aber in Kombination. Eine <select>-Box kann man nicht ausführen - es sei denn Du schaffst es, eine Hundeleine daran zu befestigen.

Erkläre also bitte, was Du meinst.

Also muss ich folgendes BEispiel nehmen:

Bitte lies die Kritiken zu diesem Code. Das von Dir genannte Beispiel musst und solltest Du definitiv _nicht_ nehmen.

Wie gesagt, es soll einfach nur die Komplette Seite neu geladen werden.

Das geht mit location.reload() oder einem Link auf die aktuelle Seite, ggf. mit veränderter URL. Der Sinn verschließt sich mir allerdings: Warum soll der Nutzer etwas auswählen, wenn diese Auswahl im direkten Anschluss zerstört wird, ohne dass sie eine Wirkung gehabt hätte?

Das aber sobald man ein Attrinut in der Selektbox angeklickt hat.

<select>-Boxen haben keine Attribute, die man anklicken könnte.

Dieses Attribut soll einen Wert übergeben, mit dem die komplette Seite neu geladen werden soll.

Was denn nun: Wert übergeben oder neu laden? Du musst Dich schon entscheiden.

Cheatah

[Maren]

Hallo,

Dann halt nochmal in andere Weise.

Beim ersten Aufrufen der Seite wird ein Kalender mit den heutigen Daten dargestellt.
Nun soll der Nutzer aber eine Select-Box zur Verfügung haben, bei der er einen bestimmten Tag zwischen 1 und 31 anwählen kann. Sobald er das getan hat, soll die Seite mit dem Wert (also der Tag, den er angewählt hat) neu geladen werden.

Jetzt verstanden?

[EKKi]

Mahlzeit,

Nun soll der Nutzer aber eine Select-Box zur Verfügung haben, bei der er einen bestimmten Tag zwischen 1 und 31 anwählen kann. Sobald er das getan hat, soll die Seite mit dem Wert (also der Tag, den er angewählt hat) neu geladen werden.

Dann kommst Du nicht umhin, ein Formular um die <select>-Box herumzupacken und - wie ich bereits zu Anfang schrieb - dieses Formular abzuschicken, damit Dein Server die Information, die der Benutzer ausgewählt hat, auch zu bekommen und verarbeiten zu können.

MfG,
EKKi

[Der Martin]

Hallo EKKi,

Nun soll der Nutzer aber eine Select-Box zur Verfügung haben, bei der er einen bestimmten Tag zwischen 1 und 31 anwählen kann. Sobald er das getan hat, soll die Seite mit dem Wert (also der Tag, den er angewählt hat) neu geladen werden.
Dann kommst Du nicht umhin, ein Formular um die <select>-Box herumzupacken ...

das stimmt so nicht ganz. Ein Formular (dann aber bitte auch mit Submit-Button!) wäre zwar eine sehr empfehlenswerte Fallback-Lösung für Besucher ohne Javascript. Aber es spricht nichts dagegen, im onchange-Eventhandler des select-Elements den ausgewählten Eintrag zu bestimmen und davon abhängig mit
  location.replace(url+"?param="+value);
die Seite mit den ausgewählten Informationen neu zu laden.

Ciao,
 Martin

[EKKi]

Mahlzeit,

das stimmt so nicht ganz. Ein Formular (dann aber bitte auch mit Submit-Button!) wäre zwar eine sehr empfehlenswerte Fallback-Lösung für Besucher ohne Javascript.

Andersherum wird ein Schuh draus: Zu erst einmal wichtig ist, dass die Seite(n) grundsätzlich auch ohne CSS und Javascript "funktionieren", d.h. bedienbar sind (Pflicht). Dem Benutzer dann Hilfen und Vereinfachungen anzubieten ist dann die Kür.

Seiten, bei denen man ohne Javascript nichts werden kann, sind schlicht und ergreifend fehlerhaft. Beispiel gefällig? Gerade heute bei einem Kollegen gesehen:

Der "Weltmarktführer": http://www.microsoft.com/enterprisesearch/serverproducts/searchserver/default.aspx

Auszug aus dem Code:

  
<td valign="middle" align="center" width="175" height="32" style="padding-right: 5px;">  
<div class="menu" id="menu2" title="Features" onclick="location.href='features.aspx'"  
onmouseover="this.className='menuselected';" onmouseout="this.className='menu';">  
Features</div>  
</td>

Ein Link ist ein Link ist ein Link. Wenn von einem Dokument auf ein anderes verwiesen wird, ist <a> das richtige Element - und NUR <a>.

Und es wäre - auch in diesem Fall - problemlos möglich gewesen, das richtige Element auch zu benutzen (man kann ihm schließlich auch ein "display: block;" verpassen ... man braucht kein <div>, wenn man gerne ein Blockelement haben möchte). Außerdem könnte dann auch der IE mit der Pseudoklasse ":hover" arbeiten und man könnte auf die unsäglichen Javascript-Mouseover-Spielereien verzichten.

Und wenn - wie bei meinem Kollegen heute - dann per zentral von den Admins festgelegter Sicherheitseinstellung "ActiveScripting" bei allen Websites der "Internetzone" deaktiviert ist, kann man noch nichtmal den "Verweisen" folgen.

Gottlob gibt es Firefox!

MfG,
EKKi

[Der Martin]

Hallo,

Ein Formular (dann aber bitte auch mit Submit-Button!) wäre zwar eine sehr empfehlenswerte Fallback-Lösung für Besucher ohne Javascript.
Andersherum wird ein Schuh draus: Zu erst einmal wichtig ist, dass die Seite(n) grundsätzlich auch ohne CSS und Javascript "funktionieren", d.h. bedienbar sind (Pflicht). Dem Benutzer dann Hilfen und Vereinfachungen anzubieten ist dann die Kür.

das sehe ich grundsätzlich auch so. Ich bin aber bereit, von diesem Dogma abzurücken, wenn anhand der Machart der Seite oder anhand der Zielgruppe ohnehin davon auszugehen ist, dass die Rezipienten[tm] auch Javascript, Flash, ggf. sogar ActiveX nutzen. Youtube scheint das z.B. auch so zu sehen, obwohl ich es gerade da nicht in Ordnung finde.
Für reine "Privatseiten", die just for fun im Netz stehen, setze ich deine (und auch meine) Forderung daher nicht ganz so hoch an.

Seiten, bei denen man ohne Javascript nichts werden kann, sind schlicht und ergreifend fehlerhaft. Beispiel gefällig? Gerade heute bei einem Kollegen gesehen:

http://www.microsoft.com/enterprisesearch/serverproducts/searchserver/default.aspx

Ach je, bei Microsoft ist das bekannt! Gerade wenn ich MS-Seiten besuche, bin ich immer froh, dass sich mein IE *nicht* als IE ausgibt. Wenn man mit einem IE bei deaktiviertem JS und ActiveX zu Besuch bei MS ist, funktioniert nämlich so gut wie gar nichts. Gaukelt man dem Server aber mit einem manipulierten User Agent einen völlig unbekannten (bzw. nicht identifizierbaren) Browser vor, bekommt man auf den meisten Seiten plötzlich ordentliches, oder zumindest problemlos nutzbares HTML ohne den sonstigen Firlefanz serviert.

Ein Link ist ein Link ist ein Link. Wenn von einem Dokument auf ein anderes verwiesen wird, ist <a> das richtige Element - und NUR <a>.

Full ACK.

Und es wäre - auch in diesem Fall - problemlos möglich gewesen, das richtige Element auch zu benutzen (man kann ihm schließlich auch ein "display: block;" verpassen ... man braucht kein <div>, wenn man gerne ein Blockelement haben möchte). Außerdem könnte dann auch der IE mit der Pseudoklasse ":hover" arbeiten und man könnte auf die unsäglichen Javascript-Mouseover-Spielereien verzichten.

Mir ist das klar - ich sehe solche verunglückten Seiten auch häufig und mache mir ab und zu aus Neugier die Mühe, den Code anzusehen. Fürchterlich, sach ich euch ... ;-)

Und wenn - wie bei meinem Kollegen heute - dann per zentral von den Admins festgelegter Sicherheitseinstellung "ActiveScripting" bei allen Websites der "Internetzone" deaktiviert ist, kann man noch nichtmal den "Verweisen" folgen.

Yo, das ist natürlich Asche. Da hat der Webautor (hier MS) richtig ins Klo gegriffen.

Gottlob gibt es Firefox!

Gottlob muss ich ihn nicht benutzen. :-)

Schönen Abend noch,
 Martin

[Maren]

Hey Ekki,

Ich hatte da einen kleinen Denkfehler.
Das passte doch mit Deiner Variante.

Ich hatte gedacht, dass da schon ein anderer Form-Tag drum liegt, war aber gar nicht so.

Klappt alles Prima.

Vielen Dank für Deine Hilfe

Lieben Gruß Maren