html Textfeld mit Userinput nutzen um auf neue Internetseite zu gelangen

Esmo · 13.02.2023

Ich habe folgendes Problem. Ich bin auf der Suche nach einer Lösung für meine google sites page. Ich habe nach vielen Lösungsmöglichkeiten gesucht, jedoch nichts gefunden. Ich möchte es so simpel wie möglich gestalten. Über mich: Ich habe soweit keine html Vorkenntnisse.

Ich möchte ein Textfeld mit submit button erstellen in dem eine 8 stellige Zahlenfolge eingegeben wird. Durch den submit button soll man auf eine neue Internetseite in Abhängigkeit der Eingabe gelangen.
Weitere Vorgaben:
- Eingabe required
- 8 Stellen required
- Logik, dass das Ziel immer die feste vorgegebene url + „Eingabe“ sein soll.

Eingabe: 23456789 submit. => neues Ziel: (Bsp) newpage.de/23456789
Eingabe: 13243546 submit. => neues Ziel: (Bsp) newpage.de/13243546

Ich hoffe, dass ihr mir helfen könnt.

scatello · 13.02.2023

Esmo schrieb:
Ich habe soweit keine html Vorkenntnisse.

Ohne dem geht es aber nicht, da wirst du dir wohl mal die Grundlagen aneignen müssen. Und mit HTML alleine wirst du hier wohl auch nicht zum Ziel kommen.

Esmo · 13.02.2023

Danke dir schon einmal für dein Feedback. Du hast da recht und das werde ich auch bestimmt. Ich habe genau aus diesem Grund euch, die Profis, um Hilfe gebeten.
Ich habe zuvor ein Suchfeld genutzt und habe die URL geändert. Jedoch fügt die Suche immer wieder Zeichen in der Adresszeile ein, sodass nicht genau die korrekte URL rauskommt die ich benötige.

Diese Funktion würde ich für eine Art Anmeldeseite für die Gäste meiner Hochzeit benötigen

scatello · 13.02.2023

Esmo schrieb:
Ich habe zuvor ein Suchfeld genutzt und habe die URL geändert. Jedoch fügt die Suche immer wieder Zeichen in der Adresszeile ein

Du sprichst in Rätseln. Was für ein Suchfeld und was für Zeichen und wo?

Esmo · 13.02.2023

unter anderem solch ein Code "siehe unten". Dieser sucht in Abhängigkeit auf einer Eingabe... So bin ich darauf gekommen, den Code zu ändern, das Textfeld als Variable zu nutzen und damit eine gewisse URL zu generieren...

HTML:

<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="">
<input autocomplete="on" class="form-control search" name="q" placeholder="Testcode" required="required"  type="text">
<button class="button" type="submit">Search</button>
</form>

Sempervivum · 13.02.2023

Nach der Beschreibung in deinem Eingangsposting müsste dies deine Anforderung erfüllen:

Code:

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

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic action in form</title>
    <style>
        #numeric-input {
            outline: none;
            border: 2px solid red;
        }

        #numeric-input:valid {
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <form method="post">
        <input type="text" id="numeric-input" pattern="^[0-9]{8}$" required>
        <input type="submit" value="Los!">
    </form>
    <script>
        // Basis-URL bereit stellen:
        const url = 'https://deine-url/';
        // Eventhandler für Eingabe im Eingabefeld registrieren:
        document.getElementById('numeric-input').addEventListener('input', event => {
            // Attribut "action" auf die vollständige URL setzen:
            document.querySelector('form').action = url + event.target.value;
        });
    </script>
</body>

</html>

basti1012 · 13.02.2023

Was hat das den mit Userscript zu tun?
Willst du den Button irgendwo auf einer Fremdseite einbauen?
Oder soll der Button nur auf deiner Seite sein?

Den Code von @Sempervivum kannst du auf deiner Seite so einbauen wie er gepostet hat .
Willst du ihn über Userscript irgendwo auf einer Seite einbinden, musst du noch paar Kleinigkeiten ändern.
Das ist aber auf jeder Seite etwas anders , je nachdem wo der Button auf der Seite sichtbar sein soll

Esmo · 14.02.2023

Danke @Sempervivum für deine tolle Arbein und Mühe. Und danke @basti1012 für deine Überprüfung und dein Go. Ihr seid super!!!!

Es funktioniert tadellos, wenn ich von google sites auf eine externe website verlinke. Wenn ich jedoch eine google sites URL verwende, dann kommt ein Fehler 400. Die URL in der Adresszeile ist korrekt, denn wenn ich die mit Enter bestätige bzw die Seite neu Lade, erscheint die richtige Seite und kein Fehler ist mehr sichtbar. Woran kann das liegen, dass es nur bei google nicht geht?

Sempervivum · 14.02.2023

Möglicher Weise stört sich Google-Sites an dem POST-Parameter, der beim Abschicken des Formulars mit geschickt wird. Versuche testweise dieses:

Code:

    <script>
        location.href = 'https://deine-url/12345678';
    </script>

mit einer gültigen URL und einem gültigen Zahlencode.

Esmo · 14.02.2023

Ich habe den Skriptteil ausgetauscht... diese Darstellung (Bild) kommt anstatt des Textfeldes... bei folgendem location.href = 'https://sites.google.com/view/........../'; (die ..... durch die finale URL ersetzt) bei dem folgenden Code
Zudem habe ich unterschiedliche URLs probiert. bei den einen erscheint entweder die gleiche Darstellung wie der Anhang, bei anderen URLs (wie planepictures.net) erscheint gleich das Bild der gewählten website. Ich habe jedoch auch den Code bei einem html tryit editor von w3schools probiert. Hier zeigt sich leider das gleiche Problem.

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

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic action in form</title>
<style>
#numeric-input {
outline: none;
border: 2px solid red;
}

#numeric-input:valid {
border: 2px solid green;
}
</style>
</head>

<body>
<form method="post">
<input type="text" id="numeric-input" pattern="^[0-9]{8}$" required>
<input type="submit" value="Los!">
</form>
<script>
location.href = 'https://sites.google.com/view/........../';
</script>
</body>

</html>[/CODE]

Sempervivum · 14.02.2023

Kann es sein, dass die betr. Site privat sind, so dass die Aussage von steegles hier zutrifft?
https://support.google.com/sites/thread/17917160/404-error-when-accessing-a-google-sites-page?hl=en

Esmo · 14.02.2023

ich habe jedoch keinen Fehler 404 sondern 400.
ich habe die Einstellungen überprüft und mir ist nichts ungewöhnliches aufgefallen.

Sempervivum · 14.02.2023

Oh, das war mir entgangen, dass es ein Fehler 400 war und nicht 404.
Vielleicht mal im Forum von Google selbst nachfragen?