22.11.2022, 22:55
(16.11.2022, 22:44)admin schrieb: Verstehe ich immer noch nicht ganz. Kannst du das mal online stellen, damit man sieht was da passiert?
Ich verstehe das so das du die selects alle auslesen willst und dann den Preis ausgeben willst. Aber das hatten wir ja schon.
Bitte online stellen oder einen kompletten Code posten, den ich nur kopieren muss, um ihn dann selber zu testen.
Hallo,
gerne stelle ich den kompletten Code noch einmal hier rein.
Das Formular (geschrumpft auf den Teil, um den es geht) ist folgendes:
PHP-Code:
<div id="rex-yform" class="yform">
<form action="./php/gutschein.php" method="post" name="terminauswahl">
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="form-group col-md-12">
<label class="control-label">Gutschein für:
<select id="gutschein" name="Gutschein" class="form-control" value="" required>
<option value="">Bitte wählen:</option>
<option value="Massage">Massage-Angebote</option>
<option value="LiebscherBracht">Liebscher & Bracht</option>
<option value="SPA">SPA-Angebote</option>
<option value="Wert">Wertgutschein</option>
</select>
</label>
<label class="control-label">Anwendung:
<select id="anwendung" name="Anwendung" class="form-control" disabled value="" required>
<option value="">------</option>
</select>
</label>
<label class="control-label">Dauer/Preis:
<select id="termin" name="Dauer" class="form-control" disabled value="" required">
<option value="">------</option>
</select>
</label>
<label class="control-label">Preis:
<select id="preis" name="Preis" class="form-control" disabled value="" type="hidden">
<option value="">------</option>
</select>
</label>
</div>
</div>
</form>
</form>
</div>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
Code:
<script>
{
document.addEventListener('DOMContentLoaded', function () {
const form = document.forms.terminauswahl;
const gutscheinCtrl = new GutscheinController(form.gutschein);
const anwendungCtrl = new AnwendungController(form.anwendung, gutscheinCtrl);
const terminCtrl = new TerminController(form.termin, anwendungCtrl);
const preisCtrl = new PreisController(form.preis, terminCtrl);
preisCtrl.addEventListener("change", preisChanged)
gutscheinCtrl.mapData(data)
function preisChanged(event) {
let preisCtrl = event.target;
let terminCtrl = preisCtrl.parentNode;
let anwendungCtrl = terminCtrl.parentNode;
let gutscheinCtrl = anwendungCtrl.parentNode;
let ausgabe = document.getElementById('auswahl');
ausgabe.textContent = preisCtrl.selectedKey != ""
? `${gutscheinCtrl.selectedKey}:${gutscheinCtrl.selectedObject.name} / `+
`${anwendungCtrl.selectedKey}:${anwendungCtrl.selectedObject.thema} / ` +
`${terminCtrl.selectedKey}:${terminCtrl.selectedObject.zeit} / ` +
`${preisCtrl.selectedKey}:${preisCtrl.selectedObject.euro}` : "";
}
});
class SelectionController extends EventTarget {
constructor(selectElement, parentNode = null) {
super(); // Pflicht: Konstruktor der Superklasse aufrufen
if (!(selectElement instanceof HTMLSelectElement)) {
throw new Error("Controller-Objekt benötigt ein select Element als ersten Parameter");
}
if (parentNode && !(parentNode instanceof SelectionController)) {
throw new Error("Controller-Objekt benötigt einen SelectionController als zweiten Parameter");
}
this.selectElement = selectElement;
this.parentNode = parentNode;
this.selectElement.addEventListener("change", event => this._handleChangeEvent(event))
if (parentNode) {
parentNode.addEventListener("change", event => this.mapData(event.selectedObject));
}
}
mapData(dataSource) {
this.dataSource = dataSource;
if (typeof this.getValueList == "function") {
removeOptions(this.selectElement);
const options = dataSource && this.getValueList(dataSource);
if (!options || !options.length) {
setToDisabled(this.selectElement)
} else {
setToEnabled(this.selectElement, options);
}
}
this.selectElement.dispatchEvent(new Event("change"));
function removeOptions(selectElement) {
while (selectElement.length > 0)
selectElement.remove(0);
}
function setToDisabled(selectElement) {
addOption(selectElement, "", "------");
selectElement.disabled = true;
}
function setToEnabled(selectElement, options) {
addOption(selectElement, "", "Bitte wählen:");
for (var optionData of options) {
addOption(selectElement, optionData.value, optionData.text);
}
selectElement.disabled = false;
}
function addOption(selectElement, value, text) {
let option = document.createElement("option");
option.value = value;
option.text = text
selectElement.add(option);
}
}
getValue(key) {
throw new TypeError("Die abstrakte Methode 'getValue' wurde nicht implementiert!");
}
get selectedKey() {
return this.selectElement.value;
}
get selectedObject() {
return this.dataSource ? this.getValue(this.dataSource, this.selectElement.value) : null;
}
_handleChangeEvent(event) {
let nodeChangeEvent = new Event("change");
nodeChangeEvent.selectedObject = this.selectedObject;
this.dispatchEvent(nodeChangeEvent);
}
}
class GutscheinController extends SelectionController {
constructor(selectElement) {
super(selectElement, null);
}
getValue(quelle, gutscheinId) {
return quelle.find(gutschein => gutschein.id == gutscheinId);
}
}
class AnwendungController extends SelectionController {
constructor(selectElement, parentController) {
super(selectElement, parentController);
}
getValueList(gutschein) {
return gutschein.massagen.map(anwendung => ({ value: anwendung.nummer, text: anwendung.thema }));
}
getValue(gutschein, anwendungNr) {
return gutschein.massagen.find(anwendung => anwendung.nummer == anwendungNr);
}
}
class TerminController extends SelectionController {
constructor(selectElement, parentController) {
super(selectElement, parentController);
}
getValueList(anwendung) {
return anwendung.termine.map(termin => ({ value: termin.id, text: termin.zeit }));
}
getValue(anwendung, terminId) {
return anwendung.termine.find(termin => termin.id == terminId);
}
}
class PreisController extends SelectionController {
constructor(selectElement, parentController) {
super(selectElement, parentController);
}
getValueList(termin) {
return termin.preise.map(preis => ({
value: preis.id,
text: preis.euro
}));
}
getValue(termin, preisId) {
return termin.preise.find(preis => preis.id == preisId);
}
}
}
var data = [
{ id: "Massage",
name: "Massage-Angebote",
massagen: [
{ nummer: "Thai Hand-, oder Kopf/Gesichtsmassage",
thema: "Thai Hand-, oder Kopf/Gesichtsmassage",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "30,00 €", euro: "30,00 €" }
]
}
]
},
{ nummer: "Thai Schulter-/Nackenmassage",
thema: "Thai Schulter-/Nackenmassage",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "30,00 €", euro: "30,00 €" }
]
},
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "49,00 €", euro: "49,00 €" }
]
}
]
},
{ nummer: "Thai Fuß- oder Rückenmassage",
thema: "Thai Fuß- oder Rückenmassage",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "30,00 €", euro: "30,00 €" }
]
},
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "49,00 €", euro: "49,00 €" }
]
}
]
},
{ nummer: "Traditionelle Thaimassage oder Öl/Aromamassage",
thema: "Traditionelle Thaimassage oder Öl/Aromamassage",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "30,00 €", euro: "30,00 €" }
]
},
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "49,00 €", euro: "49,00 €" }
]
},
{ id: "90 min", zeit: "90 min",
preise: [
{ id: "69,00 €", euro: "69,00 €" }
]
},
{ id: "120 min", zeit: "120 min",
preise: [
{ id: "89,00 €", euro: "89,00 €" }
]
}
]
},
{ nummer: "Tok Sen Massage (Hammermassage)",
thema: "Tok Sen Massage (Hammermassage)",
termine: [
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "49,00 €", euro: "49,00 €" }
]
},
{ id: "90 min", zeit: "90 min",
preise: [
{ id: "69,00 €", euro: "69,00 €" }
]
},
{ id: "120 min", zeit: "120 min",
preise: [
{ id: "89,00 €", euro: "89,00 €" }
]
}
]
},
{ nummer: "Thai Kräuterstempel- oder Hot Stone Massage",
thema: "Thai Kräuterstempel- oder Hot Stone Massage",
termine: [
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "55,00 €", euro: "55,00 €" }
]
},
{ id: "90 min", zeit: "90 min",
preise: [
{ id: "78,00 €", euro: "78,00 €" }
]
},
{ id: "120 min", zeit: "120 min",
preise: [
{ id: "99,00 €", euro: "99,00 €" }
]
}
]
},
{ nummer: "Thai Vital Massage (Kombination verschiedener Techniken",
thema: "Thai Vital Massage (Kombination verschiedener Techniken",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "35,00 €", euro: "35,00 €" }
]
},
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "55,00 €", euro: "55,00 €" }
]
},
{ id: "90 min", zeit: "90 min",
preise: [
{ id: "78,00 €", euro: "78,00 €" }
]
},
{ id: "120 min", zeit: "120 min",
preise: [
{ id: "99,00 €", euro: "99,00 €" }
]
}
]
},
{ nummer: "Partnermassage (pro Paar)",
thema: "Partnermassage (pro Paar)",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "60,00 €", euro: "60,00 €" }
]
},
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "93,00 €", euro: "93,00 €" }
]
},
{ id: "90 min", zeit: "90 min",
preise: [
{ id: "138,00 €", euro: "138,00 €" }
]
},
{ id: "120 min", zeit: "120 min",
preise: [
{ id: "178,00 €", euro: "178,00 €" }
]
}
]
}
]
},
{ id: "LiebscherBracht",
name: "Liebscher & Bracht",
massagen: [
{ nummer: "Schmerztherapie",
thema: "Schmerztherapie",
termine: [
{ id: "60 min", zeit: "60 min",
preise: [
{ id: "xx €", euro: "xx €" }
]
},
{ id: "75 min", zeit: "75 min",
preise: [
{ id: "xx €", euro: "xx €" }
]
},
{ id: "90 min", zeit: "90 min",
preise: [
{ id: "xx €", euro: "xx €" }
]
}
]
}
]
},
{ id: "SPA",
name: "SPA-Wellness",
massagen: [
{ nummer: "Infrarot Wärmekabine",
thema: "Infrarot Wärmekabine",
termine: [
{ id: "30 min", zeit: "30 min",
preise: [
{ id: "15,00 €", euro: "15,00 €" }
]
},
{ id: "45 min", zeit: "45 min",
preise: [
{ id: "20,00 €", euro: "20,00 €" }
]
}
]
},
{ nummer: "Infrarot Wärmekabine SPA",
thema: "Infrarot Wärmekabine SPA",
termine: [
{ id: "55 min 43,00 €", zeit: "55 min 43,00 €" },
{ id: "85 min 60,00 €", zeit: "85 min 60,00 €" },
{ id: "115 min 80,00 €", zeit: "115 min 80,00 €" },
{ id: "145 min 100,00 €", zeit: "145 min 100,00 €" }
]
},
{ nummer: "Infrarot Wärmekabine THAI SPA",
thema: "Infrarot Wärmekabine THAI SPA",
termine: [
{ id: "85 min 60,00 €", zeit: "85 min 60,00 €" },
{ id: "115 min 80,00 €", zeit: "115 min 80,00 €" },
{ id: "145 min 100,00 €", zeit: "145 min 100,00 €" }
]
},
{ nummer: "Infrarot Wärmekabine THAI SPA DELUXE",
thema: "Infrarot Wärmekabine THAI SPA DELUXE",
termine: [
{ id: "85 min 67,00 €", zeit: "85 min 67,00 €" },
{ id: "115 min 87,00 €", zeit: "115 min 87,00 €" },
{ id: "145 min 107,00 €", zeit: "145 min 107,00 €" }
]
},
{ nummer: "DREAM DAY ",
thema: "DREAM DAY",
termine: [
{ id: "180-210 min 155,00 €", zeit: "ca. 180-210 min 155,00 €" }
]
},
{ nummer: "DEAM DAY Partner",
thema: "DREAM DAY Partner",
termine: [
{ id: "180-210 min 299,00 €", zeit: "ca. 180-210 min 299,00 €" }
]
}
]
}
];
</script>Wenn man in dem Formular die einzelnen Bereiche auswählt ist jeder Kombination ein Preis zugeordnet und der soll erscheinen, sobald man die Dauer der vorher ausgesuchten Anwendung anklickt. Dieses Formularfeld Preis soll also kein Select Feld sein sondern eben eine Ausgabe, aber das bekomme ich nicht hin
Der Ansatz von rzscout ist klasse, jedoch fehlt mir da auch der Preis und vor allem hat nicht jede Anwendung jedes Zeitfenster (es ist leider komplizierter )
Es gibt Anwendung mit einem Zeitfenster manche haben zwei, manche drei und einige vier, das ist in dem Javascript alles berücksichtigt.
Ich hoffe das mein Wunsch jetzt deutlicher geworden ist und bedankle mich erneut bei allen, die mir bei der Lösung bzw. Umsetzung behilflich sind.
Beste Grüße, Michael