Frage Formular mit get Method auf andere Webseite

[otubanjo]

Hallo Leute,

ich habe folgendes Problem: als Beispiel werde ich die Seite Google (könnte aber auch jede x-beliebe seite sein) nehmen.

Ich will ein Formular erstellen mit einen Suchfeld und einen Bestätigungsfeld. Als Beispiel würde ich das Wort Affe in das Suchfeld eingeben und als Ergebnis sollte "https://www.google.de/#q=affe" sein.

Das ist soweit mein Code:

<form id="google" method=get>
      <label for="suche">Was wird gesucht:<br>
        <inputtype="text" name="/#q"><br>
      </label>
<input type="submit" value="Submit"> <-und hier müsste ja der sprung irgendwie zu google kommen 
</form>

aber ich kapiere nicht, wie mit submit auf www.google.de komme, weil erst durch eine Eingabe wird ja das "/#q" hinzugefügt (und danach ein "=" plus das Wort was ich im Feld eingegeben habe, in diesem Fall Affe...hab ich zumindest so jetzt kapiert, wenn man get benutzt).
Ich finde auch nichts über Google, wie ich von meiner erstellten Webseite zu einen anderen Webseite komme plus das "/#q=affe".

Ich hoffe Ihr könnt mir helfen bzw. versteht, was ich von Euch will, da ich seit fast jetzt 8 Stunden danach suche und mein Kopf langsam matsche ist.

 

[Tronjer]

Und woher soll dein Formular mangels Action-Attribut erraten, was du eigentlich willst, anhand der ID?

Du benötigst ein JavaScript Event, welches bei submit() den Value des Input-Feldes ausliest, mittels Stringverknüpfung die URL baut und damit einen Redirect zu Google ausführt.

 

[Arne Drews]

Öhöm... In HTML5 ist das action-Attribut optional.
Das entspricht quasi dem Affen-Formular-Verfahren... :)

Gruß Arne

 

[Tronjer]

So betrachtet wäre das method-Attribut bei einem GET-Request auch überflüssig. ;)

 

[Arne Drews]

Ja... Wobei da der Form halber auch die Quotes fehlen würden, wenn es schon angegeben wird...

 

[otubanjo]

Also vorne hinweg: danke für die zahlreichen antworten, manche Foren scheinen wohl doch noch nicht tot zu sein;)

also ich habe mal n bisschen rumprobiert und kam zum folgendes Ergebnis, was auch klappt:

<FORM method=GET action="http://www.google.com/search">
<input type=text name=q size=31 maxlength=255 value="">
<input type=submit name=btnG VALUE="Google Suche"><p>

aber ich kriege es nur mit google hin und bei anderen Seiten ist ein Hänger bei mir. Also ich nehme jetzt als Beispiel Xing, wenn ich da einen Member suche. Es müsste, wenn ich jetzt angenommen Harald nehme. Das Ergebnis "https://www.xing.com/search/members?hdr=1&keywords=harald" kommen mein Ergebnis sieht wie folgt aus:

www.xing.com/search/members?hdr%3D1%26keywords=harald

wie ihr sehen könnt, nimmt er die Sonderzeichen nicht mit, wie könnte ich das beheben? mein code für das xing beispiel:

<FORM method=GET action="https://www.xing.com/search/members">
<input type=text name=hdr=1&keywords size=31 maxlength=255 value="">
<input type=submit><p>

 

[Arne Drews]

Vielleicht endlich mal DoubleQuotes für die Attribute verwenden?!

 

[otubanjo]

Sorry, da ich eher n leihe bin, versteh ich nicht, was du damit meinst. kannst mir das genauer erklären oder n link dazu schicken?

 

[B3nnoX]

<input type=text name=q size=31 maxlength=255 value="">

name, size, maxlength und value sind attribute. Und Arne Drews meinte, dass du " setzen sollst.
Also so

<input type="text" name="q" size="31" maxlength="255" value="">

 

[Tronjer]

Laie hat nichts mit leihen zu tun. :(

Die Aufgabe ist übrigens nicht ganz so simpel, wie sie auf den ersten Blick erscheint, weil es mehrere use cases gibt:

- Der User könnte nichts in das Input-Feld eingeben
- Der User könnte ausschließlich Whitespaces eingeben
- Der User könnte ein Wort eingeben
- Der User könnte mehrere Wörter eingeben
- Der User könnte leading oder trailing Whitespaces mit seinem Suchbegriff eingeben

Hier ein Script in Vanilla JS, das diese Fälle berücksichtigt:

<form action="irgendwas" id="my-form">
  <input type="text">
  <button type="submit">Klick mich</button>
</form>
<script>
  (function() {
    String.prototype.trim = function() {
      return this.replace(/^\s+|\s+$/g, "");
    };

    document.querySelector('#my-form').addEventListener('submit', function(event) {
      event.preventDefault();
      var input_val = document.querySelector('input').value,
          uri = 'https://www.google.de/search?q=';

      if (input_val.length > 0 && /[^\s]/.test(input_val)) {
        var term = input_val.trim();

        if (term.match(/\s|'/)) {
          term = term.replace(/ /g, '+');
        } else {
          term = term;
        }
      } else {
        alert('Bitte Suchbegriff eingeben');
      }
      window.location.href = uri + term;
    });
  })();
</script>

 

[otubanjo]

Dankeschön! Das bringt mich um einiges weiter. Ist es noch möglich durch den klick ein neues Fenster zu öffnen? Da ich jetzt nicht weiß, ob man jetzt mit html oder js weiterarbeiten muss, frag ich hier noch einmal. Hab es mit "window.open='function()'" bei Button versucht, aber dann hat sich wieder alles zerschossen.

 

[Tronjer]

Du könntest anstelle von window.location.href ein window.open setzen. Allerdings besteht bei open() die Möglichkeit, dass es vom PopUp-Blocker des Browsers unterbunden wird.

Ich würde es deshalb konzeptionell umstellen und statt des Submit-Buttons einen Hyperlink mit target="_blank" setzen, dessen href-Attribut mit dem Suchlink belegt wird. Solltest du eine fertige Lösung wünschen, musst du dich allerdings an die Jobbörse wenden.

 

[otubanjo]

Vielen Dank für die rasche Antwort. Ich werde es versuchen umzusetzen und danke für den Tipp mit der Jobbörse!