✔ onChange neues Input Feld erzeugen

[Kerwin]

Hallo,

Ich habe folgendes vor :
Ich habe ein Selectfeld mit verschiedenen Optionen. Diese sollen zum Beispiel sein "1", "2", "andere" sein. Die Option "andere" soll es mir ermöglichen, einen alternativen Text zu selektieren den ich per Hand eingeben muss, sprich auf "andere" muss ich ein Eingabefeeld bekommen welches ich beschreiben kann. Wie kann ich sowas am besten realisieren?

Ich selber habe mir überlegt, ein Textfeld gleich daneben zu machen und es auf disabled zu stellen und wenn "andere" selektiert wird, dieses auf enabled zu setzten. Soweit würde ich das bestimmt auch hinbekommen.
Diese Möglichkeit sagt mir jedoch nicht wirklich zu. Viel schöner wäre es, nur ein Selectfeld zu haben und wenn ich auf "andere" klicke ein Inputfeld erscheint oder aber ich per JavaScript ein Popup, wie zum beispiel Aleart nur mit Eingabeleiste, erscheint ich da einen Wert eingeben kann und dieses evtl zur Select Liste hinzukommt.

Kann mir da vielleicht jemand einen kleinen Denkanstoß geben? Weiß leider nicht wie das alles so funktioniert und JavaScript bewandert bin ich auch nicht sonderlich.

 

[Sven Mintel]

Die Methode, um solche ein "alert mit Eingabeleiste" zu erzeugen, nennt sich prompt.

Wie man etwas zu einem <select> hinzufügt, wird grad in diesem Moment hier erörtert.

 

[Kerwin]

Ich bedanke mich für die Hinweise

 

[Kerwin]

Für alle die es interessiert wie ich das jetzt gelöst habe, wobei ich noch eine Frage habe. Bei

if(form.probe.options[form.probe.selectedIndex].value == "andere"){

schaue ich ja, ob die value der option == "andere" ist. Nun will ich aber nicht zwangsläufig eine value vorgeben, sondern er soll es anhand des Namens sehen den die Option hat. Hab schon kurz probiert mit

form.probe.options[form.probe.selectedIndex].name

, ging aber nicht so richtig.

  <form name="form" action="..." method="POST">
    <select name="probe" onchange="test()">
      <option>1</option>
      <option>2</option>
      <option>andere</option>
    </select>
  </form>

  <script type="text/javascript">
  <!--
  function test(){
    if(form.probe.options[form.probe.selectedIndex].text == "andere"){
      wert = prompt("Geben Sie bitte eine Alternative ein","");
      if(wert){
        // Neue Options-Instanz mit Wert aus Textfeld erstellen und diese in Selectstruktur einhängen
        form.probe.options[form.probe.length] = new Option(wert, wert, false, false);
      		
        // Die neue Optiopn als selected setzten(default)
        form.probe.options[form.probe.length - 1].selected = true;
      }
    }
  }
  //-->
  </script>

 

[Sven Mintel]

Wenn du mit "Name" das meinst, was man in der Liste lesen kann... diese Eigenschaft heisst "text".

form.probe.options[form.probe.selectedIndex].text

 

[Kerwin]

Genau das meinte ich. Das mit *.text scheine ich dann wohl überlesen zu haben . Code ist oben dementsprechend editiert.

Danke für deine Hilfe

 

[Kerwin]

So ganz hat sich das doch noch nicht erledigt ^^.

Soweit ja alles bestens, nur ist mir jetzt bei der Implementierung für mehrere solche Felder aufgefallen, dass ich den namen des Feldes ja dynamisch halten muss. Nur will das nicht ganz so wie es soll.

Bsp.

<SELECT name="probe" onchange="test(this.name)"><SELECT>......</SELECT>
<SELECT name="abc" onchange="test(this.name)"><SELECT>......</SELECT>

Mit this.name übergebe ich ja den Feldnamen (probe) an die Funktion "test".

Nun will ich im JavaScript teil das this.name verarbeiten. Gebe ich im dem Teil das XY mit alert aus, kommt die richtige Meldung, will ich diesen aber benutzen um das Feld zu erkennen, geht es nicht.

  <script type="text/javascript">
  <!--
  function test(XY){
    if(form.XY.options[form.XY.selectedIndex].text == "andere"){
   ....
   ....
  //-->
  </script>

[EDIT]
Hat sich erledigt, mit elements[XY] geht es.

So, nun es erst einmal wie ich es will
[/EDIT]