[PHP][JS] Problem mit Select-Box

[Akila]

Hallo zusamen.

Ich erstelle gerade eine Website für meinen Cousin, der sich Selbstständig machen will mit einem Laptop-Reparatur-Dienst.

Dafür soll auf der Homepage ein Formular entstehen, auf dem die Kunden ihre Daten eintragen, welche nach einem Submit in Dokumentformat auf der nächsten Seite zusammengefasst angezeigt werden sollen.

Das Problem ist nun folgendes:
Der Kunde kann wählen ob er Originalteile oder Teile von Drittherstellern verbaut haben möchte. Je nach Wahl variieren dementsprechend auch die Preise.

Es funktionier bisher alles wunderbar, bis auf eine "kleinigkeit" auf die ich nicht selber komme. Ich Poste hier erstmal den wichtigsten und zum Erfolg beitragenden Code und stelle danach die kleinigkeit vor:
(form, div, legend, fieldset etc funktioniert alles und wird deswegen der übersicht-halber weggelassen)
HTML-Code:

<p><label><span style="color:red">*</span>Defekt:</label></p>
<select name="Category" onChange="SelectSubCat(),run();" >
<option value="">Bitte Teilehersteller wählen</option>
</select>&nbsp;

<select name="SubCat" id="SubCat" onChange="run()">
<option value="">Bitte erst Teilehersteller wählen</option>
</select>

JavaScript-Code:

function fillCategory(){ 
addOption(document.Formular.Category, "Originalhersteller", "Originalhersteller", "");
addOption(document.Formular.Category, "Dritthersteller", "Dritthersteller", "");
}

function SelectSubCat(){
removeAllOptions(document.Formular.SubCat);
addOption(document.Formular.SubCat, "", "Bitte erst Hersteller w\u00e4hlen", "");
if(document.Formular.Category.value == 'Originalhersteller'){
addOption(document.Formular.SubCat,"\u20AC 80,-", "Klemmende Tasten");
addOption(document.Formular.SubCat,"\u20AC 60,-", "Softwareproblem");
addOption(document.Formular.SubCat,"\u20AC 180,-", "Displayschaden");
}
if(document.Formular.Category.value == 'Dritthersteller'){
addOption(document.Formular.SubCat,"\u20AC 60,-", "Klemmende Tasten");
addOption(document.Formular.SubCat,"\u20AC 40,-", "Softwareproblem");
addOption(document.Formular.SubCat,"\u20AC 150,-", "Displayschaden");
}
}
function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}
function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}

Zur erläuterung:
Der Kunde sieht zwei Select-Boxen die nebeneinander angezeigt werden, in der er erst den Teilehersteller wählen soll (z.B. Originalhersteller) und je nach Wahl wird ihm dann via Javascript die zweite Selectbox mit den wählbaren Defekten zur Verfügung gestellt. Dort ist als Value der Preis hinterlegt ( \u20AC ist dabei das €-zeichen ), und als Option der Defekt (z.B. Klemmende Tasten).

Das ganze Formular wird natürlich erfolgreich Validiert und dann mittels POST auf eine .php-seite weitergeleitet.
Dort soll das ganze dann so aussehen:

Anrede, Name, Adresse, blablabla (funktioniert wunderbar)
und danach die Gerätedaten wie Hersteller, Modell, blablabla. (funktioniert wunderbar)
Und danach die Angaben zum Defekt samt Preis:
Teilehersteller: Original / Dritt
Defekt: Klemmende Tasten
Preis: € 80,-

Und hier liegt auch der Hund begraben:
Während ich Name, Modell und alles andere via echo ($_POST['anrede']); ausgeben kann, weiß ich leider nicht wie ich den gewählten Teilehersteller, den gewählten Defekt und den zum defekt gespeicherten Preis ausgeben kann.
Das ist meinem Cousin (und mittlerweile auch mir) nicht nur wegen der Übersicht und der späteren Rechnung wichtig, sondern auch weil zum Preis weitere Summen dazuaddiert werden sollen (wie z.B. die MwSt und Optionale Services wie Datenbackup (+xx €) usw.

Ich weiß, dass ich viel Code weggelassen habe, aber das ist nur wegen der Übersicht geschehen und funktioniert auch sonst wunderbar. Mir geht es lediglich um die Auswahlabhängige Selectbox und deren Inhalt wie Preis / Hersteller und Defekt.

Danke im voraus für sämtliche Hilfe, ich verzweifel langsam. Gibt es eine möglichkeit die Werte "80 Euro" und "Klemmende Tasten" in eine Variable "$preis = 80" und "$defekt = "Klemmende Tasten"" zu legen? Das würde mich schon weiterbringen glaube ich.

[lstegelitz]

var_dump($_POST); 

Das zeigt alles, was übertragen wurde... wenn Daten fehlen, wurden sie nicht übertragen.

Jedes zu übertragende Element einer FORM benötigt ein "name" Attribut.

Tipp fürs SELECT: das "value" wird übertragen - nicht der Text, den der User sieht... du kannst natürlich in beiden Fällen den gleichen Text benutzen, aber wenn das "value" vom OPTION leer ist, dann wird einfach ein leerer String übertragen...

[Akila]

Hallo Istegelitz.

Danke schonmal für deine Antwort, aber das bringt mich bisher leider nicht weiter.

Ich möchte hier mal kurz einen Ausschnitt zeigen, wie das ganze bisher aussieht, vielleicht wird das Problem dann etwas klarer.

Hier klicken

Auf dem Bild sieht man das Formular während der Eingabe (HTML-Seite, Übertragungsart action= post ).

Der Kunde wählt quasi "Originalteile", (Javascript startet jetzt dank "onChange" eine function, die die zweite SelectBox mit Inhalt füllt), der Kunde bekommt jetzt erst zugriff auf die zweite Selectbox und wählt (wie in diesem Beispiel) "Klemmende Taste(n)".
In einer "readonly" input leiste mit einer länge von 5 stellen wird ihm jetzt schon ein Preis (in diesem Beispiel "€ 35,-") angezeigt.

Ist das Formular vollständig ausgefüllt und Validiert (was bisher auch wunderbar funktioniert), wird er weitergeleitet auf eine .php-Seite, die alle Angaben via "echo ($_post['name']);" wiedergibt.

Momentan sieht das ganze im formular.php so aus:
Teile: Originalhersteller (via echo $_post, also echo aus der Value der ersten Selectbox. Dort ist der Value als auch der Name der Option identisch, nämlich Originalersteller)
Defekt: leer
Preis: €35,- (via echo $_post, hier wird der Value der zweiten Selectbox wiedergegeben. Wie im Codeausschnitt in meinem ersten Posting dieses Threads zu sehen, ist value der Preis samt Euro-zeichen und der Option-Name ist "Klemmende Tasten").

Und mit eben diesen Namen des Defekts, also den Option-Namen der zweiten Selectbox würde ich gerne auslesen und in formular.php wiedergeben, damit "Defekt:" nicht mehr leer ist.

Natürlich könnte man den Value von der zweiten Selectbox den identischen inhalt von dem Option-Namen geben (also zweimal "Klemmende Tasten" oder zwei mal "€ 35,- Klemmende Tasten), aber dann würde dies auch in der readonly input leiste angezeigt werden, was ich vermeiden möchte.

Wie löst man dieses problem nun am besten? Alles in allem wäre ich mit einer Lösung mittels Variable am meisten zufrieden, weil ich wie gesagt dann für eine Endpreisbestimmung (Defekt am Gerät + Optionalen Service) eine addition von mehreren Preisen ausführen möchte, wovon der Defekte-Preis variabel ist (nämlich je nachdem welchen Defekt der Kunde wählt) und die Optionalen Service-Preise immer fest sind).


Danke im voraus!

[lstegelitz]

Bau mal ein nachvollziehbares Beispiel im jsfiddle, dann poste das hier... grad keine Lust auf Downloads

http://jsfiddle.net/

Grundsätzlich besteht dein Problem offensichtlich darin, das du im PHP Script keine Daten erhälst weil dein Form keine Daten sendet... wohl weil du die SELECT Boxen per Javascript zusammenfrickelst und dabei einen Fehler machst.

Bau doch erstmal ein simples Beispiel aus reinem HTML und PHP, bevor du abhängige Dropdowns per Javascript bastelst.

[Akila]

Hier das funktionierende JSFiddle:

http://jsfiddle.net/oqz5b5xx/

Das Problem liegt aber wie gesagt nicht in der Erstellung der SelectBox.
Mein Problem ist: Ich möchte von der zweiten SelectBox (im beispiel "SubCat" genannt" den Namen als auch den Value auslesen (möglichst in einer Variable) und danach wiedergeben. NUR den Value ausgeben ist bisher kein Problem, den Namen davon auszulesen ist das Problem.

Und eine simple aus HTML gefrickelte SelectBox zu basteln ist auch kein Problem, jedoch habe ich dann nicht die Preise in der zweiten SelectBox, die von der ersten SelectBox abhängig sind. Sinn und zweck dieser javascript-Boxen ist ja die abhängigkeit und variable preisgestaltung...

[lstegelitz]

Der Name der zweiten SELECT box ist "SubCat"... meinst du eventuell den Text zwischen den option-Tags?

Probiers mal damit:

function run() {
    document.getElementById("srt").value = document.getElementById("SubCat").value; 
    
    el = document.getElementById("SubCat");
    console.log(el.options[el.selectedIndex].text);
}

[Akila]

Ich möchte lediglich den per JavaScript in der zweiten SELECT box generierten Preis UND Optionwert ausgeben.

Wenn einer jetzt also Originalhersteller wählt und dann für Klemmende Tasten 35€ angezeigt bekommt, so möchte ich nach dem Submit auf der .php-Seite Den Teilehersteller (in diesem bsp "Originalhersteller", den Preis (value der SELECT Box), 35€ UND den gewählten Defekt (in diesem bsp Klemmende Tasten) angezeigt bekommen.

Wählt der Kunde jedoch z.B. Dritthersteller, so soll er nach dem Submit auf der .php-Seite seine entsprechende Wahl, nämlich Dritthersteller, den Preis (für Klemmende Tasten in diesem Beispiel 20€) und den Defekt (in diesem bsp wieder Klemmende Tasten) angezeigt bekommen.

Nicht mehr und nicht weniger.

Auf der .php-Seite soll dann einfach mittels "echo ($_POST['hersteller']); echo ($_POST['defekt']); echo ($_POST['preis']);" seine Wahl angezeigt werden.

Ich muss es nur irgendwie schaffen Den Defekt UND den Preis (in Abhängigkeit vom Teilehersteller) in einer Variable zu speichern um das ganze wiedergeben zu können und um damit weiterarbeiten zu können.

[lstegelitz]

In deinem 2. SELECT steht im value-Attribut der Preis... du wirst niemals den Text der 2. Box im PHP zu sehen bekommen, wenn du selbigen nicht über das value abschickst. Wie eingangs bereits gesagt: das value-Attribut wird gesendet, NICHT der Text den du angezeigt bekommst...

Heisst: Beim Submit der Form musst du ein neues Objekt mit Daten zusammenbauen, welches dann gesendet werden muss (dann muss auch der Standard-Submit unterbunden werden, denn sonst bekommst du für den SELECT "SubCat" nur den Preis und nicht den Text)

sowas in der Art (siehe Konsole output)
http://jsfiddle.net/oqz5b5xx/1/

Ich rate dir dringend an, eine lib wie jquery zu benutzen, das erspart dir viel frickelei mit reinem JS.

[Akila]

Alles klar, ich werde mich mal in Libs reinlesen und probiere das aus.

Ich danke dir vielmals.