[ERLEDIGT] Buttons sollen den Text im Searchfeld nutzen (links) und das Searchfeld soll mithilfe von Enter in Google suchen.

[John the fishermen]

Hallo zusammen,
ein guter Kumpel von mir hat eine html seite zusammen geschustert und wir üben zusammen dadurch wie wir eine simple startseite bauen können die mit einem Javascript versehen ist. Wir grübeln schon seit Tagen nach einem folgenden Problem und wissen nicht wie wir es lösen können.

Javascript

function openUrlGeizhals()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://geizhals.de/?fs=";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location oder .open = url damit es im selben Fenster geöffnet wird*/
}

function openUrlIdealo()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://www.idealo.de/preisvergleich/MainSearchProductCategory.html?q=";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location oder .open = url damit es im selben Fenster geöffnet wird*/
}

function openUrlDict()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://www.dict.cc/?s=";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location oder .open = url damit es im selben Fenster geöffnet wird*/
}


function openUrlGoogle()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://www.google.de/search?q=";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location oder .open = url damit es im selben Fenster geöffnet wird*/
}

function openUrlAmazon()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://smile.amazon.de/s?k=";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
}

function openUrlGoogleNews()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://news.google.com/search?q=";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
}

function openUrlKleinanzeigen()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://www.ebay-kleinanzeigen.de/";
    

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;
    url += url2;

    //Such URL aufrufen
    window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
}

function openUrlWikipedia()
{
    //Formulardaten auslesen und in Variablen speichern
    let suche = document.FORM.suchtext.value;
    let url = "https://de.wikipedia.org/wiki/";

    //Suchdienst URL und Suchbegriff zusammen bringen
    url += suche;

    //Such URL aufrufen
    window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
}

    function openUrlGoogleMaps()
    {
        //Formulardaten auslesen und in Variablen speichern
        let suche = document.FORM.suchtext.value;
        let url = "https://www.google.de/maps/";

        //Suchdienst URL und Suchbegriff zusammen bringen
        url += suche;

        //Such URL aufrufen
        window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
    }

    function openUrlDeepL()
    {
        //Formulardaten auslesen und in Variablen speichern
        let suche = document.FORM.suchtext.value;
        let url = "https://www.deepl.com/translator#en/de/";

        //Suchdienst URL und Suchbegriff zusammen bringen
        url += suche;

        //Such URL aufrufen
        window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
    }

    function openUrlYouTube()
    {
        //Formulardaten auslesen und in Variablen speichern
        let suche = document.FORM.suchtext.value;
        let url = "https://www.youtube.com/results?search_query=";

        //Suchdienst URL und Suchbegriff zusammen bringen
        url += suche;

        //Such URL aufrufen
        window.open(url); /* alternativ .location = url damit es im selben Fenster geöffnet wird*/
    }

Das Javascript ist für die Buttons zustaendig und gibt auch das wort bzw. den Satz aus den ich im folgenden Searchfeld/Textfeld eingebe:

<!DOCTYPE html>
<html lang="de">
<!-------------------------------------HEAD------------------------------------------------->
<head>
    <meta charset="UTF-8">
    <title>Startseite</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="js/startseite.js"></script>
</head>
    <body>
        <table id="haupt">
    <tr><td><a id="startseite" href="startseite.html"><img src="img/startseite-logo.png" alt="logo"></a></td></tr>
    <tr><form action="#" method="post" name="FORM">
        <td>
                <input type="text" class="haupttext" name="suchtext" id="suchtext" size="30" maxlength="50" hspace="20" vspace="20" placeholder="tes"><br>
                <input type="button" id="googlebutton" class="hauptbutton" name="buttonSucheGoogle" value="Google" onclick="openUrlGoogle();">
                <input type="button" id="googlemapsbutton" class="hauptbutton" name="buttonSucheGoogleMaps" value="Maps" onclick="openUrlGoogleMaps();">
                <input type="button" id="googlenewsbutton" class="hauptbutton" name="buttonSucheGoogleNews" value="News" onclick="openUrlGoogleNews();">
                <input type="button" id="youtubebutton" class="hauptbutton" name="buttonSucheYouTube" value="YouTube" onclick="openUrlYouTube();">
        </td></form>
    </tr>
    <tr><form>

        <td>
                <input type="button" id="wikipediabutton" class="hauptbutton" name="buttonSucheWikipedia" value="Wikipedia" onclick="openUrlWikipedia();">
                <input type="button" id="dictbutton" class="hauptbutton" name="buttonSucheDict" value="Dict.cc" onclick="openUrlDict();">
                <input type="button" id="deeplbutton" class="hauptbutton" name="buttonSucheDeepL" value="DeepL" onclick="openUrlDeepL();">
        </td></form>
    </tr>
    <tr><form>

        <td>
            <input type="button" id="ebaybutton" class="hauptbutton" name="buttonSucheKleinanzeigen" value="Ebay" onclick="openUrlKleinanzeigen();">
            <input type="button" id="amazonbutton" class="hauptbutton" name="buttonSucheAmazon" value="Amazon" onclick="openUrlAmazon();">
            <input type="button" id="geizhalsbutton" class="hauptbutton" name="buttonSucheGeizhals" value="Geizhals" onclick="openUrlGeizhals();">
            <input type="button" id="idealobutton" class="hauptbutton" name="buttonSucheIdealo" value="Idealo" onclick="openUrlIdealo();">
        </td></form>

    </tr>
</table>
    </body>

Das Problem ist das wir nicht durch einen Enter druck den Text in eine Google Suche bekommen und wir sind grad völlig ratlos. Wir haben bspw. es schon mit mit

<FORM method=GET action="http://www.google.de/search" target="_blank">
     <INPUT type=submit name=btnG VALUE="Google Search">

probiert aber dann funktionieren weder die buttons noch die Searchleiste.

Vielen Dank im vorraus

 

[basti1012]

Ich habe deinen Code mal so wie es ist bei getestet und da läuft es.
Wollte das bei codepen als Test einfügen, da geht es aber nicht.

Dann könnte man deinen ganzen Code sicherlich um 80% kürzen.

Oder ohne Javascript.
Zb mit Google

<form action="https://www.google.de/search">
                <input type="text" name="q">
                <input type="submit"  value="Google">
<form>

Kenne deinen ganzen Code/ vorhaben ja nicht , aber Tabellenlayout ist hier vielleicht nicht die beste Wahl

 

[John the fishermen]

Erstmal Vielen lieben dank ich hätte nicht so schnell mit einer Antwort gerechnet sonst hätte ich mich vorher gemeldet. Ich werde es nun auch erstmal bei getestet ( kenne das Programm bzw. die Internetseite nicht) einmal ausprobieren.

Mit den Code kürzen so wie du mir es Beispiel genannt hast werde ich es einmal probieren, weil wenn es ohne JavaScript läuft wäre es super. Da ich selbst nur simples Basic Java kann und mich auch mit dem Skript etwas schwer getan habe. Vielen lieben danke für die Vorschläge.

Und das Tabellenlayout haben wir erstmal nur genommen wegen testzwecken, warum wäre es bspw. nicht die beste Wahl? Gibt es Nachteile?

 

[Gelöschtes Mitglied 36401]

Gibt es Nachteile?

Ja, Stichwort responsive

Tabellen dienen zur Darstellung von tabellarischen Daten, die du aber nicht hast.

 

[John the fishermen]

Ja, Stichwort responsive

Danke, ja das ist ein gutes Stichwort.
Dann müssen wir später eine andere alternative nehmen.

 

[basti1012]

Stichwort html5 mit Flexbox. Da bist du auf der Aktuellen Seite.

 

[John the fishermen]

Danke für eure Hilfe und für die anderen Tipps, das Problem ist gelöst. Wie basti angegeben hat konnte ich in der form und action dann in action den google-search link einfügen und danach einen type submit da drunter setzen.