Archivlink: javarea.de Forum > JavaScript > Textfeld in Abhängigkeit vom Dropdown
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Textfeld in Abhängigkeit vom Dropdown
Pages: [1]
2
... nächste »
... Letzte »
| geschrieben von D2Red am 23.02.2006 - 16:48 |
moin,
Ich habe ein Problem.
Ich möcht ein Textfeld(readonly) mit einem Text befüllen(aus einber SQL Tab).
Der Text Soll Abhängig sein von der auswahl des Dropdown(Inhalt auch aus SQL Tab)
Die Dropdown klappt auch soweit aber das Textfeld füllt sich nicht.
Kann mir da einer Weirterhelfen??
MfG
D2Red |
| geschrieben von Patrick am 24.02.2006 - 09:49 |
moin,
poste mal deinen quellcode, dann kann man das evtl. anpassen.
Arbeitest du mit Java (JSP) oder PHP? Wenn PHP, dann verschiebe ich den Thread später ins PHP Forum.
cu |
| geschrieben von D2Red am 24.02.2006 - 14:57 |
moin,
| PHP-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
|
<table width="75%" border="1" align="center">
<tr>
<td><select name="Games">
<?
$res = $db->query("select distinct * from biz_produkte where produktid and katid = 2 ");
while($row=$db->fetch_array($res))
{
?>
<option value="<?=$row[produktid]?>"><?=$row[bezeichnung]?></option>
<?
}
?>
</select></td>
<td>
<?
$res = $db->query("select distinct beschreibung from biz_produkte where katid = 2 ");
while($row=$db->fetch_array($res))
{
?>
<textarea name="beschreibung" cols="50" rows="10" style="width:590;" readonly><?= $row['beschreibung']?></textarea>
<?
}
?>
</td>
</tr>
</table>
|
Im Select mane="Games" klappt auch soweit alles. Er schreibt die Bezeichnung und als Valus kommt die richtige ProduktID raus. Nur dann kommt das Problem.
Hauptsächlich verwende ich PHP aber wenn es nur mit Java geht nehm ich auch das.
MfG
D2Red |
| geschrieben von Patrick am 24.02.2006 - 17:24 |
Ich würde sagen, dass Problem liegt am readonly.
Nimm das readonly mal raus, dann sollte es funktionieren. Evtl. nimmst du einfach ein Layer um die Sache anzuzeigen, ansonsten solltest du nen kleines JavaScript nutzen, was das ändern im Feld verhindert...
Das kann dir dabei sicherlich helfen und dir nen hinweis geben: http://javarea.de/index.php3?openca....amp;id=266
Falls du weitere Probleme hast, meld dich einfach.
|
| geschrieben von D2Red am 24.02.2006 - 20:25 |
moin,
ich glaub du hast mich nicht richtig verstanden.
Ich will das sich das Textfeld automatisch mit einem Text aus einer SQL Tabelle füllt(nichtänderbar). Der Text ist aber abhängig von der auswahl in der Dropdown. Und soll sich ändern sobalt man was anderes in der dropdown angewählt wird.
MfG
D2Red |
| geschrieben von zippy am 25.02.2006 - 00:26 |
Entweder:
1.) Du holst den Text zum ausgewählten Optionspunkterl jedesmal neu vom Server. Das wär dann etwa wie "normale" Links.
2.) Du erzeugst eine Seite, in der bereits bei einem Aufruf alle Texte zu allen Optionen mitgeschickt werden. Je nachdem, was angeklixt wird, soll in der Textarea der zugehörige Text sichtbar gemacht werden, OHNE ihn neu vom Server zu holen.
Wenns so ist, dann braucht es meines Erachtens Javascript.
Zufällig hab ich grad was ähnliches in der Reiß'n, allerdings ohne Textarea. Habs dir mit radiobuttons und ohne Doctype usw. umgeschrieben. Vielleicht kannstas brauchen. Issaba brutal am Sinn von forms vorbei. Hab auch nicht ausprobiert, ob irgendein Browser oder W3C den formtag braucht, den ich mir gespart hab....
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
| <html>
<head>
<title>innerHTML-Test</title>
<script type="text/javascript">
function schreibtext (text,id)
{
for (i=1;i<=3;i++){
document.getElementById('radio'+i).checked=false;
}
document.getElementById('container').innerHTML=text;
document.getElementById(id).checked=true;
}
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif;color:#003366;margin:0px;">
<div id="formframe" style="float:left; width:200px;border:1px solid #003366;margin:10px 10px 0px 10px;">
<input type="radio" id="radio1" onClick="javascript:schreibtext(this.value,this.id);" value="Text zur ersten ausgewählten Option bla bla bla bla bla bla bla bla 1111111111 11111111111 1111111111 1111111111" />Erste Option<br/>
<input type="radio" id="radio2" onClick="javascript:schreibtext(this.value,this.id);" value="Text zur zweiten ausgewählten Option bla bla bla bla bla bla bla bla 2222222222 2222222222 2222222222 22222222"/>Zweite Option<br/>
<input type="radio" id="radio3" onClick="javascript:schreibtext(this.value,this.id);" value="Text zur dritten ausgewählten Option bla bla bla bla bla bla bla bla 333333333 33333333333 333333333 333333333 " />Dritte Option<br/>
</div>
<div id="container" style="width:400px;height:400px;border:1px solid #003366;margin:10px 10px 0px 0px;" >
Hier kommt der Text rein
</div>
</body>
</html> |
|
| geschrieben von D2Red am 26.02.2006 - 01:23 |
moin,
das sieht schon ganz gut aus. Nur muss das ganze jetzt nich auf eine SQL Tabelle zugreifen. Denn wenn ich alles per habd in die .php Datei eingeben soll dann sitz ich noch nächstes Jahr und tippe.
Ich habe mal das ganze angepasst. aber es geht dann nicht mehr. :-(
| PHP-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
|
<html>
<head>
<title>innerHTML-Test</title>
<script type="text/javascript">
function schreibtext (text,id)
{
for (i=1;i<=3;i++){
document.getElementById('radio'+i).checked=false;
}
document.getElementById('container').innerHTML=text;
document.getElementById(id).checked=true;
}
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif;color:#003366;margin:0px;">
<div id="formframe" style="float:left; width:200px;border:1px solid #003366;margin:10px 10px 0px 10px;">
<select name="Games">
<?
$res = $db->query("select distinct * from biz_produkte where produktid and katid = 2 ");
while($row=$db->fetch_array($res))
{
?>
<option type="radio" id="radio1" onClick="javascript:schreibtext(this.value,this.id);" value="<?=$row['beschreibung']?>"/><?=$row['bezeichnung']?><br/>
<?
}
?>
</select>
</div>
<div id="container" style="width:400px;height:400px;border:1px solid #003366;margin:10px 10px 0px 0px;" >
Hier kommt der Text rein
</div>
</body>
</html>
|
|
| geschrieben von zippy am 26.02.2006 - 09:33 |
Weil auch die ID immer engetragen gehört. Darf nicht in jeder Zeile id="radio1" stehen. | PHP-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
<?
$i=1;
$res = $db->query("select distinct * from biz_produkte where produktid and katid = 2 ");
while($row=$db->fetch_array($res))
{
echo "<option type=\"radio\" id=\"radio".$i."\" onClick=\"javascript:schreibtext(this.value,this.id);\" value=\"".$row['beschreibung']."\"/>".$row['bezeichnung']."<br/>";
$i++;
}
?>
|
Nachtrag:
Natürlich muss auch oben, im Javascript-Teil, der richtige Wert von "i" eingetragen werden, also gehört das Array aus der Datenbank schon VORHER ausgehoben. Wenn die DB zum Beispiel fünf Eintäge liefert, sollen ja auch alle fünf angeboten werden.
Das heißt, dass Du zB statt "echo" einen Textstring schreibst, der vorher auf "" gesetzt wurde, also etwa so:
| PHP-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
|
<?
$i=1;
$output="";
$res = $db->query("select distinct * from biz_produkte where produktid and katid = 2 ");
while($row=$db->fetch_array($res))
{
$output.= "<option type=\"radio\" id=\"radio".$i."\" onClick=\"javascript:schreibtext(this.value,this.id);\" value=\"".$row['beschreibung']."\"/>".$row['bezeichnung']."<br/>";
$i++;
}
?>
|
...ganz am Anfang, noch VOR dem html-Teil, und in der Seite dann einfach mit <? php echo $output;?> einsetzen. Im Javascript-Teil wird dann zB geschrieben:
....for (i=1;i<=<php echo $i;?>;i++) ...
an der entsprechenden Stelle.
|
| geschrieben von zippy am 26.02.2006 - 10:23 |
Die ganze Seite wäre dann etwa so (ohne Database-Awakening, welches Du natürlich noch weiter oben vollzogen haben musst):
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
| <?php
$i=0;
$output="";
$res = $db->query("select distinct * from biz_produkte where produktid and katid = 2 ");
while($row=$db->fetch_array($res))
{
$i++;
$output.= "<option type=\"radio\" id=\"radio".$i."\" onClick=\"javascript:schreibtext(this.value,this.id);\" value=\"".$row['beschreibung']."\"/>".$row['bezeichnung']."<br/>";
}
?>
<html>
<head>
<title>innerHTML-Test</title>
<script type="text/javascript">
function schreibtext (text,id)
{
for (i=1;i<=<?php echo $i;?>;i++){
document.getElementById('radio'+i).checked=false;
}
document.getElementById('container').innerHTML=text;
document.getElementById(id).checked=true;
}
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif;color:#003366;margin:0px;">
<div id="formframe" style="float:left; width:200px;border:1px solid #003366;margin:10px 10px 0px 10px;">
<select name="Games">
<?php echo $output;?>
</select>
</div>
<div id="container" style="width:400px;height:400px;border:1px solid #003366;margin:10px 10px 0px 0px;" >
Hier kommt der Text rein. Dies nicht reinschreiben, sonst steht auf jeder seite erst mal, was hier steht...<br/>:-)))
</div>
</body>
</html> |
Mit der Trennung von php-Teil und html-Teil gerät auch eine spätere Design- oder Code-Anpassung viel übersichtlicher. Selber bin ich schon vor Jahren dazu übergegangen, auch den html-Teil als String in die Datenbank zu schreiben.
Nachtrag: Hab $i nachträglich auf den Initialwert "0" gesetzt und lass es jetzt am Beginn der while-Schleife erhöhen, um zu vermeiden, dass bei leeren Produktkategorien ein Auswahlfeld angezeigt oder gar ein Fehler erzeugt wird.
|
| geschrieben von D2Red am 26.02.2006 - 14:09 |
moin,
das klappt wunderbar. Danke aber warum geht das mit dem Explorer nicht??
Edit:
Ich habe nochmal 2 Bilde rangehängt. in Pic 1 ist es über den Firefox dargestellt und in Bild 2 Über Explorer.
In Bild 1 sieht das ganze komisch aus. Und in Bild 2 sieht es zwar gut aus aber es geht nicht.
MfG
D2Red |
| geschrieben von zippy am 26.02.2006 - 14:35 |
Keine Ahnung. Gehts mit Radiobuttons? Ich weiß nämlich nicht, welche Javascript-EventHandler (=onClick und so) für die Auswahl eines Dropdown-Listenfeldes zuständig sind. Könnte sein, dass es daran liegt. Eigentlich könntest du das ganze Dropdown AUCH ohne Form-Tags verwirklichen, indem du 1.) die Form-DIV mit weiteren zwei divs füllst, von denen in der oberen bloß das ausgewählte Element steht, und in der unteren alle Artikel als Links mit dem obigen javascript als href.
2.) das Listen-DIV bei onMouseOver oder onClick auf ein Symbol sichtbar machen, und bei onMouseOut verstecken.
Wenn ich meinen Kater von gestern rausgekotzt hab, schreib ich das vielleicht in das Seitenbeispiel. Interessiert mich nämlich selber...
 |
| geschrieben von D2Red am 26.02.2006 - 14:40 |
moin,
in der ersten Version die Du gepostet hatest het er das auch schon so verzogen. |
| geschrieben von zippy am 26.02.2006 - 15:58 |
Hier zwei Beispiele ohne Forms. Das erste ist ne html, um zu zeigen, dass es funzt. Das zweite eine blind geschriebene PHP, die ich nicht testen kan, weil ich keine Produktdatenbank hab. Natürlich fehlen in diesem auch die DB-Eröffnungszeilen.
1.) html
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
| <html>
<head>
<title>innerHTML-Test</title>
<script type="text/javascript">
function schreibtext (id)
{
text=document.getElementById('text'+id).innerHTML;
document.getElementById('container').innerHTML=text;
document.getElementById('select').innerHTML=document.getElementById('link'+id).innerHTML;
}
function showit ()
{
document.getElementById('showitems').style.visibility="visible";
}
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif;color:#003366;margin:0px;">
<div id="selectframe" style="float:left; width:200px;border:1px solid #003366;margin:10px 10px 0px 10px;padding:8px;">
<div id="select" style="width:100%;font-weight:bold;margin:10px 10px 10px 10px;padding:8px;cursor ointer;" onClick="javascript:showit()">Artikel wählen</div>
<div id="showitems" style="width:100%;height:180px;border:1px solid #003366;margin:10px 0px 10px 10px;visibility:hidden;overflow-y:scroll;overflow-x:hidden;padding:8px;">
<a id="link1" href="javascript:schreibtext(1)">Item 1</a><br/>
<a id="link2" href="javascript:schreibtext(2)">Item 2</a><br/>
<a id="link3" href="javascript:schreibtext(3)">Item 3</a><br/>
</div>
</div>
<div id="container" style="width:400px;height:400px;border:1px solid #003366;margin:10px 10px 10px 0px;padding:8px;" >
Sie haben noch keinen Artikel ausgewählt
</div>
<div id="text1" style="visibility:hidden;"/>Text zur ersten ausgewählten Option bla bla bla bla bla bla bla bla 1111111111 11111111111 1111111111 1111111111 11111111111 111111111111 11111111111 1111 111111111111 111111111111 1111111111111 111111111 <div/>
<div id="text2" style="visibility:hidden;"/>Text zur zweiten ausgewählten Option bla bla bla bla bla bla bla bla 222222222222222 22222222 222222222222 222222222222 22222222222 222222222222 2222222222 2222222 22222222222 222222222 2222222222 222222222222 2222222222 2222<div/>
<div id="text3" style="visibility:hidden;"/>Text zur dritten ausgewählten Option bla bla bla bla bla bla bla bla 3333333333333333333 3333333333 33333333333 33333333333 333333333333 3333333333333 333333333333 333333333333 33333333333 333333333333 33333333333 3333333333 <div/>
</body>
</html> |
2. in PHP (Blindversuch):
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
| <?php
$i=0;
$linkliste="";
$textsammlung="";
$res = $db->query("select distinct * from biz_produkte where produktid and katid = 2 ");
while($row=$db->fetch_array($res))
{
$i++;
$linkliste.= "<a href=\"javascript:schreibtext(".$i.")\" id=\"link".$i."\" style=\"color:#003366;text-decoration:none;\">".$row['bezeichnung']."</a><br/>";
$textsammlung.="<div id=\"text".$i."\" style=\"visibility:hidden;\">".$row['beschreibung']."</div>";
}
?>
<html>
<head>
<title>innerHTML-Test</title>
<script type="text/javascript">
function schreibtext (id)
{
text=document.getElementById('text'+id).innerHTML;
document.getElementById('container').innerHTML=text;
document.getElementById('select').innerHTML=document.getElementById('link'+id).innerHTML;
}
function showit ()
{
document.getElementById('showitems').style.visibility="visible";
}
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif;color:#003366;margin:0px;">
<div id="selectframe" style="float:left; width:200px;border:1px solid #003366;margin:10px 10px 0px 10px;padding:8px;">
<div id="select" style="width:100%;font-weight:bold;margin:10px 10px 10px 10px;padding:8px;cursorointer;" onClick="javascript:showit()">Artikel wählen</div>
<div id="showitems" style="width:100%;height:180px;border:1px solid #003366;margin:10px 0px 10px 10px;visibility:hidden;overflow-y:scroll;overflow-x:hidden;padding:8px;">
<?php echo $linkliste;?>
</div>
</div>
<div id="container" style="width:400px;height:400px;border:1px solid #003366;margin:10px 10px 10px 0px;padding:8px;" >
Sie haben noch keinen Artikel ausgewählt
</div>
<?php echo $textsammlung;?>
</body>
</html> |
|
| geschrieben von D2Red am 26.02.2006 - 16:05 |
moin,
kann die Dateien nicht anhängen(bringt immer fehler) habe sie dir per PN geschickt |
| geschrieben von zippy am 26.02.2006 - 16:15 |
Geht die htm auch nicht? Natürlich können in der php Fehler sein. Bei diesem Zustand...
Die Dateien krieg ich auch nicht per PM, wahrscheinlich sind sie zu lang. Hab aber in der PHP oben einen schweren Fehler entdeckt und ausgebessert. (id statt $i im php-Teil).
Probier sie also nochmal, neu reinkopiern und so.
NOCH ein Nachtrag: Hab schon wieder Fehler ausgbessert. Die PHP oben also wieder neu versuchen. Diesmal warens falsch maskierte Apostrophe...
Und NOCH mal. Schon wieder falsch maskiert...
NOCH ne Änderung. Diesmal der Zeilenvorschub bei den Links... |
|