# Textfeld nach Dropdown Auswahl füllen



## slsb02 (15. März 2007)

Hallo,

ich bin auf der Suche, nach folgender Möglichkeit. Ich habe ein Dropdown, wenn dort ein Wert gewählt wird, soll in einem Textfeld der passende Text dazu ausgegeben werden.
Bin für jeden Hinweis dankbar...

Ich hatte im Web mal ein Beispiel gefunden, kann es aber leider nicht mehr finden...

Vielen Dank
slsb02


----------



## Quaese (15. März 2007)

Hi,

versuch es mal so:

```
<form>
  <select onChange="this.form.txtOut.value=this.options[this.selectedIndex].text;">
    <option value="t1">Text 1</option>
    <option value="t2">Text 2</option>
  </select>

  <input type="text" name="txtOut" value="Text 1" />
</form>
```
Ciao
Quaese


----------



## slsb02 (15. März 2007)

Hallo Quaese,

vielen Dank, für die schnelle Antwort, es sieht nicht schlecht aus aber mein Problem ist, dass in diesem Textfeld ein anderer Wert stehen muss. 

D.h. Ich wähle eine Internetseite in einem Dropdown aus und möchte dann in dem Textfeld die passende URL sehen.  Das Dropdown, kann aber an keiner Stelle die URL beeinhalten da alle vorhanden werte für php auswertungen gebraucht werden.

Das heißt, ich müsste das Dropwdown eine Funktion ansprechen lassen, die alle Werte in einem array speichert und das Textfeld müsste dann auf diese Werte zugreifen!?

Vielen Dank
slsb02


----------



## Quaese (15. März 2007)

Hi,

Du hast Dir die passende Lösung doch schon überlegt. Du schreibst die entsprechenden URLs in ein Array.
Die Komponenten sprichts Du über den Index der jeweils gewählten Option an (selectedIndex).

Mein Vorschlag:

```
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.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 arrURLs = ["", "www.tutorials.de", "www.test.de"];
function changeInput(objSel){
  objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];
}
//-->
</script>
</head>
<body>
<form method="post" action="">
  <select onChange="changeInput(this);">
    <option value="t1">- bitte auswaehlen -</option>
    <option value="t2">Tutorials.de</option>
    <option value="t3">Test</option>
  </select>
  <input type="text" name="txtOut" value="" />
</form>
</body>
</html>
```
Ciao
Quaese


----------



## charli (27. Februar 2014)

Hallo Quaese,

bin gerade neu angekommen in diesem Forum und habe zu Deinem Script in diesem Thread  folgende Frage: 

Wie stelle ich es an, daß ich mehrere Select-Menues damit  nutzen kann ?
Zur Verdeutlichung folgend meine modifizierte Version: 

```
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/transitional.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 arrURLs = ["", "50", "90", "30", "25"];
function changeInput(objSel){
  objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];
}
//-->
</script>
</head>
<body>
<form method="post" action="">
  <select onChange="changeInput(this);">
    <option value="t1">- Arbeit bitte auswaehlen -</option>
    <option value="t2">Streichen</option>
    <option value="t3">Tapezieren</option>
  </select>
  <input type="text" name="txtOut" value="" />

<BR><BR>

  <select onChange="changeInput(this);">
    <option value="t1">- Farbe bitte auswaehlen -</option>
    <option value="t4">Grün</option>
    <option value="t5">Rot</option>
  </select>
  <input type="text" name="2txtOut" value="" />


</form>
</body>
</html>
```
Ich vermute der Knackpunkt liegt hier?   

function changeInput(objSel){
  objSel.form.txtOut.value = arrURLs[objSel.selectedIndex];

txtOut   habe ich im 2ten Menue  bereits zu 2txtOut  umbenannt, kann so aber nicht mehr gefüllt werden und konfliktet dann entsprechend mit dem ersten Menue.  Was muss geändert werden, um diese beiden bzw. mehrere Menues "ans laufen zu bringen"  

Freue mich über jede Hilfe und sage schonmal vielen Dank im Voraus, vG, Charli


----------



## slsb02 (27. Februar 2014)

Hallo Charli,

nach fast 7 Jahren eine Frage dazu, ich find's klasse ;-)

Ich würde es vermutlich heute so machen:

```
<?xml version="1.0" encoding="iso-8859-1" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/transitional.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 src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script type="text/javascript">
 <!--
 var arrURLs = new Array();
  arrURLs["t1"] = "";
  arrURLs["t2"] = "50";
  arrURLs["t3"] = "90";
  arrURLs["t4"] = "30";
  arrURLs["t5"] = "25";
 
  function changeInput(value, updateField){
   $("#"+updateField).val(arrURLs[value]);
  }
 //-->
 </script>
 </head>
 <body>
 <form method="post" action="">
 <select onChange="changeInput(this.value, 'txtOut');">
 <option value="t1">- Arbeit bitte auswaehlen -</option>
 <option value="t2">Streichen</option>
 <option value="t3">Tapezieren</option>
 </select>
 <input type="text" name="txtOut" id="txtOut" value="" />

 <BR><BR>

 <select onChange="changeInput(this.value, '2txtOut');">
 <option value="t1">- Farbe bitte auswaehlen -</option>
 <option value="t4">Grün</option>
 <option value="t5">Rot</option>
 </select>
 <input type="text" name="2txtOut" id="2txtOut" value="" />


 </form>
 </body>
 </html>
```


----------



## charli (28. Februar 2014)

Hallo slsb02,  vielen Dank für die schnelle Antwort.  

Habe es gerade ausprobiert, aber leider werden die Zahlenwerte nicht in die txtOut - Felder übertragen.
P.S.  "nach fast 7 Jahren eine Frage dazu, ich find's klasse"    kennen wir uns ?  Hatte mich gestern eigentlich schon gewundert, daß mein Username noch frei ist, vG, Charli


----------



## slsb02 (28. Februar 2014)

Hallo charli,

ich weiß nicht, ob wir uns kennen ;-)

Ganz wichtig im im <head> ist:

```
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
```

wenn du den ganzen Code kopierst, sollte es eigentlich keine Probleme geben... Ansonsten auch ruhig mal die Console für Fehler nutzen...

LG


----------



## charli (28. Februar 2014)

Hallo slsb02, habe mir gerade die js - Datei runtergeladen damit ich es auch offline lokal testen kann. Funktioniert supergut, tausend Dank nochmal.

Wo diese Reise noch hingeht wirst Du dir als erfahrener Coder sicher denken können. Im nächsten Schritt werde ich versuchen die Werte der txtOut Felder zu addieren und die Gesamtsumme zu berechnen.
Das versuche ich aber zunächst selbst hinzubekommen. 
Falls es Probleme gibt, darf ich dann nochmal auf Dich zurückkommen ?

vG  und nochmals 100 Dank, Charli


----------



## slsb02 (28. Februar 2014)

charli,

sehr gerne!

Wenn etwas ist, Fragen dafür ist solch ein Forum ja da... Ich bin gespannt ob du die kleinen Tücken von Javascript erfolgreich umgehst ;-)

LG


----------



## Quaese (28. Februar 2014)

Hi,

wenn das der einzige Anwendungsfall ist, für den du jQuery benötigst, würde ich überlegen, ob ein derart grosses Framework dafür geeignet ist - schliesslich muss es vom Browser des Benutzers zunächst heruntergeladen werden (Bandbreite, Performance, Ladezeiten). Es sind immerhin gute 90kB für jQuery im Verhältnis zu vier Zeilen nativem JavaScript.

Vielleicht reicht es hier, das bestehende Script zu erweitern:

```
<html>
<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 arrURLs = ["", "50", "90", "30", "25"];
function changeInput(objSel, strName){
    objSel.form.elements[strName].value = arrURLs[objSel.selectedIndex];
}
//-->
</script>
</head>
<body>
<form method="post" action="">
    <select onChange="changeInput(this, 'txtOut');">
        <option value="t1">- Arbeit bitte auswaehlen -</option>
        <option value="t2">Streichen</option>
        <option value="t3">Tapezieren</option>
    </select>
    <input type="text" name="txtOut" value="" />

    <BR><BR>

    <select onChange="changeInput(this, '2txtOut');">
        <option value="t1">- Farbe bitte auswaehlen -</option>
        <option value="t4">Grün</option>
        <option value="t5">Rot</option>
    </select>
    <input type="text" name="2txtOut" value="" />
</form>
</body>
</html>
```
Sollten für die Select-Felder unterschiedliche Werte benötigt werden, könnte das über ein Objekt statt eines Arrays (arrURLs) realisiert werden.

Ciao
Quaese


----------



## charli (7. März 2014)

Hallo slsb02, Quaese  vielen Dank nochmal für Eure Hilfe.

Unter dem letzten txtOut - Feld wollte ich abschließend die Endsumme berechnen, aber folgendes Funktioniert einfach nicht

<input " type="button" value="Endsumme berechnen!" onclick="output.value = (parseFloat(txtOut.value) + parseFloat(2txtOut.value) + parseFloat(3txtOut.value)) * 0.19  + parseFloat(txtOut.value) + parseFloat(2txtOut.value) + parseFloat(3txtOut.value)" /> 
<input type="text" id="output"  value="" / > €

innerhalb einer einzelnen html-Datei funktioniert das Problemlos, nur hier nicht, - habt Ihr eine Idee ?  Vielen Dank im Voraus, Charli


----------



## slsb02 (7. März 2014)

Hallo charli,

also ich würde es so machen (ich denke, dass ist auch übersichtlicher):

ersetze deinen "Endsumme berechnen!" - Button mit

```
<input type="button" value="Endsumme berechnen!" onclick="calculation();" />
```

und innerhalb des <script type="text/javascript"></script> fügst du nach der Funktion changeInput folgendes ein

```
function calculation() {
	 var field1 = parseFloat(document.getElementsByName("txtOut")[0].value);	
	 var field2 = parseFloat(document.getElementsByName("2txtOut")[0].value);	
	 var field3 = parseFloat(document.getElementsByName("3txtOut")[0].value);	

	 var result = (field1+field2+field3)*0.19+field1+field2+field3;
	 document.getElementById('output').value = result;
	}
```

damit sollte eigentlich alles wie gewünscht funktionieren...

Gruß!


----------



## charli (7. März 2014)

Hi slsb02,  perfekt, ich danke Dir tausendfach - funktioniert wunderbar.

vielen, vielen Dnk nochmal, Charli


----------



## fluffy0582 (8. Dezember 2014)

Hallo Zusammen,

ich suche nach einer ähnlichen lösung wie slsb02. 

wie man entsprechend einer auswahl in einem dropdown menü einen bestimmten wert in ein nicht editierbares anderes textfeld schreibt, hab ich rausgekriegt. 

mein problem ist nun, dass ich ein recht grosses formular habe welches mit einer tabelle aufgebaut ist und mehrere zeilen mit dropdown feldern und dazugehörenden textfeldern enthält. ich habs mit dem letzten beispiel (in dem streichen, tapezieren genannt ist) von Quaese probiert, allerdings scheint das nicht über andere tabellenfelder hinaus zu funktionieren. 

mein versuch für jede zeile ein eigenes array anzulegen hat nicht geklappt.

wäre ebenfalls für einen schubs in die richtige richtung sehr dankbar! 

Vielen Dank
fluffy0582


----------

