nicht angemeldet
Moin!
Folgendes Problem:
Auf meiner Webseite gibt es die Möglichkeit bei verschiedenen Formularen Voreinstellungen auszuwählen, um die Eingabe zu verkürzen.
Wählt man also z.B. die Voreinstellung A für das Formular, dann legt Javascript los:
document.getElementById('erstesTextfeld').value = 'eins';
document.getElementById('zweitesTextfeld').value = 'zwei';
document.getElementById('ersteCheckbox').checked = true;
usw. ...
Das Problem ist: Man kann der Veränderung quasi zuschauen. Da bis zu 30 Formularfelder verändert werden, geht das ganze relativ langsam und daher für das Auge sichtbar von statten. Also habe ich mir überlegt, dass es sinnvoller wäre wenn man eine Art Ladegrafik vorschaltet und dann erst das komplett veränderte Formular wieder sichtbar macht.
Aber auch hier kommt es zu einem visuellen Problem:
Das Formular befindet sich in einer Tabelle. Ich stelle das Div, welches das Formular enthält auf "visibility:none", füge dann in die Tabelle ein "LadeDiv" ein mit der Ladegrafik, verändere die Formulardaten, lösche das Div mit der Ladegrafik und stelle das Forlumardiv wieder auf "visibility:visible." Da hier die Befehle aber natürlich wieder hintereinander ablaufen, wird das Ladediv gelöscht und die Tabellenspalte kurzfristig "eingeklappt", da ja kein Inhalt vorhanden ist. Danach klappt sie auf mit den veränderten Formulardaten. Das hört sich nicht wirklich schlimm an, aber dieses ganz kurze "zu- und aufklappen" sieht grausig aus.
Also nächste Möglichkeit probiert ...
Ich dachte mir dass es zu diesem Effekt nicht kommen sollte, wenn ich nicht mit der Visibility arbeite, sondern den Inhalt des Divs direkt verändere. Also nach dem Muster:
Ein verstecktes Div erzeugen, Formular dorthin kopieren, dann in das Original-Div Ladegrafik einfügen, Formular verändern und das Forumlar wieder in das Original-Div kopieren und das versteckte löschen.
Das funktioniert visuell auch so wie ichs will. Es wechselt sehr "harmonisch" zwischen Ladegrafik und Formular.
Jetzt ist allerdings das Problem, dass ich die veränderten Formulardaten nicht kopiert bekomme zwischen den beiden Divs. Die Hinfahrt ist ja einfach:
HiddenDiv.innerHTML = FormularDiv.innerHTML;
FormularDiv.innerHTML = 'ladegrafik.gif';
//Formularfelder verändern
Wenn ich jetzt in der Form von FormularDiv.innerHTML = HiddenDiv.innerHTML zurückkopieren will, funktioniert das Ganze natürlich so nicht, weil ich den HTML-Code ja kein Stück verändere. Also bekomme ich das Original-Formular und nicht die veränderte Version.
Da das ganze über Ajax läuft, weil ich die Voreinstellungen aus einer Datenbank holen muss, wäre es recht einfach die Geschichte auf php-Ebene zu lösen, indem ich einfach das Forumlartemplate lade, entsprechend verändere und ausgebe. Aufgrund der Funktionalität bin ich aber an einer reinen Javascript-Lösung interessiert (falls das überhaupt geht).
Hat da jemand eine Idee?
Grüße,
j0Shi