Deus Figendi: Input Feld dynamisch

Beitrag lesen

HAllöchen und Danke für Deine Antwort.

Gern :)

Habe deinen Vorschlag umgesetzt. Klappt auch mit Einer Ausnahme:
Der Erste der gesammt 18 Spieler wird nicht per POST übermittelt. Die anderen schon. Komisch *grübel

Komischer Fehler. Solltest du 1:1 kopiert haben (anstatt SELF zu lernen :-p) mag es vielleicht am fehlenden " hinter "post" liegen!?

Statt der Schaltfläche kannst du natürlich auch ein Bild verwenden oder tatsächlich JS um das Formular abzuschicken. Im letztem Falle müsstest du dann aber auch ein Fallback schreiben, welches ohne JS funktioniert (also mit JS den submit-Button ausblenden und dafür ein anderes Element wie <u> einblenden).

Das ist der eigentliche Punkt.
Am liebsten hätte ich einen Button\Bild\String (LP-Teilnahme), wenn der angeklickt wird erscheint an der SELBEN Stelle nur ein Inputfeld mit Submit-Button. Dort gibt die Person Ihr passwort ein.
Das ganze geht an ein PHP-Script das im Hintergrund den Namen und das Passwort prüft (sind beides schon als Liste/Array vorhanden)und bei TRUE den Spieler einträgt in einer anderen Liste/Array (natürlich darf der Name nur 1x in der anderen Liste/Array sein).
Wenn alles FALSE dann kurze Ausgabe.

Irgendwie hab ich manchmal Schwierigkeiten dich zu verstehen, es ist immer viel raten dabei ^^
Aber zumindest den ersten Teil habe ich verstanden und der zeigt klar auf JavaScript, vielleicht sogar AJAX (dann kannst du die Antwort direkt in die Seite schreiben ohne sie neu zu laden).
Das erkläre ich jetzt aber nicht alles, also eine Option: JS lernen.
Ohne AJAX aber mit JS könnte es etwa so funktionieren... man nimmt das Formular von oben und fügt ein Label ein:

  
  <label for="lp_password" id="lpp_label">Passwort: LP-Teilnahme:</label>  
  <input type="password" name="lp_password" id="lp_password" />  
  <input type="submit" name="foobar" value="LP Teilnahme?" />  
 </form>

Ein bisschen CSS-foo:

label {  
 display:inline;  
}

Und dann kann man eben noch JS drauf werfen, erstmal das CSS erweitern um ein- und ausblenden zu ermöglichen:
.... äääh Moment, mir fällt gerade ne Variante ein, die auch ohne JS klar kommen müsste. Also nochmal, um das Selektieren zu vereinfachen packen wird die beiden inputs einfach in das label. Denn Geschwister zu selektieren find ich persönlich immer anstrengend ^^

  
  <label for="lp_password" id="lpp_label">LP-Teilnahme:  
    <input type="password" name="lp_password" id="lp_password" />  
    <input type="submit" name="foobar" value="Anmelden" />  
  </label>  
 </form>

Und nun wird mit CSS gezaubert :D

  
/* Formular-Elemente default ausblenden */  
#lpp_label input {  
 display:none;  
}  
/* Formular-Elemente wieder einblenden, wenn sie irgendwie aktiviert werden */  
#lpp_label:hover input , #lpp_label input:focus , #lpp_label:active input , #lpp_label input:active {  
 display:inline;  
}  
/* Außerdem soll das Label auch die Beschriftung bekommen, die es verdient :D */  
#lpp_label:hover:before , #lpp_label:active:before , #lpp_label:focus:before { /*ich weiß gar nicht ob man label fokussieren kann */  
content:"Passwort ";  
}  

So oder so ähnlich könnte/sollte es klappen. Wenn jemand auf "LP-Teilnahme" klickt erscheint das Passwort-Feld und die Abende-Schaltfläche. Außerdem wird "LP-Teilnahme" zu "Passwort LP-Teilnahme".
Oh und falls das nicht klappt braucht man doch den Geschwister-Selektor:

#lpp_label input:focus~input , #lpp_label input:active~input{  
 display:inline;  
}

Wie gesagt nur falls das oben nicht klappt. Damit sollte sicher gestellt sein, dass die Submit-Schaltfläche auch dann eingeblendet bleibt, während man das PW gerade eintippt, falls der Browser meint, dass das Laben während dessen eigentlich weder :active noch :focus sei (was ich einfach nicht weiß).
Man kann sicher noch viel lustiger tricksen, z.B. CSS-Animationen verwenden um die input-Elemente irgendwo hinter heraus fahren zu lassen o.ä. Oder anstelle von Pseudo-Elementen (:before) kann man sicher auch einzelne Beschriftungen nehmen, die man zusammen mit den Inputs einblendet (also das label durch ein div ersetzen und in dem div dann input und label zusammen ein-/ausblenden wobei im label dann "Passwort:" steht) oder so.

AFAIK gibt es keinen Eltern-Selektor, andernfalls könnte man noch das Pseudo-Element auf das label werfen während die inputs :focus (oder :active) sind. Aber auch das kann man hinbekommen, wenn du das ganze zu Geschwistern umbastelst.

Wie gesagt oder lern AJAX ^^ Dann kannst du auch ein Inline-PopUp basteln (also ein Formular, welches du über der eigentlichen Seite einblendest), das erscheint wenn man "Teilnahme" klickt und dann kann man die Antwort ("du wurdest eingetragen in Liga X" oder "du konntest nicht eingetragen werden, weil...") auch an genau die Stelle schreiben wo vorher "Teilnahme" stand.
Wenn ich das richtig verstehe schreibst du das auch für dich und 17 Kumpels, in dem Fall braucht man ggf. auch gar kein Fallback, sondern kann den paar Benutzer auch verklickern, dass sie JS für die Seite gefälligst zulassen sollen :) In solchen Klein-Gruppen (hat ja fast Intranet-Charakter) kann man sowas imho schonmal machen. Ebenso kannst du dann gleich sagen, dass IE<8 ein nicht ist und IE<9 eigentlich auch nicht (wobei... was man so hört ist IE8 im Standard-Modus schon okay nur gequirxt isser halt gaga).

Danke für den Fisch!

--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(