Daten mit Checkbox laden

[Lisa]

Hallo zusammen,
ich habe ein Formular wo sich ein oder mehrere Checkboxen drauf befinden. Nun soll es möglich sein, sobald der User eine Checkbox aktiviert, das darunter weitere optionen ausgegeben werden.
Zu Beispiel:

Checkbox: Daten von User         (Checkbox wird aktiviert)

erscheinen soll unter Daten von User:

Name:
          Strasse usw....

Hoffe ihr könnt mir helfen
Liebe Grüsse
Lisa

[Dieter Raber]

Hallo Lisa,

Du kannst das im Prinzip auf zwei Arten machen:
1. Du versteckst die optionalen Formfelder in einem <div>, den Du auf dispay:none setzt
2. Du generierst die Felder on-the-fly, das notwendige Ruestzeug findest Du hier http://de.selfhtml.org/javascript/objekte/node.htm
Methode 2 ist fuer mein Dafuerhalten wesentlich eleganter, setzt aber voraus, das Javascript auf jeden Fall eingeschaltet ist. Sie eignet sich also mehr fuer eine administrative Seite, wo du es haeufig mit bekannten Bedingungen zu tun hast.
Methode 1 funktioniert auch ohne Javscript und zwar, indem du per CSS den in Frage kommenden Bereich auf display:block und dann per Javascript auf display:none setzt. D.h., Benutzer ohne Javascript sehen den Bereich immer, Benutzer mit Javascript erst, nachdem mit dem Klick auf die Checkbox eine entsprechende Funktion ausgeloest wurde.

Gruß,

Dieter

[Lisa]

Hallo vielen Dank für deine Hilfe. Lösung zwei hört sich gut an.
Hast du evt ein Beispiel bin nicht so geübt darin.
Vielen Dank
Lisa

[wahsaga]

hi,

Lösung zwei hört sich gut an.
Hast du evt ein Beispiel bin nicht so geübt darin.

Was im groben zu tun ist, hat Dieter ja schon umrissen.
CSS-Eigenschaften von Elementen änderst du in Javascript über das Style-Objekt - also, versuche es doch mal.

gruß,
wahsaga

[Lisa]

Also hab mir das alles mal angeguckt. Hätte da aber noch ne Frage.
Wie rufe ich denn eine Funktion mit dem anklicken einer checkbox auf?
Danke
Lisa

[Andi]

Also hab mir das alles mal angeguckt. Hätte da aber noch ne Frage.
Wie rufe ich denn eine Funktion mit dem anklicken einer checkbox auf?

Mit ganz normalen EventHandlern am besten mit onClick oder onMouseUp.
Das ändern des style-Attributs, worauf wahsaga angesprochen hatte ist jedoch nur für Methode 1 relevant.

[Dieter Raber]

Hallo Lisa,

Hast du evt ein Beispiel bin nicht so geübt darin.

Hab ich. Das Erzeugen von Elementen ist meist ziemlich viel Fummelei, ich habe mir deshalb ein Script geschrieben, das zumindest die haeufigsten Augaben uebernimmt.

Die mach-mir-bitte-eine-neues-Element-Funktion sieht so aus

function elementHandler ()
{
  // ein Elemnt vom Typ 'Input' erzeugen
  this.buildInput = function(_type, _id, _value, _state)
  {
    var newElement = document.createElement('input')
    newElement.setAttribute('type', _type);
    newElement.setAttribute('id', _id);
    newElement.setAttribute('name', _id);
    if(_value) { newElement.setAttribute('value', _value); }
    if(_state) { newElement.setAttribute('checked', 'checked'); }
    return newElement;
  }

// button erzeugen
  this.buildButton = function(_type, _id)
  {
    var newElement = document.createElement('button')
    newElement.setAttribute('type', _type);
    if(_id)
    {
      newElement.setAttribute('id', _id);
      newElement.setAttribute('name', _id);
    }
    return newElement;
  }

// beliebiges Element erzeugen
  this.buildElement = function(_type, _id, _class)
  {
    var newElement = document.createElement(_type)
    if(_id) { newElement.setAttribute('id', _id); }
    if(_class) { newElement.className = _class; }
    return newElement;
  }

// Textarea erzeugen
  this.buildTextarea = function(_value, _id)
  {
    var newElement = document.createElement('textarea')
    if(_value) { newElement.setAttribute('value', _value); }
    if(_id)
    {
      newElement.setAttribute('id', _id);
      newElement.setAttribute('name', _id);
    }
    return newElement;
  }

//Label erzeugen
  this.buildLabel = function(_label, _id, _for)
  {
    var newElement = document.createElement('label')
    newElement.innerHTML = _label;
    if(_for) { newElement.setAttribute('for', _for); }
    if(_id) { newElement.setAttribute('id', _id); }
    return newElement;
  }

// Bild erzeugen
  this.buildImage = function(_src, _alt, _id)
  {
    var newElement = document.createElement('img')
    newElement.setAttribute('src', _src);
    if(_alt)
    {
      newElement.setAttribute('alt', _alt);
      newElement.setAttribute('title', _alt);
    }
    return newElement;
  }
}

Und hier ist ein Anwendungsbeispiel, erst ein Stueck HTML
In einem <div> mit der id "skillContainer" sind mehrere Textfelder mit entsprechen Labels untergebracht
  <div id="skillContainer">
    <div id="div1">
        <label for="new0">Task 1</label>
        <input name="new1" type="text" id="new1" />
      </div>
      [....]
      <div id="div5">
        <label for="new4">Task 5</label>
        <input name="new5" type="text" id="new5" />
      </div>

</div>

beim Klick auf den Button wird ein neuer Block mit Textfeld und Label angehaengt, indem die Funktion addSkill() aufgerufen wird
 <button type="text" onclick="addSkill()">Add new task</button>

Die Funktion addSkill geht so:
function addSkill()
{
  // Die Funktion nimmt sich erst den Container....
  var container      = document.getElementById('skillContainer');

// und dann alle div, die darin enthalten sind
  var allDiv         = container.getElementsByTagName('div');

// von diesen divs nimmt sie den letzten "allDiv[allDiv.length - 1]" ersetzt alle Buchstaben in der Id durch nix
  // durchsucht das Ergebnis nach Zahlen und addiert dazu 1, also aus "div5" wird erst 5, dann 6
  var newVal         = parseInt(allDiv[allDiv.length - 1].id.replace(/[a-zA-Z]+/,'')) + 1;

// die Zahl wird in einen String umgewandelt und das Wort "new" vorangestellt. Der Grund dafuer ist, dass gueltige ID's
  // mit einem Buchstaben anfangen muessen.
  var newInp         = "new" + newVal.toString()

// Jetzt wird eine neue Instanz der funktion weiter oben angelegt
  var handler        = new elementHandler()

// diese baut mir ein Element div mit der neuen id
  var skillDiv       = handler.buildElement('div', 'div' + newVal)

// das ganze nochmal mit label und textfeld
  var skillLabel     = handler.buildLabel('Task ' + newVal, '', 'new' + newVal)
  var skillText      = handler.buildInput('text', 'new' + newVal)

// Label und Textfeld werden in den neuen div eingehaengt....
  skillDiv.appendChild(skillLabel);
  skillDiv.appendChild(skillText);

// .. und dieser schliesslich in den Hauptcontaienr
  container.appendChild(skillDiv);
}

Wenn Du eine aehnliche Funktion ueber eine Checkbox schalten willst, muesstest du vorher noch ueberpruefen, ob die Checkbox ein- oder ausgeschaltet wurde und je nachdem entweder neue Elemente einhaengen, oder vorhandene loeschen. Beim Loeschen nicht vergessen, mit confirm() beim Benutzer nochmal nachzufragen, ob er wirklich die muehevoll eingetragenen Daten loeschen moechte

Gruß,

Dieter

[Lisa]

Öhhhhh ja jede Menge Code :O)

Ist das denn alles von Nöten. Ich möchte doch nur auf eine Checkbox klicken und darunter soll dann ein text erscheinen.

Sorry aber ich bin da eben nicht so fit drin.
Lisa

[Dieter Raber]

Hallo Lisa,

Öhhhhh ja jede Menge Code :O)

Kann man so sagen ;-)

Ich möchte doch nur auf eine Checkbox klicken und darunter soll dann ein text erscheinen.

Mein Verstaendnis war bisher, dass unter der Checkbox ein Formular generiert werden soll, indem Name, Strasse etc. eingetragen werden koennen. Dann musst Du das in etwa so machen, wie ich es dir vorgeschlagen habe. Jetzt lese ich hier heraus, dass bereits bekannte Daten angezeigt werden sollen, das ist natuerlich eine andere Sache.
Du waerst dann in der Tat mit Methode 1 besser dran.
Auf der Checkbox wuerde dann mit onclick="zeigeDaten(this, "id_des_divs")" der entsprechende div ein/ausgeblendet.

Die Funktion waere etwa so:

function zeigeDaten(sender, divId)
{
  var datenDiv = document.getElementById(divId);
  if (sender.checked == 'checked')
  {
     datenDiv.style.display = 'block';
  }
  else
  {
    datenDiv.style.display = 'none';
  }
}

Gruß,

Dieter

[Tim Tepaße]

Hallo,

Hallo vielen Dank für deine Hilfe. Lösung zwei hört sich gut an.

Ich würde trotzdem Lösung 1 nehmen, man kann Javascript nicht voraussetzen, deswegen sollte man Webseiten so defensiv gestalten, dass sie auch ohne dieses funktionieren.

Hast du evt ein Beispiel bin nicht so geübt darin.

Ganz nah: Solltest Du eine registrierte Nutzerin dieses Forums sein, solltest Du Dir mal die Benutzer-Einstellungen anschauen, dort wird teilweise mit dieser Technik, gerade bei Checkboxen hantiert.

Tim