✔ Formular-Element bei Auswahl wechseln

[WiZdooM]

Hallo

ich stehe gerade vor einer kleinen Nuss.
Es geht darum, dass ein bestimmtes Element innerhalb einer Drop-Down-Schaltfläche dazu verwendet wird, sich selbst auszublenden und dafür ein input-Textfeld einzublenden.

Man kann sich das so vorstellen: Drop-Down-Feld mit Jahreszahlen die von 2009-2000 reichen und einem letzten Eintrag "<2000". Bei Auswahl des Eintrags <2000 soll dieses Drop-Downfeld sich ausblenden das input Textfeld an dieser Stelle erscheinen, um eine beliebige Jahresangabe zu ermöglichen.

Ist solch ein dynamischer Formularfeldwechsel möglich ? Wenn ja wie ?

 

[Sven Mintel]

Moin,

soetwas ist möglich. Sobald die entsprechende Option gewählt wurde, erzeuge per document.createElement() ein Input-Element und setze dessen name-Attribut auf den gewünschten Wert. Den Austausch selbst kannst du dann mittels der Methode replaceChild() vornehmen.

 

[WiZdooM]

Hi Sven

ich habe mich mal an der von dir angesprochenen Lösung versucht, aber irgendwie passiert nichts.

function changeElement(){
    var textbox = document.createElement('<input name="KdWohnhaft_year" type="text" maxlength="4" value="yyyy" style="width:75px"/>')
    document.getElementById("KdWohnhaft").replaceChild(textbox,document.getElementById("KdWohnhaft_year"));
}

So wie ich das verstehe, ersetzt replaceChild den Kindknoten eines Elternknoten. In diesem Fall ist der Elternknoten bei mir die Tabellenzelle "KdWohnhaft", "textbox" stellt das neue Element dar und "KdWohnhaft_year" das Drop-Down-Feld, das zu ersetzen ist.

Angesteuert wird die Funktion im <option>-Tag via onchange="changeElement();"

Ich sehe den Klemmer irgendwie nicht.

 

[Quaese]

Hi,

das Anlegen eines Elementes über die komplette Angabe eines Tags mit Attributen wird nur vom IE unterstützt, ist hier aber nötig, da es sonst zu Problemen mit dem name-Attribut kommen kann.
Für die anderen Browser muss erst das Element erstellt werden und anschliessend die Attribute einzeln zugewiesen werden.

Weiterhin würde ich über parentNode das Elternelement des Select-Feldes ermitteln.

function changeElement(objSel){
  if(document.all && !window.opera)
    var textbox = document.createElement('<input name="KdWohnhaft_year" type="text" maxlength="4" value="yyyy" style="width:75px"/>');
  else{
    var textbox = document.createElement("input");
    textbox.type = "text";
    textbox.name = "KdWohnhaft_year";
    textbox.maxlength = "4";
    textbox.value = "yyyy";
    textbox.style.width = "75px";
  }

  objSel.parentNode.replaceChild(textbox, objSel);
}

Beim Aufruf wird das Select-Objekt über die Referenz this der Funktion übergeben.

<table>
<tr>
  <td id="KdWohnhaft">
    <select id="KdWohnhaft_year" onchange="if(Number(this.options[this.selectedIndex].value)<0) changeElement(this);">
      <option value="0">- wählen -</option>
      <option value="-1">&lt; 2000</option>
      <option value="2001">2001</option>
    </select></td>
  <td>LEER</td>
</tr>
</table>

Ciao
Quaese

 

[WiZdooM]

Da wär ich im Lebtag nicht drauf gekommen, dass man das für die Browser unterschiedlich machen muss.

Vielen Dank