13.11.2022, 10:47
Hallo zusammen,
meine Kenntnisse in Javascript sind als "extrem Beginner" einzustufen, von daher benötige ich bitte Hilfe oder Denkanstöße
Es geht um ein Formularscript, indem ich ein mehrfach verkettetes Javascript einsetzen möchte. das Grundgerüst ist nicht von mir, dies habe ich durch Sucherei im Netz gefunden und entsprechend bis zu dem heutigen Stand umgebaut.
Jetzt stellt sich mir die Frage, wie ich den "Preis" nicht als <select> sondern als feste direkte Ausgabe in dem Formular darstelle.
Ich möchte also nicht in dem Preisfeld "bitte wählen" stehen haben sondern sofort den Preis, der ja jeder Anwendung zugeordnet ist.
Wie bewerkstellige ich das ?
Versuche, in dem Formular mit <input> oder <ng-model> den Wert zu bekommen, sind kläglich gescheitert.
Ich bedanke mich bereits an dieser Stelle für alle Vorschläge oder Lösungen, die mein Problem fixen.
hier das script und im Anschluss das Formular als Teil Auszug
meine Kenntnisse in Javascript sind als "extrem Beginner" einzustufen, von daher benötige ich bitte Hilfe oder Denkanstöße
Es geht um ein Formularscript, indem ich ein mehrfach verkettetes Javascript einsetzen möchte. das Grundgerüst ist nicht von mir, dies habe ich durch Sucherei im Netz gefunden und entsprechend bis zu dem heutigen Stand umgebaut.
Jetzt stellt sich mir die Frage, wie ich den "Preis" nicht als <select> sondern als feste direkte Ausgabe in dem Formular darstelle.
Ich möchte also nicht in dem Preisfeld "bitte wählen" stehen haben sondern sofort den Preis, der ja jeder Anwendung zugeordnet ist.
Wie bewerkstellige ich das ?
Versuche, in dem Formular mit <input> oder <ng-model> den Wert zu bekommen, sind kläglich gescheitert.
Ich bedanke mich bereits an dieser Stelle für alle Vorschläge oder Lösungen, die mein Problem fixen.
hier das script und im Anschluss das Formular als Teil Auszug
Code:
<noscript><div align="center" id="nojava">
Um den vollen Leistungsumfang unseres Shops nutzen zu können, aktivieren Sie bitte JavaScript in Ihren Browsereinstellungen.</div>
<br />
</noscript>
<script>
// Code steht in {...} wegen eines Frickl-Bugs
// Nun denkt der Linter, dies sei ein JSON-String und meckert auch. Bitte ignorieren!
{
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 €" }
]
}
]
},
]
}
];
</script>PHP-Code:
<form action="./php/gutschein.php" method="post" name="auswahl">
<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="xxxx">xxx</option>
<option value="yyyy">yyyy</option>
<option value="zzzz">zzzz</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:
<select id="termin" name="Dauer" class="form-control" disabled value="" type="hidden">
<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>