Forum für CMS/made simple

jeff1980

Server-Pate

Ort: Dortmund

Registriert: 26. November 2010

Beiträge: 630

[GELÖST] Formbuilder, Select und Javascript "onChange"

Hallo,

wieder einmal hänge ich - wahrscheinlich bei einer Kleinigkeit.
Mein Ziel:
In einem Formular (erstellt mit dem Formbuilder) möchte ich je nach ausgewähltem Wert in einem Ausklappmenü ein entsprechendes Bild darunter anzeigen lassen. Grundsätzlich habe ich es auch so weit, dass die "src" ausgetauscht wird. Allerdings nutzt der Formbuilder automatisch als Value 1, 2, 3 usw. und nicht das, was ich im jeweiligen Feld "Übermittelter Wert" eingegeben habe - und somit habe ich als "src" immer nur 1, 2 oder 3.

Das ist das Grundgerüst in HTML:

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<form>
<select name="Farbwaehler" onChange="Bildladen(this.options[this.selectedIndex].value);" size="1">
 <option value="1">Bild 1</option>
 <option value="2">Bild 2</option>
 <option value="3">Bild 3</option>
 <option value="4">Bild 4</option>
</select>
</form>
<img id="mockup" src="" />

<script>
<!--
function Bildladen(Bild)
{
	document.getElementById("mockup").src = Bild;
    return true;
}
//-->
</script>

Gibt es da jetzt eine Möglichkeit, im Javascript-Teil den einzelnen Values eine entsprechende URL zuzuordnen?

Ich habs schon mit "var 1 = url_zum_bild.jpg" versucht, wüsste aber nicht, wie ich das jetzt in die src kriege.
Ich hoffe, ihr verstehen, was ich meine ... ;-)

jeff1980

Server-Pate

Ort: Dortmund

Registriert: 26. November 2010

Beiträge: 630

Re: [GELÖST] Formbuilder, Select und Javascript "onChange"

So schwer ist Javascript ja gar nicht

Hab noch etwas recherchiert und dabei herausgekommen ist das hier:

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]

<form>
<select name="Farbwaehler" onChange="Bildladen(this.options[this.selectedIndex].value);" size="1">
 <option value="1">Bild 1</option>
 <option value="2">Bild 2</option>
 <option value="3">Bild 3</option>
 <option value="4">Bild 4</option>
</select>
</form>
<img id="mockup" src="" />

<script>
<!--
function Bildladen(Bild)
{
	if (Bild==1) {
		Bild = "1.jpg";
	} else if (Bild==2) {
		Bild = "2.jpg";
	} else if (Bild==3) {
		Bild = "3.jpg";
	} else if (Bild==4) {
		Bild = "4.jpg";
	}
	document.getElementById("mockup").src = Bild;
    return true;
}
//-->
</script>

Das geht sicher noch einfacher/effektiver - aber egal, es macht, was es soll.

nicmare

Server-Pate

Registriert: 15. Dezember 2010

Beiträge: 1.314

Webseite

Re: [GELÖST] Formbuilder, Select und Javascript "onChange"

 Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]

<form>
<select name="Farbwaehler" onChange="Bildladen(this.options[this.selectedIndex].value);" size="1">
 <option value="1">Bild 1</option>
 <option value="2">Bild 2</option>
 <option value="3">Bild 3</option>
 <option value="4">Bild 4</option>
</select>
</form>
<img id="mockup" src="" />

<script>
<!--
function Bildladen(Bild)
{
	document.getElementById("mockup").src = Bild + ".jpg";
    return true;
}
//-->
</script>

hätte gereicht ;-)

---

Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras

jeff1980

Server-Pate

Ort: Dortmund

Registriert: 26. November 2010

Beiträge: 630

Re: [GELÖST] Formbuilder, Select und Javascript "onChange"

Ach, logisch - bei dem Bespiel von mir ja. Das war aber nur der Test-Code.
Die Bilder liegen natürlich im images-Ordner von CMSms und heißen auch nicht 1, 2 usw.:

 Hier klicken, um den Code zum Kopieren zu markieren

[== javascript ==]
<script type=text/javascript>
<!--
function Bildladen(Bild)
{
	if (Bild==1) {
		Bild = "uploads/images/mockup_schmetterling.png";
	} else if (Bild==2) {
		Bild = "uploads/images/mockup_blume.png";
	} else if (Bild==3) {
		Bild = "uploads/images/mockup_geschenk.png";
	} else if (Bild==4) {
		Bild = "uploads/images/mockup_gluehbluete.png";
	}
	document.getElementById("mockup").src = Bild;
    return true;
}
//-->
</script>

Das ist der Code, den ich nutze.
Aber trotzdem ein guter Hinweis mit dem "+ ".jpg"" - ich glaube, ich möchte mich mal mehr mit Javascript beschäftigen, damit ich nicht immer alles neu zusammen suchen muss ...

nicmare

Server-Pate

Registriert: 15. Dezember 2010

Beiträge: 1.314

Webseite

Re: [GELÖST] Formbuilder, Select und Javascript "onChange"

ich würde ja diese methode bevorzugen ;-)

 Hier klicken, um den Code zum Kopieren zu markieren

<form>
<select name="Farbwaehler" onChange="Bildladen(this.options[this.selectedIndex].text);" size="1">
 <option value="1">schmetterling</option>
 <option value="2">blume</option>
 <option value="3">geschenk</option>
 <option value="4">gluehbluete</option>
</select>
</form>
<img id="mockup" src="" />

<script>
<!--
function Bildladen(Bild)
{
	document.getElementById("mockup").src = "mockup_" + Bild + ".png";
    return true;
}
//-->
</script>

also Bildladen(this.options[this.selectedIndex].text);

---

Meine Projekte:
Dashcam-Test | Babyphone-Testberichte | Türspionkameras

jeff1980

Server-Pate

Ort: Dortmund

Registriert: 26. November 2010

Beiträge: 630

Re: [GELÖST] Formbuilder, Select und Javascript "onChange"

Gut zu wissen, dass das auch geht - sieht dann allerdings für den Nutzer nicht mehr so schön aus ...
Eigentlich schade, dass beim Formbuilder nicht die Werte aus dem Feld "Übermittelter Wert" übernommen werden - eigentlich lässt doch die Bezeichnung genau darauf schließen, oder?

NaN

Moderator

Ort: Halle (Saale)

Registriert: 09. November 2010

Beiträge: 4.437

Re: [GELÖST] Formbuilder, Select und Javascript "onChange"

Eigentlich schade, dass beim Formbuilder nicht die Werte aus dem Feld "Übermittelter Wert" übernommen werden

Ist leider ein Fehler im FormBuilder.

---

Module: GBFilePicker, AdvancedContent
Sicherheit: Beispiel .htaccess-Datei
CMSms 1.12 unter PHP 7:
cmsms-1.12.3.zip (inoffiziell - komplett inkl. Installer)
CMSms 1.12 unter PHP 8:
cmsms-1.12.4.zip (inoffiziell - komplett inkl. Installer)