Modulares Formular mit CheckBox

Hallo!

Ich möchte ein Formular möglichst "modular" gestalten, d.h. sobald man
auf eine (von mehreren) CheckBoxen klickt, so soll der entsprechende
Inhalt (Eingabefelder usw.) erscheinen.

Als Ansatz für mein Problem habe ich die Export-Funktion von phpMyAdmin
genommen. Dort wird mittels Radio-Button geschalten.
Ich habe das Script schon so weit umgeschrieben, dass

1.) beim "Starten" der Internet-Seite alles leer ist
2.) beim Klick auf eine Checkbox der entsprechende "Inhalt" erscheint
3.) mehrere Checkboxen wählbar sind und deren "Inhalte" gleichzeitig
ausgibt.

Das Problem: Wie kann ich automatisch bestimmte Checkboxen anklicken
lassen und auch deren "Inhalte" ausgeben?

Hier ein Teil des Script:

... onLoad="if(this.checked) { getElement('sql_options').style.display =
'block'; } else { getElement('sql_options').style.display = 'none'; }"
checked=checked />

Bin für jede Hilfe dankbar!

Mfg,
Dieter

Dieter Schlosser <dieter.schlosser (AT) networld (DOT) at> typed:

Das Problem: Wie kann ich automatisch bestimmte Checkboxen anklicken
lassen und auch deren "Inhalte" ausgeben?

Du kannst die click()-Methode des Elements aufrufen.

Hier ein Teil des Script:

.. onLoad="if(this.checked) [...]

Was Du da per ".." auslässt, wäre interessant: mir ist kein Element
bekannt, das sowohl eine checked-Eigenschaft als auch einen Handler
für ein load-Event besitzt.

ciao, dhgm

Dieter Schlosser wrote:

Ich möchte ein Formular möglichst "modular" gestalten, d.h. sobald man
auf eine (von mehreren) CheckBoxen klickt, so soll der entsprechende
Inhalt (Eingabefelder usw.) erscheinen.

Das ist, entgegen Deiner Vorstellung, _nicht_ der Übersichtlichkeit/
Ergonomie des Formulars dienlich, im Gegenteil. Sinnvoller ist es,
die entsprechenden Formularelemente nur dann zu *aktivieren*
(disabled = false), wenn die entsprechende Checkbox checked ist.
Die Alternative ist, einen Details-Button einzubauen, der dann
Detailoptionen ein-/ausblendet (die natürlich, falls zunächst
ausgeblendet, nur mit Scripting ausgeblendet werden dürfen, nicht
mit statischem CSS), wobei die betreffenden Formularelemente dann
ausgeblendet _und_ deaktiviert werden sollten (um den Versand der
nicht bewußt eingegebenen Information zu verhindern).


PointedEars

Thomas 'PointedEars' Lahn schrieb:

Dieter Schlosser wrote:


Ich möchte ein Formular möglichst "modular" gestalten, d.h. sobald man
auf eine (von mehreren) CheckBoxen klickt, so soll der entsprechende
Inhalt (Eingabefelder usw.) erscheinen.


Die Alternative ist, einen Details-Button einzubauen, der dann
Detailoptionen ein-/ausblendet (die natürlich, falls zunächst
ausgeblendet, nur mit Scripting ausgeblendet werden dürfen, nicht
mit statischem CSS), wobei die betreffenden Formularelemente dann
ausgeblendet _und_ deaktiviert werden sollten (um den Versand der
nicht bewußt eingegebenen Information zu verhindern).

Genau so möchte ich das realisieren (allerdings statt dem Detail-Button
eine CheckBox bei der jeweilige Kategorie).

Hier der volle Code (sorry @ Dietmar):


<!-- Checkbox -->

<input type="checkbox" name="what" value="sql" id="radio_dump_sql"
onLoad="if(this.checked) { getElement('sql_options').style.display =
'block'; } else { getElement('sql_options').style.display = 'none'; }"
checked=checked />


<script type="text/javascript">
<!--


function show_checked_option() {
hide_them_all();
if (getElement('radio_dump_latex').checked) {
getElement('latex_options').style.display = 'block';
} else if (getElement('radio_dump_sql').checked) {
getElement('sql_options').style.display = 'block';
} else if (getElement('radio_dump_xml').checked) {
getElement('none_options').style.display = 'block';
} else if (getElement('radio_dump_csv').checked) {
getElement('csv_options').style.display = 'block';
} else if (getElement('radio_dump_excel').checked) {
getElement('excel_options').style.display = 'block';
}

}

//-->
</script>


<script>
function hide_them_all() {
getElement("csv_options").style.display = 'none';
getElement("excel_options").style.display = 'none';
getElement("latex_options").style.display = 'none';
getElement("sql_options").style.display = 'none';
getElement("none_options").style.display = 'none'; }
</script>

Das ist der volle Code. Ich hoffe, ihr könnt damit etwas anfangen.

Mfg,
Dieter

Dieter Schlosser <dieter.schlosser (AT) networld (DOT) at> typed:

input type="checkbox" [...] onLoad="[...]

Nochmals: in welchem Objektmodell erzeugte irgendein Input-Element
ein Load-Event?

ciao, dhgm

Dietmar Meier schrieb:

Nochmals: in welchem Objektmodell erzeugte irgendein Input-Element
ein Load-Event?

Sorry, da kann ich dir nicht ganz folgen. Objektmodell?

Mfg,
Dieter

Dieter Schlosser <dieter.schlosser (AT) networld (DOT) at> typed:

Nochmals: in welchem Objektmodell erzeugte irgendein Input-Element
ein Load-Event?

Sorry, da kann ich dir nicht ganz folgen. Objektmodell?

Anders gefragt: Wie kommst Du auf die Idee, einem Input-Element
ein Attribut "onload" zuzuordnen? Wo (in welchem Brauser) soll
das welchen Effekt erzielen und wo hast Du gelesen, dass dies
irgendeinen Effekt erziele?

ciao, dhgm

Dietmar Meier schrieb:

Anders gefragt: Wie kommst Du auf die Idee, einem Input-Element
ein Attribut "onload" zuzuordnen? Wo (in welchem Brauser) soll
das welchen Effekt erzielen und wo hast Du gelesen, dass dies
irgendeinen Effekt erziele?

Zuerst stand da onClick, was auch gut funktionierte. Dann bemerkte ich
allerdings, dass beim "Neuladen" der Seite die Checkboxen, die mit dem
Attribut "checked" ausgestattet sind, nicht den gewünschten Inhalt anzeigen.
Daher dachte ich, dass es vielleicht mit onLoad funktionieren könnte -
habe mich geirrt.

Von dem ganzen Code einmal abgesehen - WAS muss ich tun, damit ich
Thomas' Lösung realisieren kann?

Danke,
Dieter

Dieter Schlosser wrote:

Dietmar Meier schrieb:

Nochmals: in welchem Objektmodell erzeugte irgendein Input-Element
ein Load-Event?


Sorry, da kann ich dir nicht ganz folgen. Objektmodell?

Du hast
<input type="checkbox"
onLoad="..."
aber in HTML 4.01 hat <input> die Attribute als Eventhandler, die unter
http://www.w3.org/TR/html4/interact/forms.html#h-17.4
gelistet sind, das sind onfocus, onblur, onselect, onchange, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onkeypress, onkeydown, onkeyup, dort findet sich aber kein
onload
warum also benutzt du das, von welchem Browser nimmst du an, dass er
einen onload-Handler fuer ein <input>-Element ausfuehrt?

Auch MSIE
http://msdn.microsoft.com/library/de...nts/onload.asp
unterstuetzt das nicht fuer <input>.
--

Martin Honnen
http://JavaScript.FAQTs.com/

Dieter Schlosser wrote:

Thomas 'PointedEars' Lahn schrieb:
Dieter Schlosser wrote:
Ich möchte ein Formular möglichst "modular" gestalten, d.h. sobald man
auf eine (von mehreren) CheckBoxen klickt, so soll der entsprechende
Inhalt (Eingabefelder usw.) erscheinen.

Die Alternative ist, einen Details-Button einzubauen, der dann
Detailoptionen ein-/ausblendet (die natürlich, falls zunächst
ausgeblendet, nur mit Scripting ausgeblendet werden dürfen, nicht
mit statischem CSS), wobei die betreffenden Formularelemente dann
ausgeblendet _und_ deaktiviert werden sollten (um den Versand der
nicht bewußt eingegebenen Information zu verhindern).

Genau so möchte ich das realisieren (allerdings statt dem
Detail-Button eine CheckBox bei der jeweilige Kategorie).

Nein, Du möchtest *mehrere* Detail"buttons". Das aber macht
das Formular unübersichtlich/unergonomisch und ist damit Unfug.


PointedEars