Weblink automatisch anpassbar mit Eingabefeld

Sami9898 · 21.01.2022

Hallo zusammen,

kurze Vorgeschichte. Ich habe auf der Arbeit eine Aufgabe bekommen: Es gibt einen Link, der im Webbrowser ein Meldungsfenster des SAP öffnet. Zu jeder Meldung gibt es eine Meldungsnummer und das besondere ist, das der Link so aufgebaut ist, dass alles identisch bleibt und sich nur die 5-stellige Meldungsnummer der jeweiligen Meldung ändern.

Beispiel:
Meldungsnummer 12345 ->Dazugehöriger Weblink: https://www.html-forum12345.de
Meldungsnummer 72679 ->Dazugehöriger Weblink: https://www.html-forum72679.de usw.

Nun zu meiner Aufgabe: Mein Chef hat mir die Aufgabe gegeben, ein Tool zu erstellen, in dem man ein Eingabefeld für die Meldungsnummer hat und ein Feld für den Weblink. Nach Eingabe der 5-stelligen Meldungsnummer in das Eingabefeld ändert sich automatisch der Weblink an der spezifischen Stelle mit der eingegebenen Meldungsnummer (wie oben).

Ich habe jetzt zunächst eine Excel-Datei erstellt. Ich habe es dann so aufgebaut, das in Zelle C5, dem Eingabefeld, die 5-stellige Meldungsnummer eingegeben werden soll.
In der Zelle C7 habe ich dann eine VERKETTEN-Funktion erstellt, die den Weblink(String) und die Meldungsnummer(Integer) mit einander verketten.
Für das obige Beispiel würde es lauten:
Zelle C5: 72679
Zelle C7: =VERKETTEN("https://www.html-forum";C5;".de")

Bei Anklicken auf die Zelle C7 öffnet sich nun der Webbrowser mit der URL https://www.html-forum72679.de

Nun kommen wir an dem Punkt, warum ich eure Hilfe brauch:
Ich möchte mir gerne diesen Schritt mit Excel sparen, da es für mich nicht in die Zeit passt, eine extra Excel Datei für diese simple Aufgabe zu erstellen.
Weiß einer, wie ich einen HTML-Code erstelle, sodass

1) sich direkt (ohne Excel) ein Webbrowser öffnen, in dem dann eine Art Pop-Up Fenster oder Textfeld erscheint, wo ich aufgefordert werde, die Meldungsnummer einzugeben
2) und dann die angepasst URL mit der eingegeben Meldungsnummer aufgerufen wird.

Somit müsste ich nicht erst Excel starten und würde mir diesen Schritt sparen

Ich hoffe es gibt einen, der mir bei meinem Problem helfen kann.

Sami9898 · 22.01.2022

Also ich habe mich jetzt nochmal schlau gemacht.

<form action="https://html-forum"+value+".com">
<label>Claim number <input name="q" value="72679"></label>
<button name="b" value="Find">Submit</button>
</form>

So in dieser Art bräuchte ich das, ich weiß aber nicht wie ich das in HTML übersetzen kann :/

Also der Wert, der in Value eingegeben wird(Meldungsnummer), soll als eine Art Variable mitten in der URL stehen, sodass sich diese Variable anpasst an dem, was in Value eingegeben wurde.
Und dann soll mit einem Button Submit dieser URL ausgeführt werden.

scatello · 22.01.2022

Mit HTML alleine wirst du nicht weit kommen, da brauchst du JavaScript oder PHP.

Sempervivum · 22.01.2022

Was Du da gepostet hast, ist schon HTML aber es fehlt noch einiges. Dies müsste deine Aufgabe erfüllen:

Code:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meldungsnummern-Eingabe</title>
    <style>
        #meldungsnr-input {
            border: 2px solid black;
            outline: none;
        }

        /* Ist die Eingabe ungueltig machen wir den Rahmen rot: */
        #meldungsnr-input:invalid {
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <label>
        Bitte Meldungsnummer eingeben:
        <!-- Eingabefeld fuer die Meldungsnummer
        Diese muss eingegeben werden, daher das Attribut "required"
        Sie muss numerisch sein, daher das Pattern fuer
        "mindestens eine Ziffer" -->
        <input id="meldungsnr-input" required pattern="\d+">
    </label>
    <script>
        const url = 'https://die-url-vor-meldungsnummer';
        // Eventlistener fuer "change" registrieren, dieser feuert
        // wenn die Enter-Taste im Eingabefeld gedrueckt wurde:
        document.getElementById('meldungsnr-input').addEventListener('change', event => {
            // Pruefen ob die Eingabe gueltig ist, d. h. numerisch:
            if (event.target.validity.valid) {
                // Meldungsnummer aus dem Eingabefeld holen
                // Sicherheitshalber entfernen wir fuehrende und folgende
                // Leerzeichen durch Aufruf von trim:
                const meldungsnr = event.target.value.trim(),
                    // vollstaendige URL zusammen bauen:
                    urlComplete = url + meldungsnr + '.de';
                // und aufrufen:
                location.href = urlComplete;
            }
        });
    </script>
</body>

</html>

Sami9898 · 22.01.2022

@

Sempervivum

vielen vielen Dank! Es klappt! super genial, echt.

Ich habe jetzt noch zu mehrmaliges Ausprobieren und Testen einige Features hinzugefügt, dass z.B. mit maxlenght="6" die Meldungsnummer nicht mehr als 6 Zahlen bestehen soll oder mit autofocus="autofocus" der Cursor der Maus direkt in das Eingabefeld springt.

ich hätte jetzt noch vier Punkte, die ich versucht habe zu integrieren, aber wo mir die Erfahrung und das Wissen fehlt diese umzusetzen...

1. Mir ist aufgefallen, dass die Suche startet, wenn ich das Fenster des Browsers verlasse, ohne das ich auf Enter geklickt habe.
Gibt es eine Möglichkeit, die Eingabe und Bestätigung der Meldungsnummer nur mit dem Betätigen der Enter-Taste zu ermöglichen?

2. Gibt es eine Möglichkeit, eine Art searchHistory zu integrieren, die mir die z.B. letzten zwei oder drei eingegebenen Meldungsnummer unter dem Eingabefeld anzeigt?

3. Der dritte Punkt ist die Farbeinstellung des Eingabefeldes: Kann man es besser lösen und sagen, man möchte drei Farbeinstellungen besitzen?
Also einmal border: black als default, sodass wenn ich das Programm ausführe und die Ziffern eingebe, das Eingabefeld schwarz bleibt.
Dann, wenn ich die 6. Ziffer erfolgreich eingegeben habe ändert sich die Farbe auf grün.
Und als letztes, wenn ich ein ungültiges Ergebnis eingebe(in dem Beispiel ist ess alles, was keine Ziffer ist besitzt, also Buchstaben und Sonderzeichen), das das Eingabefeld rot erscheint.

<style>
#meldungsnr-input {
border: 2px solid lightgreen;
outline: none;
}
/* Ist die Eingabe ungueltig machen wir den Rahmen rot: */
#meldungsnr-input:invalid {
border: 2px solid black;
}
</style>

Ich habe es jetzt so, das das Eingabefeld immer schwarz ist, bis ich die 6. Ziffer in das Eingabefeld eingebe.
Wenn ich jetzt noch die Bedingung für rot hätte, das wäre echt sehr stark.

Sempervivum · 22.01.2022

1. Mir ist aufgefallen, dass die Suche startet, wenn ich das Fenster des Browsers verlasse, ohne das ich auf Enter geklickt habe.
Gibt es eine Möglichkeit, die Eingabe und Bestätigung der Meldungsnummer nur mit dem Betätigen der Enter-Taste zu ermöglichen?

Das überrascht mich, mit so etwas bin ich noch nie konfrontiert gewesen. Wie ist das denn genau zu verstehen? Du schließt das Tab mit dem Eingabefeld und es öffnet sie die Seite mit der URL? Konnte ich nicht nachvollziehen. Du schließt das Tab nicht aber aktivierst ein anderes? Passiert bei mir auch nichts. In welchem Browser passiert das?

2. Gibt es eine Möglichkeit, eine Art searchHistory zu integrieren, die mir die z.B. letzten zwei oder drei eingegebenen Meldungsnummer unter dem Eingabefeld anzeigt?

Wenn diese History individuell für jeden Benutzer sein soll oder darf ist es relativ einfach: Du kannst die letzten Meldungsnummern im Localstorage oder Sessionstorage speichern, siehe hier:
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
Versuche es selbst und frage wenn Du nicht zum Ziel kommst.

3. verstehe ich so, dass der Rahmen erst rot oder grün werden soll wenn der Benutzer alle 6 Zeichen eingegeben hat? In dem Fall müsste man das im Javascript erledigen und es geht nicht mehr so einfach mit den Eigenschaften valid und invalid allein.

Sempervivum · 22.01.2022

PS: Was 2. betrifft habe ich etwas nicht bedacht: Du musst die Nummern ja nicht nur speichern sondern auch dem Benutzer wieder präsentieren und zwar so, dass er sowohl eine der vorigen auswählen als auch eine neue eingeben kann. Das geht mit einer datalist, siehe hier:
https://developer.mozilla.org/de/docs/Web/HTML/Element/datalist

Sami9898 · 22.01.2022

Zu Punkt 1:
Öffne zwei Tabs. In dem einen hast du das Programm, in dem anderen Tab hast du irgendwas offen (google oder so)
Gib mal nun 6 Ziffern in das Eingabefeld des 1. Tabs ein und wechsle dann zum zweiten Tab (Google).
Nun müsste das Programm im 1. Tab die Eingabe ausgeführt haben ohne das du Enter gedrückt hast.

Sempervivum · 22.01.2022

Tatsache, in Opera, den ich normaler Weise benutze, passiert nichts aber im Firefox genau das was Du beschreibst. Werde ich untersuchen ...

Sempervivum · 22.01.2022

Offenbar feuert im Firefox das change-Event nicht nur beim Drücken von Enter sondern auch wenn das Eingabefeld den Focus verliert. Die bewährte Methode, die Default-Aktion von "blur" zu unterdrücken hat nicht funktioniert aber es löst das Problem wenn man gezielt auf das Drücken der Enter-Taste reagiert:

Code:

        const url = 'https://die-url-vor-meldungsnummer';
        // Eventlistener fuer Tastendruck registrieren:
        document.getElementById('meldungsnr-input').addEventListener('keypress', event => {
            // wurde die Enter-Taste gedrückt und ist die Eingabe fehlerfrei?
            if (event.key === "Enter" && event.target.validity.valid) {
                // Meldungsnummer aus dem Eingabefeld holen
                // Sicherheitshalber entfernen wir fuehrende und folgende
                // Leerzeichen durch Aufruf von trim:
                const meldungsnr = event.target.value.trim(),
                    // vollstaendige URL zusammen bauen:
                    urlComplete = url + meldungsnr + '.de';
                // und aufrufen:
                location.href = urlComplete;
            }
        });

Sami9898 · 22.01.2022

Zu Punkt 2:
Ich habe jetzt mal geschaut was du mir angeboten hast. Die Meldungsnummer variieren immer, d.h. es ist eine laufende Nummer. Deswegen hilft mir nicht, vordefinierte Optionen zu implementieren, da sich die nummer für jeden case ändert.
Das heißt es bräuchte eine Kombination aus datalist und localStorage, wenn ich mich nicht täusche. Ich muss leider wieder fragen, da ich nicht zum Ziel komme...

Zu 1. Es klappt! Das ist coole ist, dass das Programm jetzt auch nur ausgeführt, wenn ich genau 6 Ziffern eingebe!

Zu 3. Ich lasse es jetzt einfach so, also die Farbeinstellung des Eingabefeldes ist jetzt dauerhaft schwarz(invalid), bis ich 6 Ziffern (valid) als Meldungsnummer in das Eingabefeld eingegeben habe, was die Farbe ändert von schwarz auf grün.
Das was ich meinte war, das wir so gesagt drei bedingungen haben, schwarz als default, grün erst wenn eingabe valid und rot wenn eingabe invalid(eingabe von sonderzeichen/buchstaben)

Sami9898 · 22.01.2022

So sieht dein Code jetzt modifiziert aus

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weblink to IQOS Notification</title>
<style>
#meldungsnr-input {
border: 2px solid green;
outline: none;
font-size: 1em;
width: 5em;
}
/* Ist die Eingabe ungueltig machen wir den Rahmen grau: */
#meldungsnr-input:invalid {
border: 2px solid grey;
</style>
</head>

<body>
<label>
Please enter a claim number:

<input id="meldungsnr-input" required pattern="[\d+]{6}", maxlength="6", title= "Please enter a valid claim number"
autofocus="autofocus", placeholder="">
</label>
<script>
const url = 'https://die-url-vor-meldungsnummer';
// Eventlistener fuer Tastendruck registrieren,
// wurde die Enter-Taste gedrückt und ist die Eingabe fehlerfrei:
document.getElementById('meldungsnr-input').addEventListener('keypress', event => {
if (event.key === "Enter" && event.target.validity.valid) {
// Meldungsnummer aus dem Eingabefeld holen
// Sicherheitshalber entfernen wir fuehrende und folgende
// Leerzeichen durch Aufruf von trim:
const meldungsnr = event.target.value.trim(),
// vollstaendige URL zusammen bauen:
urlComplete = url + meldungsnr + '.de';
// und aufrufen:
location.href = urlComplete;
}
});
</script>
</body>

Gibt es eine Möglichkeit, das Label "Please enter a claim number" genau so anzupassen wie #meldungsnr-input? Anzupassen in Sachen Schriftart und -größe, damit das Laber und die #meldungsnr-input identisch aussehen?

Sempervivum · 22.01.2022

Gibt es eine Möglichkeit, das Label "Please enter a claim number" genau so anzupassen wie #meldungsnr-input? Anzupassen in Sachen Schriftart und -größe, damit das Laber und die #meldungsnr-input identisch aussehen?

Ja, Du kannst die Eigenschaften der Schrift für beide gleichzeitig einstellen:

Code:

label, input {
    font-size: x-large;
    font-family: Arial;
}

Sempervivum · 22.01.2022

So, ich habe das Speichern im Localstorage implementiert und es funktioniert so weit:

Code:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weblink to IQOS Notification</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <style>
        #meldungsnr-input {
            border: 2px solid green;
            outline: none;
            font-size: 1em;
            width: 5em;
        }

        /* Ist die Eingabe ungueltig machen wir den Rahmen grau: */
        #meldungsnr-input:invalid {
            border: 2px solid grey;
        }
    </style>
</head>

<body>
    <label>
        Please enter a claim number:
        <!-- Eingabefeld fuer die Meldungsnummer
        Diese muss eingegeben werden, daher das Attribut "required"
        Sie muss numerisch sein, daher das Pattern fuer
        "mindestens eine Ziffer" -->
        <input id="meldungsnr-input" list="datalist-claimnr" required pattern="[\d+]{6}" maxlength="6" ,
            title="Please enter a valid claim number" autofocus="autofocus" placeholder="" autocomplete="off">
    </label>
    <datalist id="datalist-claimnr"></datalist>
    <script>
        const
            maxOptions = 3,
            url = 'https://die-url-vor-meldungsnummer';

        // Zuvor eingegebene Claimnumbers aus dem Localstorage lesen
        // und die Optionen der Datalist generieren:
        const jsonNr = localStorage.getItem('claimnumbers')
        if (jsonNr) {
            const nrArray = JSON.parse(jsonNr);
            nrArray.forEach(nr => {
                insertOption(nr);
            });
        }

        // Eventlistener fuer Tastendruck registrieren:
        document.getElementById('meldungsnr-input').addEventListener('keypress', event => {
            // Wurde die Enter-Taste gedrückt und ist die Eingabe fehlerfrei?
            if (event.key === "Enter" && event.target.validity.valid) {
                // Meldungsnummer aus dem Eingabefeld holen
                // Sicherheitshalber entfernen wir fuehrende und folgende
                // Leerzeichen durch Aufruf von trim:
                const meldungsnr = event.target.value.trim(),
                    // vollstaendige URL zusammen bauen:
                    urlComplete = url + meldungsnr + '.de';
                console.log(urlComplete)
                insertOption(meldungsnr);
                event.target.value = '';
                // und aufrufen:
                location.href = urlComplete;
            }
        });

        // Neue Option in Datalist eintragen:
        function insertOption(nr) {
            const datalist = document.getElementById('datalist-claimnr');
            // Die Option erzeugen und in die Datalist eintragen:
            const newOption = new Option(nr);
            datalist.prepend(newOption);
            // Array mit Claimnumbers in Localstorage eintragen:
            const options = document.querySelectorAll('#datalist-claimnr option');
            let nrArray = [];
            options.forEach(opt => {
                nrArray.push(opt.textContent)
            });
            localStorage.setItem('claimnumbers', JSON.stringify(nrArray));
            console.log(nrArray)
        }
    </script>
</body>

BTW: Wenn bei euch Englisch die bevorzugte Sprache ist, wäre es vielleicht angebracht, auch die anderen Variablennamen, IDs etc. auf Englisch umzuändern.

Sami9898 · 22.01.2022

Es funktioniert!! Vielen vielen Dank!
Ich möchte nur die letzten eingegebenen Meldungsnummer angezeigt haben, beispielsweise die letzten 3.
Hast du das mit maxOptions = 3 versucht auszuführen? Das schlägt bei eingabe nach mehrerer Meldungsnummer nicht an.

Sami9898 · 23.01.2022

Mir ist auch aufgefallen, dass beim eingeben mehrerer Meldungsnummern die gleichen Eingaben mehrmals angezeigt werden(siehe Screen). Gibt es dafür auch eine Möglichkeit, dass nur eine Meldungsnummer angezeigt wird und nicht drei?

Sempervivum · 23.01.2022

Beides sind noch offene Punkte, die sich leicht erledigen lassen. Aber für heute ist es erst Mal spät genug.

Sempervivum · 23.01.2022

Guten Morgen,
ich habe jetzt auch diese beiden offenen Punkte berücksichtigt:

Code:

    <script>
        const
            maxOptions = 3,
            url = 'https://die-url-vor-meldungsnummer';

        // Zuvor eingegebene Claimnumbers aus dem Localstorage lesen
        // und die Optionen der Datalist generieren:
        const jsonNr = localStorage.getItem('claimnumbers'),
            datalist = document.getElementById('datalist-claimnr');
        if (jsonNr) {
            const nrArray = JSON.parse(jsonNr);
            nrArray.forEach(nr => {
                // Die Option erzeugen und in die Datalist eintragen:
                const newOption = new Option(nr);
                datalist.appendChild(newOption)
            });
        }

        // Eventlistener fuer Tastendruck registrieren:
        document.getElementById('meldungsnr-input').addEventListener('keypress', event => {
            // Wurde die Enter-Taste gedrückt und ist die Eingabe fehlerfrei?
            if (event.key === "Enter" && event.target.validity.valid) {
                // Meldungsnummer aus dem Eingabefeld holen
                // Sicherheitshalber entfernen wir fuehrende und folgende
                // Leerzeichen durch Aufruf von trim:
                const meldungsnr = event.target.value.trim(),
                    // vollstaendige URL zusammen bauen:
                    urlComplete = url + meldungsnr + '.de';
                console.log(urlComplete)
                insertOption(meldungsnr);
                event.target.value = '';
                // und aufrufen:
                location.href = urlComplete;
            }
        });

        // Neue Option in Datalist eintragen:
        function insertOption(nr) {
            const datalist = document.getElementById('datalist-claimnr');
            // Array mit Claimnumbers aus den Optionen erzeugen:
            // nrArray = [];
            nrArray = Array.from(document.querySelectorAll('#datalist-claimnr option'))
                .map(item => {
                    return item.textContent;
                });
            // Ist die neue Nummer noch nicht darin?
            if (!nrArray.includes(nr)) {
                // Neue Nummer am Anfang hinzu fuegen:
                nrArray.unshift(nr);
            }
            // Ist jetzt die max. Anzahl der Elemente ueberschritten?
            if (nrArray.length > maxOptions) {
                // Das letzte Element entfernen:
                nrArray.pop();
            }
            // Jetzt das Array in Localstorage eintragen:
            localStorage.setItem('claimnumbers', JSON.stringify(nrArray));
            console.log(nrArray)
        }
    </script>

Sami9898 · 23.01.2022

Okey, nun erscheinen immer die letzten 9 eingetragenen Meldungsnummern.

Zwei Sachen sind mir dabei noch aufgefallen:
Wenn eine Meldungsnummer bereits eingetragen wurde, also wenn sie eine von den 8 Optionen ist und ich wieder diese Meldungsnummer eingebe und fortführe, erscheint sie beim nächsten mal nicht ganz oben als zuletzt eingetragen, sondern bleibt auf ihre Position von den 98Optionen stehen.

Beispiel:

Ich habe so ein wenig herum gespielt: Wenn ich nun bspweise die letzte Meldungsnummer, die 741852, oben eintrage und das Programm ausführe, erscheint sie beim nächsten mal nicht oben als "zuletzt eingegeben", sondern bleibt auf ihre 8. Position fest. Es scheint die letzten 8 eingegebenen Meldungsnummern zu zählen, wenn sie dann wieder aufgerufen werden springen Sie aber nicht nach ganz oben als absolut zuletzt eingegeben.

Das zweite:

Wenn ich jetzt wie hier 18 eingebe, schlägt er mir die Meldungsnummer 741852 an. Logisch wäre es, wenn er nicht eine Zahlenfolge in der Meldungsnummer vorschlage, sondern eine Zahlenfolge von links nach rechts. Also wenn ich nur 18 eingebe, soll er mir alle vorherigen Meldungsnummern mit "18" am Anfang vorschlagen.

Das ist Kosmetik, ich weiß nicht ob du das auch hinkriegst. Das localStorage muss ich mir mal in Ruhe im Detail anschauen.

scatello · 23.01.2022

Sami9898 schrieb:
ich weiß nicht ob du das auch hinkriegst

Ehrlich gesagt finde ich das etwas unverschämt. Du hast eine gute Lösung kostenlos geliefert bekommen und hast selber herzlich wenig dafür getan. Wie wäre es denn mit etwas Eigeninitiative? Zumal

Ich habe auf der Arbeit eine Aufgabe bekommen

Also du.

Weblink automatisch anpassbar mit Eingabefeld

Sempervivum​

Weblink automatisch anpassbar mit Eingabefeld

Sempervivum