Daten mit Checkbox laden

[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