• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[SCRIPTSUCHE] Hilfe bei Formularauswertung

S

sandokai

New member
Ich arbeite eigentlich nur mit HTML, brauche jedoch zur Auswertung von Formulareingaben ein Java-Script.
Ich habe verschiedene Formularfelder mit mehreren auswählbaren Werten. Ich möchte, dass das externe Java-Script bei einer bestimmten Konstellation der Werte eine vordefinierte Seite öffnet.

HTML-Script:

HTML-Code:

HTML: 
<form method="get">
 <select name="Marke">
  <option value="m1">VW</option>
  <option value="m2">Audi</option>
  <option value="m3">Porsche</option>
 </select>
 <select name="Farbe">
  <option value="f1">gelb</option>
  <option value="f2">blau</option>
  <option value="f3">rot/option>
 </select>
<input type="submit" name="submit" value="Konfiguration anzeigen" />
</form>

Ich möchte nun, dass beim Klicken (onclick) des Submit-Buttons die in den Selectfeldern ausgewählten Werte eine vordefinierte Seite öffnen, z.B. Wert-Kombination (VW+gelb) eine Internetseite xy und bei der Wert-Kombination (Audi + blau) die Internetseite yz. Kann man dies über ein Java-Script umsetzen?

Ich habe mich an "onclick" und "if"-Bedingungen gewagt. Oder muss ich mit "Arrays" arbeiten?

Vielen Dank für eure Hilfe!
 
Zuletzt bearbeitet von einem Moderator:
Das Formular soll also nicht zum Server geschickt werden?

Mit Selfhtml...onsubmit kannst du das Senden des Formulares verhindern.
Dann musst du natürlich die URL anhand irgendwelcher Werte, die in den option-Tags gespeichert sind zusammenbauen, einfach mal hier lesen: Selfhtml...elements: Allgemeines zur Verwendung etc...
Letztendlich dem Browser noch die neue URL mittels Selfhtml...location.href mitteilen und das wars.

PS: Bitte verwende für Code-Abschnitte die
Code: 
-Tags.
 
Warum gibst du nicht einfach jedem <option> gleich ein passendes value? Dadurch sparst du dir dann nämlich irgendwelche if-Abfragen:
HTML: 
<!doctype html>
<html>
 <head>

  <meta charset="UTF-8">

  <title>Fenstertitel</title>

  <script>
  function baueZusammen(){
    var marke = document.getElementById("Marke").value;
    var farbe = document.getElementById("Farbe").value;
    window.location.href = "http://www." + farbe + marke + ".de";
  }
  </script>
 </head>
 <body>
  <select id="Marke">
    <option value="vw">VW</option>
    <option value="audi">Audi</option>
    <option value="porsche">Porsche</option>
  </select>
  <select name="Farbe">
    <option value="gelber">gelb</option>
    <option value="blauer">blau</option>
    <option value="roter">rot/option>
  </select>
  <input type="submit" name="submit" value="Konfiguration anzeigen" onclick="baueZusammen()">
 </body>
</html>
Auch wenn sich mir der Sinn dieses URL-Zusammenbauens nicht so ganz erschließt...
 
Zuerst mal danke für die Antworten!
@Julian, du hast im doppelten Sinne recht. 1) Dem Value sollte ich wirklich einen eindeutigen Wert zuweisen. 2) URL-Zusammenbauen: war auch nicht so gemeint.

Beispiel: Im Select-Feld Marke wird "Audi" ausgewählt und im Select-Feld "Farbe" rot. Dann soll eine vordefinierte Seite geöffnet werden, z.B. [URL von Mod entfernt].
Beispiel: Im Select-Feld Marke wird "Audi" ausgewählt und im Select-Feld "Farbe" gelb. Dann soll eine vordefinierte Seite geöffnet werden, z.B. [URL von Mod entfernt.]

Dann muss ich doch mit "if"-Arbeiten oder? Keine Ahnung wie es muss (laienhaft): if this.form.marke.value!="audi" && this.form.farbe.value!="rot"; open.window([URL von Mod entfernt.]/xxy.htm'),
aber wenn nicht, dann prüfe andere if-Funktion so lange, bis du die gültige findest.
 
Zuletzt bearbeitet von einem Moderator:
Oder per Fallunterscheidung mit Selfhtml...switch
Code: 
switch (marke) {
	case 'vw':
		switch (farbe) {
			case 'gelb':
				location.href = '';
				break;
			case 'blau':
				location.href = '';
				break;
				location.href = '';
			case 'rot':
				break;
		}
		break;
	case 'audi':
		switch (farbe) {
			case 'gelb':
				location.href = [Link von Mod entfernt];
				break;
			case 'blau':
				location.href = '';
				break;
			case 'rot':
				location.href = [Link von Mod entfernt];
				break;
		}
		break;
	case 'porsche':
		switch (farbe) {
			case 'gelb':
				location.href = '';
				break;
			case 'blau':
				location.href = '';
				break;
			case 'rot':
				location.href = '';
				break;
		}
		break;
}

Du musst dir halt Gedanken über eine Logik bzw. logische Verknüpfung machen...
 
Zuletzt bearbeitet von einem Moderator:
sandokai, um eine Frage zu JS zu stellen braucht man nicht dauernd irgendwelche externen Links zu schreiben. Wir dulden hier keine Schleichwerbung! Hab die Links entfernt und bitte dich, drauf zu achten.
 
sandokai schrieb:
Ich habe mich an "onclick" und "if"-Bedingungen gewagt. Oder muss ich mit "Arrays" arbeiten?
Zum Vergrößern anklicken....
Zeig doch erst mal, was du versucht hast. Bzw.: Dann probier's doch einfach aus!
PS: verwende für Beispiellinks bitte keine echten Internetseiten! Dafür gibt es extra die Domain http://example.com...
 
sandokai schrieb:
"if"-Bedingungen gewagt. Oder muss ich mit "Arrays" arbeiten?
Zum Vergrößern anklicken....
Weder noch:
Code: 
<!doctype html>
<html>
 <head>
  <title>Fenstertitel</title>
  <script>
  function baueZusammen(marke, farbe){
  	var mapping = {
  		vw: {
  			gelb: "xy.html",
  			blau: "xx.html",
  			rot: "yy.html"
  		},
  		audi: {
  			gelb: "zxy.html",
  			blau: "zxx.html",
  			rot: "zyy.html"
  		},
  		porsche: {
  			gelb: "wxy.html",
  			blau: "wxx.html",
  			rot: "wyy.html"
  		}
  	};
  	window.location.href = mapping[marke][farbe];
  }
  </script>
 </head>
 <body>
  <select id="Marke">
    <option value="vw">VW</option>
    <option value="audi">Audi</option>
    <option value="porsche">Porsche</option>
  </select>
  <select id="Farbe">
    <option value="gelb">gelb</option>
    <option value="blau">blau</option>
    <option value="rot">rot/option>
  </select>
  <input value="Konfiguration anzeigen" onclick="baueZusammen(document.getElementById('Marke').value, document.getElementById('Farbe').value)">
 </body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben