JSP-Site textfeld dynamisch hinzufügen

Status
Nicht offen für weitere Antworten.
M

mathon

Bekanntes Mitglied
Hallo,

Ich habe eine JSP-Site mit einer Dropdownlist (mit html:select und html:eek:ptions) 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
 
G

Guest

Gast
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.
 
M

mathon

Bekanntes Mitglied
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:

Code: 
<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..?
 
G

Guest

Gast
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
Code: 
// 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" />
 
M

mathon

Bekanntes Mitglied
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
 
G

Guest

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

mathon

Bekanntes Mitglied
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
 
G

Guest

Gast
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.
 
M

mathon

Bekanntes Mitglied
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...??:(
 
G

Guest

Gast
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... :D
 
M

mathon

Bekanntes Mitglied
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:

Code: 
<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>
 
M

mathon

Bekanntes Mitglied
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:

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


aber das funktioniert auch nicht...:(:(
 
G

Guest

Gast
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?

ich habs auch so probiert:

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


aber das funktioniert auch nicht...:(:(
Zum Vergrößern anklicken....
: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';
 
G

Guest

Gast
Ehmm, ich meinte

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

mathon

Bekanntes Mitglied
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?
 
G

Guest

Gast
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>


Ist es auch möglich das Laufzeit auszublenden. Kann man das irgendwie ansprechen?
Zum Vergrößern anklicken....
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";
 
G

Guest

Gast
Ü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:
 
M

mathon

Bekanntes Mitglied
Hmm...die Struktur sieht so aus:

Code: 
<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:
Code: 
document.getElementsByName("duration")[0].style.visibility = "hidden";

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

Code: 
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??:(
 
G

Guest

Gast
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";
 
M

mathon

Bekanntes Mitglied
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:

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

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

Guest

Gast
mathon hat gesagt.:
Hmm...habs gerade ausprobiert, das funktioniert aber leider nicht so richtig, mit dem doppelten parentElement. Sollte das normal funktionieren?
Zum Vergrößern anklicken....
Ja, es sollte funktionieren. Ich habe es gerade extra ausprobiert, um keinen Blödsinn zu schreiben.
Code: 
<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:

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

ist halt nicht besonders flexibel, aber es funktioniert.... :?
Zum Vergrößern anklicken....
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:
 
Status
Nicht offen für weitere Antworten.
Ähnliche Java Themen
  Titel Forum Antworten Datum
M Struts - jsp site - werte formatieren Allgemeines EE 6
R JSP-Site drucken Allgemeines EE 4
R HTML CODE EINER SITE AUSLESEN Allgemeines EE 2
OnDemand JSF Primefaces Textfeld-Werte speichern Allgemeines EE 1
S Button kleiner als Textfeld mit gleicher Höhe Allgemeines EE 8
P String in ein Textfeld einer externen Seite uebergeben ! Allgemeines EE 2
J Struts Textfeld Allgemeines EE 10
M Textfeld und Eingabe holen? Allgemeines EE 1
R Mehrere Bilder gleichzeitig bzw. dynamisch eines Objektes speichern Allgemeines EE 2
W JBoss 6 - SocketTimeout dynamisch setzen Allgemeines EE 2
A JMS: Mehrere Durable Subscriber dynamisch zur Laufzeit erzeugen - setClientID() Allgemeines EE 2
H Class Instanzen Dynamisch erzeugen Allgemeines EE 2
M Checkboxes dynamisch erstellen Allgemeines EE 8
P Einem eingeloggtem Benutzer Rollen dynamisch zuweisen Allgemeines EE 5
M jsp include page - angabe dynamisch Allgemeines EE 10
Y InputTextArea - Attribut Rows dynamisch befüllen Allgemeines EE 2
N Menu dynamisch erstellen Allgemeines EE 3
O JSP dynamisch aus einem objekt heraus erstellen Allgemeines EE 7
B input dynamisch füllen Allgemeines EE 3
J Formularfelder dynamisch erzeugen Allgemeines EE 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben