Anzahl Input Felder mit einem Select Feld verändern

M

MiLa

Erfahrenes Mitglied
Hallo,
ich suche eine Möglichkeit die Anzahl von Input-Feldern auf meiner Seite veränderbar zu machen.

Als Beispiel: Normal sind 2 Felder da, der User braucht aber 4 Felder für seine Daten, also wählt er im Select-Feld die 4 aus. Daraufhin erscheinen noch 2 Input-Felder ohne, dass die Seite neu geladen werden muss. Die Feldnamen sollen alle durchnummeriert werden: "feld_0", "feld_1", ...

Kann mir da jmd. weiterhelfen?
 
Hi,

mit createElement lassen sich neue Element generieren und mit appendChild in die Struktur
einhängen.
Sollen Elemente wieder entfernt werden, kann removeChild verwendet werden.

Die IDs im folgenden Script werdenverwendet, da der IE mit name-Kollektionen Probleme hat, wenn
sie aus nur einem Element bestehen. Über die ID sind die Elemente jedoch eindeutig identifizierbar
und können gelöscht werden.
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
  <!--
var intAnzahl = 2;  // Anzahl der vorhandenen Felder zu Beginn
function updateFields(objForm, strValue){
  // Falls die Anzahl der Felder erhöht werden muss
  if(Number(strValue) > intAnzahl){

    // Anzahl der neuen Felder durchlaufen
    for(i=intAnzahl; i<Number(strValue); i++){
      objTextfield = document.createElement("input"); // Neues Input-Element generieren
      objTextfield.type = "text";                     // Textfeld
      objTextfield.name = "feld_" + i;                // Name-Attribut zuweisen
      objTextfield.id = "feld_" + i;                  // ID wg. IE zuweisen
      objTextfield.value = "";                        // Keinen Wert setzen

      objForm.appendChild(objTextfield);              // Textfeld in Formular einhängen
    }
  // Falls die Anzahl der Felder verkleinert werden muss
  }else if(Number(strValue) < intAnzahl){
    // Anzahl der zu löschenden Felder durchlaufen
    for(i=intAnzahl; i>Number(strValue); i--){
      objDel = document.getElementById("feld_"+(i-1)); // Letztes Feld holen
      objForm.removeChild(objDel);                     // Feld löschen
    }
  }

  // Neue Anzahl der Textfelder setzen
  intAnzahl = Number(strValue);
}
 //-->
</script>
</head>
<body>
<form>
  <select name="selAnzahl" onchange="updateFields(this.form, this.value);">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
  </select>
  <input type="text" id="feld_0" name="feld_0" value="" />
  <input type="text" id="feld_1" name="feld_1" value="" />
</form>
</body>
</html>
Ich hoffe, das hilft dir weiter.

Ciao
Quaese
 
Super, das ist ja schon fast das was ich haben möchte...

Jetzt ist es so, dass diese Elemente nicht am Ende der Struktur angehängt werden sollen, sondern an einem ganz bestimmten Punkt.

Und optimal wäre es, wenn nicht nur ein <input>, sondern soetwas eigefügt wird:

Code: 
<tr>
<td><input type="text" name="feld" value=""></td>
</tr>
 
Ich glaube ich bin schon selbst auf dem richtigen Weg... :-)

Code: 
row = document.createElement('tr');
container = document.createElement('td');
            
objTextfield = document.createElement("input"); // Neues Input-Element generieren
objTextfield.type = "text";                     // Textfeld
objTextfield.name = "name_" + i;                // Name-Attribut zuweisen
objTextfield.id = "name_" + i;                  // ID wg. IE zuweisen
objTextfield.value = "";                        // Keinen Wert setzen
            
container.appendChild(objTextfield);
            
container2 = document.createElement('td');
            
objTextfield = document.createElement("input"); // Neues Input-Element generieren
objTextfield.type = "text";                     // Textfeld
objTextfield.name = "link_" + i;                // Name-Attribut zuweisen
objTextfield.id = "link_" + i;                  // ID wg. IE zuweisen
objTextfield.value = "";                        // Keinen Wert setzen
            
container2.appendChild(objTextfield);
            
row.appendChild(container);
row.appendChild(container2);
            
document.getElementById('test').appendChild(row);              // Textfeld in Formular einhängen
 
Zuletzt bearbeitet:
Hi,
1. der Thread ist uralt
2. einem Post über deinem steht doch schon ein komplettes Script - auch mit der von dir empfohlenen Funktion "createElement"

Aber trotzdem danke... ;-)
 
Hi,
Da ich grad das selbe Problem hatte, benützte ich natürlich die Searchfunktion dieser seite. Ich dachte eher an den Teil:

<SCRIPT>
function fnCreate(){
oData.innerHTML="";
var oOption=oSel.options[oSel.selectedIndex];
if(oOption.text.length>0){
var aElement=document.createElement(oOption.text);
eval("aElement." + oOption.value + "='" + oText.value + "'");
if(oOption.text=="A"){
aElement.href="javascript:alert('A link.')";
}
} oData.appendChild(aElement);
}
</SCRIPT>
<SELECT ID="oSel" onchange="fnCreate()">
<OPTION VALUE="innerText">A</OPTION>
<OPTION VALUE="value">&lt;INPUT TYPE="button"&gt;</OPTION>
</SELECT>
<SELECT ID=oText onchange="fnCreate()">
<OPTION></OPTION>
<OPTION VALUE="Text">Text</OPTION>
<OPTION VALUE="More and More Text">More and More Text</OPTION>
</SELECT>
<SPAN ID="oData" ></SPAN>so kannst du deine Teile an einem bestimmten Punkt ausgeben lassen...
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück