Zusätzliche Formularfelder erzeugen

[LastBoyScout]

Hallo,

Habe mir eine kleine Funktion zum erzeugen zusätzlicher Inputfelder zusammengebastelt:

fields = 0;  
function addInput() {  
  if (fields < 10) {  
    document.getElementById('inputlist').innerHTML += "<li><input id='" + fields + "' type='text' name='Text[]' size='80' value=''/></li>";  
    fields += 1;  
  } else {  
      document.getElementById('output').innerHTML += "Bitte nicht mehr als 10 Felder!";  
      document.form.add.disabled=true;  
    }  
}

Funktioniert soweit auch ganz gut.

Nur werden die Eingaben in bereits erzeugten Inputfeldern wieder zurückgesetzt, sobald man ein weiteres Feld hinzufügt.

Wie stelle ich es an, die Value beizubehalten?

Stehe da irgendwie auf dem Schlauch ...value='" + document.getElementById(fields) + "'... klappt leider nicht.

[ChrisB]

Hi,

Nur werden die Eingaben in bereits erzeugten Inputfeldern wieder zurückgesetzt, sobald man ein weiteres Feld hinzufügt.

Natürlich, weil du das komplette Formular jedes Mal überschreibst.

Wie stelle ich es an, die Value beizubehalten?

Nutze DOM-Methoden zum erzeugen und einhängen neuer Felder, statt innerHTML.
Oder füge ans innerHTML eines Elements im Formular an, welches noch keine Eingabefelder enthält, die dabei überschrieben würden.

MfG ChrisB

[LastBoyScout]

@ChrisB

Nutze DOM-Methoden zum erzeugen und einhängen neuer Felder, statt innerHTML.
Oder füge ans innerHTML eines Elements im Formular an, welches noch keine Eingabefelder enthält, die dabei überschrieben würden.

Danke, aber ich bin mit Javascript nicht so vertraut, könntest du es mir bitte mit nem Beispiel erläutern?!

[suit]

Danke, aber ich bin mit Javascript nicht so vertraut, könntest du es mir bitte mit nem Beispiel erläutern?!

Das hat jobo grade übernommen.

[LastBoyScout]

Das hat jobo grade übernommen.

»»

Dank des Tipp von jobo hab ich es jetzt so:

var neusInput=document.createElement('input');  
neusInput.id=fields;  
neusInput.type='text';  
neusInput.name='Text[]';  
neusInput.size='80';  
document.getElementById('inputlist').appendChild(neusInput);

womit die Eingabewerte erhalten bleiben.

Aber wie bekomme ich nun jeweils noch ein Listenelement <li>...</li> drumherum?

[ChrisB]

Hi,

Aber wie bekomme ich nun jeweils noch ein Listenelement <li>...</li> drumherum?

In dem du ein Listenelement erzeugst, und dann das Input dort hineinhängst.

MfG ChrisB

[LastBoyScout]

In dem du ein Listenelement erzeugst, und dann das Input dort hineinhängst.

Das ist ja klar! aber eben wie?

Kann ich das in einem rutsch mit erledigen? oder muss ich jedem Listenelement auch eine id zuweisen um es für den Eintrag des zugehörigen Inputfeldes identifizieren zu können?

[suit]

In dem du ein Listenelement erzeugst, und dann das Input dort hineinhängst.

Das ist ja klar! aber eben wie?

Genauso wie du auch input Elemente erzeugst :)

Kann ich das in einem rutsch mit erledigen? oder muss ich jedem Listenelement auch eine id zuweisen um es für den Eintrag des zugehörigen Inputfeldes identifizieren zu können?

Nein du kannst ein Listenelement erzeugen und dieses noch nicht ins DOM einhängen, in dieses "in der Luft schwirrende" li-Element hängst du dein input-Element ein und dann fügst du das fertige Konstrukt ins DOM ein.

Etwa so:

var li = document.createElement('li');  
var input = document.createElement('input');  
li.appendChild(li);  
document.getElementById('foo').appendChild(li);

[LastBoyScout]

Etwa so:

var li = document.createElement('li');

var input = document.createElement('input');
li.appendChild(li);
document.getElementById('foo').appendChild(li);

  
Ich hatte es so gelöst:  
  
`document.getElementById('inputlist').appendChild(neusList).appendChild(neusInput);`{:.language-javascript}  
  
und funktioniert auch, aber was ist nun korrekt?  

[suit]

li.appendChild(li);

Wobei das natürlich blödsinn ist, es müsste li.appendChild(input); lauten

document.getElementById('inputlist').appendChild(neusList).appendChild(neusInput);

und funktioniert auch, aber was ist nun korrekt?

Erfüllt beides seinen Zweck - müsste man benchmarken, was performanter ist. In deinem Fall dürfte das aber kaum eine Rolle spielen.

Ich tendiere aber eher aus übersichtsgründen zum "vorher Zusammenbauen", sonst wirds am Ende etwas unübersichtlich. Aber das ist Geschmackssache.

[LastBoyScout]

Nach einigen Fehlversuchen hab ich es nun funktionstüchtig hin bekommen:

var neusList=document.createElement('li');  
var neusInput=document.createElement('input');  
neusInput.id=fields;  
neusInput.type='text';  
neusInput.name='Text[]';  
neusInput.size='80';  
  document.getElementById('inputlist').appendChild(neusList).appendChild(neusInput);

Ist das auch korrekt so? oder sollte man noch etwas optimieren?

[EKKi]

Mahlzeit LastBoyScout,

neusInput.id=fields;

Eine ID darf nicht nur numerische Werte enthalten! Sie muss mit mindestens einem alphabetischen Zeichen beginnen.

Ist das auch korrekt so?

Nein.

oder sollte man noch etwas optimieren?

Eher korrigieren denn optimieren - s.o. ...

MfG,
EKKi

[jobo]

Hallo,

vielleicht nicht mit innnerHTML und Textstrings sondern mit Domnodes arbeiten.

newInput = document.createElement("input") ...; etc.pp.

http://www.javascriptkit.com/javatutors/dom2.shtml zB. beim Googlen sofort gefunden.

Ansonsten greifst Du auf den Wert eines inputFeldes zB. mit

document.getElementById("myInputFeld").value zu...;

Gruß

jobo

[LastBoyScout]

@jobo

Ok Danke.

Ansonsten greifst Du auf den Wert eines inputFeldes zB. mit

document.getElementById("myInputFeld").value zu...;

Wenn ich es so mache:
document.getElementById(fields).value = "xy"
woher bekomme ich dann aber die jeweiligen Eingabewerte (xy)?