Button nur anzeigen wenn Eingabe richtig ist
Shanaya Camadini
Button nur anzeigen wenn Eingabe richtig ist
Shanaya Camadini
MudGuard
Rolf B
Gunnar BittersmannHallo Leute
Ich möchte einen Button hinzufügen der nur angezeigt wird wenn die Eingabe richtig ist und bei Klick weiteleiten zur neuen Seite.
Kann mir da jemeand helfen wie es genau funktioniert
<html>
<head>
<meta charset="UTF-8">
<title>PLZ Validierung</title>
<script>
// Einfache Zuordnung von PLZ zu Ort
const plzStadtMap = {
"1234": "Test1",
"4567": "Test2",
"7890": "Test3"
};
function stadtZuordnen() {
const plzInput = document.getElementById("plz").value;
const stadtInput = document.getElementById("ort");
// Auto-Fill Ort basierend auf PLZ
if (plzStadtMap[plzInput]) {
stadtInput.value = plzStadtMap[plzInput];
} else {
stadtInput.value = "keine Lieferung möglich"; // Ort leeren, wenn nicht gefunden
}
</script>
</head>
<body>
<form>
<label for="plz">PLZ:</label>
<!-- pattern="\d{4}" stellt sicher, dass 4 Ziffern eingegeben werden -->
<input type="text" id="plz" name="plz" pattern="\d{4}" maxlength="4" required
oninput="stadtZuordnen()" placeholder="PLZ eingabe">
<label for="stadt">Ort:</label>
<input type="text" id="ort" name="ort" readonly>
</form>
</body>
</html>
-
Hi,
Hallo Leute
Ich möchte einen Button hinzufügen der nur angezeigt wird wenn die Eingabe richtig ist und bei Klick weiteleiten zur neuen Seite.
Kann mir da jemeand helfen wie es genau funktioniert
> // Auto-Fill Ort basierend auf PLZ > if (plzStadtMap[plzInput]) { > stadtInput.value = plzStadtMap[plzInput];ist die Zuordnung von plz -> Stadt im betroffenen Gebiet eindeutig? (In Deutschland ist sie es nicht …)
> <input type="text" id="plz" name="plz" pattern="\d{4}" maxlength="4" required > oninput="stadtZuordnen()" placeholder="PLZ eingabe">Du schränkst die PLZ auf exakt 4 Ziffern ein. Paßt das zum betroffenen Gebiet? (in D sind's 5 Ziffern, in GB 6 Buchstaben+Ziffern, in USA 2 Buchstaben für's Land + 5 Ziffern, usw.)
Gibt's noch mehr Felder in Deinem Formular, die Du hier weggelassen hast? Wenn nein, einfach in dem Zweig, in dem Du den Ort ausfüllst, auch den Button einblenden (im Style display auf inline setzen, bzw. auf none im Fehlerzweig)
cu,
Andreas a/k/a MudGuard-
Ja bei uns in der Schweiz gibt es nur 4 Stellige Postleitzahlen die genau auf das Gebit respektiv Ort angibt
-
-
Und sinnvollerweise den Nutzer auf Fehler hinweisen.
Sonst wird er nicht merken dass eine Eingabe falsch ist und sich wundern warum es nirgends weitergeht. -
Hallo Shanaya,
ich nehme an, dass Du den submit-Button für das form meinst. Der ist im Beispiel nicht gezeigt. Denken wir uns also ein
<button type="submit">Absenden</button>hinzu.
Problem: Mit der ENTER Taste kannst Du ein form auch ohne Button abschicken. Du musst also auf jeden Fall das submit-Event des Formulars behandeln, um bei leerer Stadt den Submit zu verhindern.
Und am Server auch prüfen, weil böse Benutzer Dir auch ohne <form> irgendwelchen Müll hineinPOSTen können.
Du möchtest also die PLZ eingeben lassen und die Stadt automatisch zusteuern. In der Praxis wird das vermutlich ein fetch-Aufruf an deinen Server sein. Du möchtest bestimmt keine Tabelle mit bis zu 10000 Einträgen im JavaScript-Code haben.
Du solltest das aber nur tun, wenn die Eingabe vierstellig ist. Für weniger Stellen weißt Du ja von vornherein, dass Du nichts finden wirst. Und Du solltest das readonly-Element für die Stadt nicht für Meldungen zweckentfremden. Steuere das lieber über CSS und das Validation API. Die Pseudoklassen :valid und :invalid helfen Dir dabei.
Guck hier: https://jsfiddle.net/Rolf_b/h0q9f34g/
Ich habe jede Label/Input Gruppe in ein div gelegt, deswegen ist die Verknüpfung von plz:valid mit dem Button etwas schwieriger. Der Selektor
#adresse:has(#plz:valid) #buttons buttonschaut über :has() zuerst, ob das Form (id="adresse") ein Kindelement mit id="plz" enthält, das die Validierung bestanden hat, und sucht dann nach einem Kindelement mit id="buttons" und darin ein button-Element.Das #buttons div habe ich vor allem deshalb eingebaut, um Button und Warntext ungefähr auf gleicher Höhe zu haben…
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Guck hier: https://jsfiddle.net/Rolf_b/h0q9f34g/
Autsch! Die Meldung „Bitte geben Sie eine gültige Postleitzahl ein“ steht irgendwo im Raum, nicht da, wo sie hingehört: am Eingabefeld.
Und sie ist alles andere als hilfreich. Was ist denn eine „gültige Postleitzahl“?
🖖 Live long and prosper
--
In our chants of “ICE out now”
Our city’s heart and soul persists
Through broken glass and bloody tears
On the streets of Minneapolis
— Bruce Springsteen, Streets of Minneapolis-
Hallo Gunnar Bittersmann,
die PLZ steht dort, wo der Submit-Button ausgeblendet ist. Wenn ich sie direkt unter die PLZ setze, springt ggf. der Rest des Formulars auf und ab. Das ist unschön. Bei nur 2 Feldern ist die Meldung nahe genug am Eingabefeld. In einem größeren Formular kann man das anders machen, aber ich bin nicht der Form-Designer, ich gebe nur den Tipp mit :valid/:invalid.
Auf reportValidity wollte ich ebenfalls nicht zurückgreifen, denn wenn die Validity-Box erst einmal geöffnet wurde, ist sie kaum noch totzukriegen.
Was eine "gültige PLZ" ist weiß ich auch nicht, dass es um Schweizer PLZ geht habe ich gerade erst gelesen. Insofern musste ich vage bleiben.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
die PLZ steht dort, wo der Submit-Button ausgeblendet ist. Wenn ich sie direkt unter die PLZ setze, springt ggf. der Rest des Formulars auf und ab. Das ist unschön.
Bei Design geht es in erster Linie nicht um Schönheit, sondern um Zweckmäßigkeit. Zweckmäßig ist, eine solche Meldung dort zu plazieren, wo man tätig werden muss, um sie wegzubekommen, also am Eingabefeld.
Was eine "gültige PLZ" ist weiß ich auch nicht, dass es um Schweizer PLZ geht habe ich gerade erst gelesen. Insofern musste ich vage bleiben.
Nein, musstest du nicht. Du hättest schreiben können: „Eine gültige Postleitzahl ist [was auch immer bei dir zutrifft].“ Das ist nicht vage, sondern der Hinweis an Shanaya, dort das Zutreffende hinzuschreiben.
🖖 Live long and prosper
--
In our chants of “ICE out now”
Our city’s heart and soul persists
Through broken glass and bloody tears
On the streets of Minneapolis
— Bruce Springsteen, Streets of Minneapolis
-
-
-