# JSP-Site textfeld dynamisch hinzufügen



## mathon (8. Dez 2005)

Hallo,

Ich habe eine JSP-Site mit einer Dropdownlist (mit html:select und htmlptions) definiert. Jetzt möchte ich, wenn der User einen bestimmten Wert in der Dropdownlist ausgewählt hat, ein zusätzliches TextFeld in der JSP-Site aufscheinen lassen, wo der User einen zusätzlichen Wert eingeben kann.

Weiß jemand, wie ich das am einfachsten realisiere? :bahnhof: 

danke

lg mat


----------



## Guest (8. Dez 2005)

Mit Javascript. Das zusätzliche Feld bleibt zunächst versteckt (style="visibility:hidden"). 
Bei onChange in dem Select-Tag zeigst du das Ding bei Bedarf mit feld.style.visibility = 'visible'; an.
Alternativ kannst du auch "display:none" verwenden und mit feld.style.display = ''; wieder anzeigen
oder auch enabled/disabled.
Der Unterschied liegt in der Anzeige des versteckten Elements. Bei "display", wird der Platz 
im Layout nicht reserviert. 

Siehe auch "document.getElementById(id)" in einer Javascript-Referenz.


----------



## mathon (8. Dez 2005)

HI,

danke für die antwort, etwas unklar ist mir das noch:

das hidden attribut für das textfeld definieren ist klar.

so sieht mein select aus:


```
<html:select style="background-color:E4EBF9" property="amortization">
<html:options style="background-color:E4EBF9" property="amortization_variants" labelProperty="amortization_variants"/>
</html:select>
```

Wo soll das onChange event definiert werden? - denn ich möchte ja nur wenn ein bestimmter Wert aus der Liste ausgewählt wird das zusätzliche Feld anzeigen..?


----------



## Guest (9. Dez 2005)

Hi,

sorry, dass ich erst jetzt antworte, ich war unterwegs...
Mit Struts habe ich noch nie gearbeitet und weiss nicht, ob es funktionieren wird,
aber es sollte wie folgt gehen

```
// Irgendwo zwischen <HEAD> und </HEAD>
<script type="text/javascript">
<!--
function checkState(selectedValue) {

  textField = document.getElementById("idDesTextfeldes");
  if(selectetdValue == ....)
    textField.style.visibility = 'visible';
  else {
    textField.value = '';
    textField.style.visibility = 'hidden';
  }
}
-->
</script>

...

<html:select style="background-color:E4EBF9" property="amortization" onChange="Javascript:checkState(this.options[this.selectedIndex].value);">

...

<html:text ... id="idDesTextfeldes" style="visibility: hidden" />
```


----------



## mathon (9. Dez 2005)

Hi,

danke für deine antwort. Ich habe es jetzt mit dem reload der jsp-site gelöst und zwar mit der document.computeCreditForm.submit(); funktion im onchange event vom html:select. Und dann wird in der jsp-site eben mit einem logic:equal abgefragt ob der bestimmt Wert von der DropdownList ausgewählt wurde. Das Problem ist jetzt dass ich auf dieser jsp-site auch einen submit-button habe. und wenn ich dann den bestimmten wert auswähle von der dropdownlist wird auch der submit-button gedrückt. Kann man das irgendwie umgehen, dass der dabei nicht gedrückt wird...??

Ich wollte dann auch deine Lösung ausprobieren, aber bei dem html:text tag gibt es kein property id...?? - und die Javascript funktion kann ich beim onchange auch nicht so einfügen, da wird ein fehler angezeigt, dass dies invalid für onchange ist.

lg
mat


----------



## Guest (9. Dez 2005)

Es sind ganz normale Sachen in HTML und Javascript und sollten funktionieren. 
Wie sieht das HTML der generierten Seite aus?


----------



## mathon (9. Dez 2005)

HI,

deine Lösung funktioniert, bis auf das, das ich nicht weiß wie ich das html:text feld ansprechen kann, da das html:text tag von struts kein id-Attribut zur Verfügung stellt. Weißt du wie ich das textFeld noch ansprechen kann? - das heißt, die javascript funktion wird schon bei der auswahl des entsprechenden wertes der dropdownlist ausgewählt, jedoch weiß ich jetzt nur nicht, wie ich aus der javascript funktion dann das html:text feld ansprechen kann..??

lg


----------



## Guest (10. Dez 2005)

Versuche es über das Name-Attribut.

document.getElementsByName("nameDesTextfeldes")[0]

Es ist ein Array, da mehrere Elemente gleichen Namen haben können.
Wenn du nur eins mit dem gegebenen Namen hast, dann ist es
an erster Stelle drin.


----------



## mathon (10. Dez 2005)

Naja das name attribute habe ich auch versucht, aber das name attribut wird beim html:text tag verwendet um ein bean zu definieren, das funktioniert leider auch nicht. Kann man das html:text feld sonst noch irgendwie ansprechen...??


----------



## Guest (10. Dez 2005)

Wie sieht der generierte HTML-Code des Textfeldes aus?
Ist es wirklich so, dass Struts alle Attribute entfernt, die in Struts nicht definiert sind?
Wenn ja, dann ist das Framework für'n Ar...


----------



## mathon (10. Dez 2005)

Wenn ich das id-Attribut verwenden möchte, kommt der fehler dass dies ein invalid attribut für den text tag ist.

Der generierte Code sieht wie folgt aus:


```
<tr>
  									<td>Gew. Kreditbetrag</td>
  									<td><input type="text" name="capitalDemand" value="" style="background-color:E4EBF9">EUR</td>

  									<td></td>
  								</tr>
  								<tr>
  									<td>Laufzeit</td>
  									<td><input type="text" name="duration" value="" style="background-color:E4EBF9">Jahre</td>
  									<td></td>
  								</tr>
  								<tr>

  									<td>Tilgungsform</td>
  									<td>
  										<select name="amortization" onchange="javascript:checkAuswahl(this.options[this.selectedIndex].value);" style="background-color:E4EBF9" title="select1"><option value="Annuitaetentilgung" style="background-color:E4EBF9">Annuitaetentilgung</option>
<option value="Gesamtfaellige Tilgung" style="background-color:E4EBF9">Gesamtfaellige Tilgung</option>
<option value="Ratentilgung" style="background-color:E4EBF9">Ratentilgung</option></select>
      																
									</td>
  								</tr>
								<tr>
```


----------



## Guest (10. Dez 2005)

Die Textfelder haben doch Namen.  ???:L 
Kommt irgendeine Fehlermeldung in der Javascript-Console?

Siehe auch http://de.selfhtml.org/javascript/objekte/document.htm


----------



## mathon (10. Dez 2005)

ja da such ich bereits die ganze zeit nach irgendwas was ich verwenden könnte... :bahnhof: 

was meinst du mit fehlermeldung in der javascript console?

ich habs auch so probiert:


```
document.getElementsByTagName("html:text")[1].style.visibility = 'hidden';
```


aber das funktioniert auch nicht...


----------



## Guest (10. Dez 2005)

mathon hat gesagt.:
			
		

> ja da such ich bereits die ganze zeit nach irgendwas was ich verwenden könnte... :bahnhof:
> 
> was meinst du mit fehlermeldung in der javascript console?
> 
> ...


 :shock: Der Browser kann mit html:text nichts anfangen.

Du hast

<input type="text" name="capitalDemand" value="" style="background-color:E4EBF9">
<input type="text" name="duration" value="" style="background-color:E4EBF9">

usw.

Verwende den Namen, der unter name="..." steht. Bei den obigen Textfeldern wären es

document.getElementsByTagName("*capitalDemand*")[*0*].style.visibility = 'hidden';
oder
document.getElementsByTagName("*duration*")[*0*].style.visibility = 'hidden';


----------



## Guest (10. Dez 2005)

Ehmm, ich meinte

document.getElementsByName("capitalDemand")[0].style.visibility = 'hidden'; 
oder 
document.getElementsByName("duration")[0].style.visibility = 'hidden';


----------



## mathon (10. Dez 2005)

Halleluja es funktioniert endlich, danke! Ein Problem habe ich noch, vor dem TextFeld wird noch ein Name angezeigt:

<td>Laufzeit</td>
<td><html:text style="background-color:E4EBF9" property="duration"/>Jahre</td>


Ist es auch möglich das Laufzeit auszublenden. Kann man das irgendwie ansprechen?


----------



## Guest (10. Dez 2005)

mathon hat gesagt.:
			
		

> Halleluja es funktioniert endlich, danke! Ein Problem habe ich noch, vor dem TextFeld wird noch ein Name angezeigt:
> 
> <td>Laufzeit</td>
> <td><html:text style="background-color:E4EBF9" property="duration"/>Jahre</td>
> ...


Klar, geht nicht gibt's nicht.  
Der Text gehört zum übergeordneten Element, also dem TD-Tag.
Damit versteckst du die ganze Spalte

document.getElementsByName("whatever")[0].*parentElement*.style.visibility = "hidden";


----------



## Guest (10. Dez 2005)

Übrigens, gehe in deinem serverseitigen Code nicht davon aus, dass es
funktioniert bzw. das der Client Javascript unterstützt oder zulässt.
Das kann bei manchen Sachen mächtig ins Auge gehen, wenn der 
Anwender Javascript deaktiviert. Also Uffpasse!  :wink:


----------



## mathon (10. Dez 2005)

Hmm...die Struktur sieht so aus:


```
<tr>
  <td>Laufzeit</td>
  <td><html:text style="background-color:E4EBF9" property="duration"/>Jahre</td>
</tr>
```

Die gesamte Zeile sollte halt versteckt werden. Wenn ich das verwende:

```
document.getElementsByName("duration")[0].style.visibility = "hidden";
```

dann wird das textFeld versteckt, aber wenn ich es mit dem Ausdruck


```
document.getElementsByName("duration")[0].parentElement.style.visibility = "hidden";
```

versuche, wird nicht die gesamte Zeile versteckt. Jedoch sollte doch mit dem parentElement das tr-tag angesprochen werden oder??


----------



## Guest (10. Dez 2005)

Nein, TD ist Parent des Input-Tags. Parent von TD ist wieder TR
Textfeld in Spalte, Spalte in Zeile, Zeile in Tabelle usw.

Versuche 

document.getElementsByName("duration")[0].*parentElement.parentElement*.style.visibility = "hidden";


----------



## mathon (10. Dez 2005)

Hmm...habs gerade ausprobiert, das funktioniert aber leider nicht so richtig, mit dem doppelten parentElement. Sollte das normal funktionieren?

Ich habe es jetzt mal so definiert:


```
document.getElementsByTagName("tr")[5].style.display = 'none';
```

ist halt nicht besonders flexibel, aber es funktioniert.... :?


----------



## Guest (10. Dez 2005)

mathon hat gesagt.:
			
		

> Hmm...habs gerade ausprobiert, das funktioniert aber leider nicht so richtig, mit dem doppelten parentElement. Sollte das normal funktionieren?


Ja, es sollte funktionieren. Ich habe es gerade extra ausprobiert, um keinen Blödsinn zu schreiben.

```
<html>
<head>
<script type="text/javascript">
<!--
function dodo(selectedValue) {
  document.getElementsByName("textfeld")[0].parentElement.parentElement.style.visibility = selectedValue;
}
-->
</script>
</head>
<body>
<table>
<form>
<tr><td>BlaBla</td><td><input name="textfeld"> Bla</td></tr>
<tr><td>BlaBla</td><td><select onChange="Javascript:dodo(this.options[this.selectedIndex].value);">
<option value="visible">Visible</option>
<option value="hidden">Hidden</option>
</select></td></tr>
</form>
</table>
</body>
</html>
```



			
				mathon hat gesagt.:
			
		

> Ich habe es jetzt mal so definiert:
> 
> 
> ```
> ...


Pfuscher.  OK, wenn du es nicht mehr erweiterst, sollte es keine Probleme bereiten. 
Ich würde es aber dick kommentieren für den Fall, dass dich eine Ziegel trifft und ein 
anderer den Code weiterentwickelt.  :bae:


----------

