✔ Bildanzeige in Abhängigkeit einer Auswahlliste

ByeBye 246039 · 23. März 2011

Hallo liebe Programmierer,

ich hoffe, mir kann jemand von euch einen Tipp oder einen Hinweis geben, wie ich folgendes realisieren könnte:

In einem Formular befindet sich eine Select-Liste mit Produkten. In der Liste kann man mehrere Produkte selectieren. Rechts daneben soll ein entsprechendes Bild das zuletzt angeklickte Produkt zeigen. Wie realisieren ich das Ereignis onchange bzw. wie könnte ich das anders umsetzen?

Ich würde das gern mit PHP programmieren, da ich in der Datei das gesamte Formular bereits mit PHP überprüfe und verarbeite.

Lieben Dank für Eure Hilfe.
Viele Grüße, SuLeu

Hier mein bisheriger Code:

Code:

<div id="kontakt">
                <!--Kontaktformular Anfang-->
                <form action="" method="POST">
                  <div id="kontaktform"><?php echo $fehlertext;?><?php echo $verschickt;?>
                        <h1>Bestellanfrage</h1>
                        <select name="produkt[]" size="10" multiple="multiple" onchange="****?">
                        	<optgroup label="Terrassendielen">
                                <option value="812091" selected="selected">Coffee, für ca. 5 m²</option>
                                <option value="812101">Coffee, für ca. 16 m²</option>
                                <option value="812098">Dark Grey, für ca. 14 m²</option>
                                <option value="812102">Dark Grey, für ca. 16 m²</option>
                                <option value="812090">Cedar, für ca. 5 m²</option>
                                <option value="812100">Cedar, für ca. 16 m²</option>
                            </optgroup>
                            <optgroup label="Terrassenfliesen">
                                <option value="HS-30-S-30-1">Coffee, HS-30-S-30-1</option>
                                <option value="HS-30-S-30-2">Coffee, HS-30-S-30-2</option>
                                <option value="HS-30-S-30-3">Coffee, HS-30-S-30-3</option>
                                <option value="HS-30-S-30-4">Coffee, HS-30-S-30-4</option>
                                <option value="HS-30-S-30-5">Coffee, HS-30-S-30-5</option>
                                <option value="HS-30-S-30-6">Coffee, HS-30-S-30-6</option>
                                <option value="HS-30-S-30-7">Coffee, HS-30-S-30-7</option>
                                <option value="HS-30-S-30-8">Coffee, HS-30-S-30-8</option>
                                <option value="HS-30-S-30-9">Coffee, HS-30-S-30-9</option>
                                ...
                            </optgroup>
                        </select><img name="produktbild" src="<?php echo "../images/products/".$produkt;?>" /><br />
                        <p>&nbsp;</p>
                        <div style="float:left; margin-right:30px;">
                        	<p>Ihre Adressdaten</p>
                            <input type="text" name="name" value="<?php echo $name;?>" size="26" <?php echo $namestyle; ?> /><br />
                            <input type="text" name="strasse" value="<?php echo $strasse;?>" size="26" <?php echo $strassestyle; ?> /><br />
                            <input type="text" name="plz" value="<?php echo $plz;?>" size="26" <?php echo $plzstyle; ?> /><br />
                            <input type="text" name="ort" value="<?php echo $ort;?>" size="26" <?php echo $ortstyle; ?> /><br />
                            <input type="text" name="email" value="<?php echo $email;?>" size="26" <?php echo $emailstyle; ?> /><br />
                        </div>
                        <div>
                        	<p>Lieferadresse - falls abweichend</p>
                        	<input type="text" name="lname" value="<?php echo $lname;?>" size="26" <?php echo $lnamestyle; ?> /><br />
                            <input type="text" name="lstrasse" value="<?php echo $lstrasse;?>" size="26" <?php echo $lstrassestyle; ?> /><br />
                            <input type="text" name="lplz" value="<?php echo $lplz;?>" size="26" <?php echo $lplzstyle; ?> /><br />
                            <input type="text" name="lort" value="<?php echo $lort;?>" size="26" <?php echo $lortstyle; ?> /><br />
                            <input type="text" name="lemail" value="<?php echo $lemail;?>" size="26" <?php echo $lemailstyle; ?> /><br />
                        </div>
                        <textarea name="text" cols="60" rows="4" <?php echo $textstyle; ?>><?php echo $text;?></textarea><br />
                        <div><button name="absenden" type="submit" value="absenden" style="border:none; background:none;">absenden
                        <img src="../images/absendebutton.png" alt="an BLS-cleanservice senden" width="35" height="35" align="middle" /></button></div>
                  </div>
                </form>
                <!-- Kontaktformular Ende -->
         </div>

Yaslaw · 23. März 2011

Um Javascript kommst du nicht umhin, da PHP nur Serverseitig funktioniert.

Es gibt eine Kombination mit Javascript und PHP. Dieses Kombination nennt sich AJAX. Das lohnt sich hier aber nicht wirklich.

Wenn du Javascript für die Interaktion der Bilder verwendest, heisst das nicht, dass die Seite nicht mit PHP aufgebaut werden kann.

Da ich selber mit Javscript nicht so bewandert bin, verschiebe ich den Thread mal ins Javascript-Forum. Dort kann dir eher geholfen werden

ByeBye 246039 · 24. März 2011

Liebe Comunity,

mit JavaScript habe ich es schon mal versucht, aber ich bin darin nicht so fitt und habe es nicht geschafft. Kann mir jemand helfen?

Ich habe es nun so probiert. Das ist mein JavaScript im Headbereich:

Code:

<script type="text/javascript">
	function Bildwechsel(x){
		document.form.produktbild.src = "../images/products/" + x;
	}
</script>

Und das habe ich in meinem Formular geändert:

Code:

<form action="" method="POST">
                  <div id="kontaktform"><?php echo $fehlertext;?><?php echo $verschickt;?>
                        <h1>Bestellanfrage</h1>
                        <select name="produkt[]" size="10" multiple="multiple" onchange="Bildwechsel(this.form.produkt.options[this.form.produkt.options.selectedIndex].value)">
                        	<optgroup label="Terrassendielen">
                                <option value="812091" selected="selected">Coffee, für ca. 5 m²</option>
                                <option value="812101">Coffee, für ca. 16 m²</option>
                                <option value="812092">Dark Grey, für ca. 5 m²</option>
                                <option value="812102">Dark Grey, für ca. 16 m²</option>
                                <option value="812090">Cedar, für ca. 5 m²</option>
                                <option value="812100">Cedar, für ca. 16 m²</option>
                            </optgroup>
                            <optgroup label="Terrassenfliesen">
                                <option value="HS-30-S-30-1">Coffee, HS-30-S-30-1</option>
                                <option value="HS-30-S-30-2">Coffee, HS-30-S-30-2</option>
                                <option value="HS-30-S-30-3">Coffee, HS-30-S-30-3</option>
                                <option value="HS-30-S-30-4">Coffee, HS-30-S-30-4</option>
                                <option value="HS-30-S-30-5">Coffee, HS-30-S-30-5</option>
                                <option value="HS-30-S-30-6">Coffee, HS-30-S-30-6</option>
                                <option value="HS-30-S-30-7">Coffee, HS-30-S-30-7</option>
                                <option value="HS-30-S-30-8">Coffee, HS-30-S-30-8</option>
                                <option value="HS-30-S-30-9">Coffee, HS-30-S-30-9</option>
                                ...
                            </optgroup>
                        </select><img name="produktbild" src="" /><br />
                        <p>&nbsp;</p>
                        <div style="float:left; margin-right:30px;">
                        	<p>Ihre Adressdaten</p>
                            <input type="text" name="name" value="<?php echo $name;?>" size="26" <?php echo $namestyle; ?> /><br />
                            <input type="text" name="strasse" value="<?php echo $strasse;?>" size="26" <?php echo $strassestyle; ?> /><br />
                            <input type="text" name="plz" value="<?php echo $plz;?>" size="26" <?php echo $plzstyle; ?> /><br />
                            <input type="text" name="ort" value="<?php echo $ort;?>" size="26" <?php echo $ortstyle; ?> /><br />
                            <input type="text" name="email" value="<?php echo $email;?>" size="26" <?php echo $emailstyle; ?> /><br />
                        </div>
                        <div>
                        	<p>Lieferadresse - falls abweichend</p>
                        	<input type="text" name="lname" value="<?php echo $lname;?>" size="26" <?php echo $lnamestyle; ?> /><br />
                            <input type="text" name="lstrasse" value="<?php echo $lstrasse;?>" size="26" <?php echo $lstrassestyle; ?> /><br />
                            <input type="text" name="lplz" value="<?php echo $lplz;?>" size="26" <?php echo $lplzstyle; ?> /><br />
                            <input type="text" name="lort" value="<?php echo $lort;?>" size="26" <?php echo $lortstyle; ?> /><br />
                            <input type="text" name="lemail" value="<?php echo $lemail;?>" size="26" <?php echo $lemailstyle; ?> /><br />
                        </div>
                        <textarea name="text" cols="60" rows="4" <?php echo $textstyle; ?>><?php echo $text;?></textarea><br />
                        <div><button name="absenden" type="submit" value="absenden" style="border:none; background:none;">absenden
                        <img src="../images/absendebutton.png" alt="an BLS-cleanservice senden" width="35" height="35" align="middle" /></button></div>
                  </div>
                </form>

Mir ist aufgefallen, dass das Select-Element produkt[] heißt und es damit Probleme gibt. Ich benötige aber diesen Namen, da bei Mehrfachauswahl alles in ein array gespeichert werden soll (PHP). Aber leider funktioniert es auch ohne den [] Klammern nicht!

Was mache ich falsch?

Liebe Grüße
SuLeu

tombe · 24. März 2011

Hi,

ich habe dein Beispiel mal zum Testen ein bisschen verändert. Beim Auswählen eines Eintrags werden alle in der Liste enthaltenen Einträge kontrolliert ob sie markiert sind oder nicht.
Immer der letzte markiete Eintrag wird an die Variable "X" übergeben und diese zum Schluss ausgegeben.

Denke mal das so funktioniert.

HTML:

<script type="text/javascript">
    function Bildwechsel(x){
    for (a = 0; a < document.getElementById("produkt").length; a++) {
		if (document.getElementById("produkt")[a].selected == true) {
			x = document.getElementById("produkt")[a].value;
		}

    }

    alert(x);
    }
</script>


<form name="formular">
<select name="produkt[]" size="10" multiple="multiple" id="produkt" onchange="Bildwechsel();">
	<optgroup label="Terrassendielen">
            <option value="812091" selected="selected">Coffee, für ca. 5 m²</option>
            <option value="812101">Coffee, für ca. 16 m²</option>
            <option value="812098">Dark Grey, für ca. 14 m²</option>
            <option value="812102">Dark Grey, für ca. 16 m²</option>
            <option value="812090">Cedar, für ca. 5 m²</option>
            <option value="812100">Cedar, für ca. 16 m²</option>
        </optgroup>
        <optgroup label="Terrassenfliesen">
            <option value="HS-30-S-30-1">Coffee, HS-30-S-30-1</option>
            <option value="HS-30-S-30-2">Coffee, HS-30-S-30-2</option>
            <option value="HS-30-S-30-3">Coffee, HS-30-S-30-3</option>
            <option value="HS-30-S-30-4">Coffee, HS-30-S-30-4</option>
            <option value="HS-30-S-30-5">Coffee, HS-30-S-30-5</option>
            <option value="HS-30-S-30-6">Coffee, HS-30-S-30-6</option>
            <option value="HS-30-S-30-7">Coffee, HS-30-S-30-7</option>
            <option value="HS-30-S-30-8">Coffee, HS-30-S-30-8</option>
            <option value="HS-30-S-30-9">Coffee, HS-30-S-30-9</option>
		</optgroup>
</select>
</form>

ByeBye 246039 · 24. März 2011

Hallo tombe,

vielen lieben Dank für das Script. Das funktioniert super. Ist nun nur noch die Frage, wie ich das alert(x) in das Bild bekomme. Sorry für meine Unkenntniss.

Liebe Grüße
SuLeu

tombe · 24. März 2011

Wie wird der Name des Bilder überhaupt gebildet?

Irgendwie wird wohl "X" die Artikelnummer und die steht dann wohl für den Namen des Bildes!?

ByeBye 246039 · 24. März 2011

ja, der Pfad kann so aussehen:

Code:

<img src="../images/x.jpg">

tombe · 24. März 2011

Also innerhalb der Seite gibt es folgendes Bild:

HTML:

<input type="image" name="bild" id="bild" src="" width="200"/>

und die JS-Funktion wurde so geändert:

HTML:

<script type="text/javascript">
    function Bildwechsel(x){
    for (a = 0; a < document.getElementById("produkt").length; a++) {
		if (document.getElementById("produkt")[a].selected == true) {
			x = document.getElementById("produkt")[a].value;
		}

    }
// diese 2 Zeile sind neu bzw. geändert
    x = "images/" + x + ".jpg";
    document.getElementById("bild").src = x;
    }
</script>

Damit es klappt, muss in der Liste immer der Dateiname (hier ohne Dateiendung) angegeben sein.
Wenn Dateien mit verschiedenen Endungen (GIF, JPG, PNG) und/oder Pfaden verwendet werden sollen, dann gibt den kompletten Dateinamen in der Value Eigenschaft der Liste an.

HTML:

<!-- entweder so ohne Endung und Pfad -->
<option value="812091" selected="selected">Coffee, für ca. 5 m²</option>
<option value="812101">Coffee, für ca. 16 m²</option>
<option value="812098">Dark Grey, für ca. 14 m²</option>
<!-- oder so mit komplettem Pfad und Dateiendung -->
<option value="images/812102.png">Dark Grey, für ca. 16 m²</option>
<option value="images/812090.png">Cedar, für ca. 5 m²</option>
<option value="images/812100.jpg">Cedar, für ca. 16 m²</option>

In der Funktion reicht dann:

HTML:

// diese Zeile brauchst du dann nicht mehr
x = "images/" + x + ".jpg";
// es klappt dann so
document.getElementById("bild").src = x;

ByeBye 246039 · 25. März 2011

Vielen lieben Dank, tombe. Das funktioniert super. JavaScript zu entwickeln ist nicht ganz so meins. Alleine hätte ich das nie hinbekommen.

LG SuLeu

tombe · 28. März 2011

Auch wenn du mit der obigen Lösung zufrieden warst (zumindest bis jetzt), da war noch ein Fehler drin der mir nicht gefallen hat.

Folgende Liste:
- Eintrag 1
- Eintrag 2
- Eintrag 3
- Eintrag 4
- Eintrag 5

Wenn du jetzt als erstes Eintrag 5 markierst und dann 3 und 1, dann wird immer nur das Bild von Eintrag 5 angezeigt weil es der letzte gewählte Eintrag in der Liste ist. Es wird aber nicht der "zeitlich" zuletzt gewählte Eintrag angezeigt.
Die obige Lösung ist auch nicht immer korrekt wenn ein bereits markierter Eintrag wieder abgewählt wird.

Bei dieser Lösung hier werden die Bilder wirklich in der Reihenfolge angezeigt in der sie in der Liste ausgewählt wurden. Man kann auswählen, abwählen, die Auswahl neu beginnen ganz wie man will:

HTML:

<script type="text/javascript">

var eintrag = new Array();

function Bildwechsel(){
var vorhanden = false;
var markiert = 0;

// ermitteln wieviele Einträge in der Liste markiert sind
for (a = 0; a < document.getElementById("produkt").length; a++) {
	if (document.getElementById("produkt")[a].selected == true) markiert++;
}

// wenn nur 1 Eintrag markiert ist, muss Array komplet neu gebildet werden
if (markiert == 1) {
	eintrag = [];
	eintrag[0] = document.getElementById("produkt").selectedIndex;
// wenn mehr Einträge markiert sind als im Array (neuer Eintrag wurde markiert)
} else if (markiert > eintrag.length) {
	for (a = 0; a < document.getElementById("produkt").length; a++) {
		if (document.getElementById("produkt")[a].selected == true) {
			for (b = 0; b < eintrag.length; b++) {
				if (eintrag[b] == a) {
					vorhanden = true;
					b = eintrag.length;
				}
			}
			if (vorhanden == false) eintrag[eintrag.length] = a;
			vorhanden = false;
		}
	}
// wenn weniger Einträge markiert sind als im Array (Eintrag wurde abgewählt)
} else if (markiert < eintrag.length) {
	for (a = 0; a < eintrag.length; a++) {
		for (b = 0; b < document.getElementById("produkt").length; b++) {
			if (eintrag[a] == b) {
				if (document.getElementById("produkt")[b].selected == false) vorhanden = true;
			}
		}
		if (vorhanden == true) {
			eintrag = eintrag.slice(0, a).concat(eintrag.slice(a + 1));
			a = eintrag.length;
		}
	}
}
// der letzte Eintrag im Array ist der (zeitlich !!) zuletzt ausgewählte
document.getElementById("bild").src = document.getElementById("produkt")[eintrag[eintrag.length - 1]].value;
}

</script>

<form name="formular">
<select name="produkt[]" size="10" multiple="multiple" id="produkt" onchange="Bildwechsel();">
        <option value="images/812091.jpg">Coffee, für ca. 5 m</option>
        <option value="images/812101.jpg">Coffee, für ca. 16 m</option>
        <option value="images/812098.jpg">Dark Grey, für ca. 14 m</option>
        <option value="images/812102.jpg">Dark Grey, für ca. 16 m</option>
        <option value="images/812090.jpg">Cedar, für ca. 5 m</option>
</select>
</form>
<input type="image" name="bild" id="bild" src="" width="200"/>

So jetzt bin ich auch zufrieden

✔ Bildanzeige in Abhängigkeit einer Auswahlliste

ByeBye 246039

Yaslaw

alter Rempler

ByeBye 246039

tombe

Erfahrenes Mitglied

ByeBye 246039

tombe

Erfahrenes Mitglied

ByeBye 246039

tombe

Erfahrenes Mitglied

ByeBye 246039

tombe

Erfahrenes Mitglied

Neue Beiträge