2 Input Felder => Value auslesen & Value in den href-Atributt schreiben.

Gnah · 24. November 2009, 22:07

Hallo Leute.

Hab eine Frage, und zwar wie kann ich 2 InputFelder auslesen und die Daten in einen href-Atributt schreiben.

Beispiel:

<input type="text" name="nummer1" /><br />
<input type="text" name="nummer2" /><br />
<a href="index.php?p=test&search=NUMMER1+leerzeichen+NUMMER2" />Klick mich</a>

Die Eingaben sollen in Echtzeit zu dem href-Atribut hinzugefügt werden.

Jemand einen Vorschlag?

Deadman44 · 24. November 2009, 22:34

Also da würde mir im Moment nur JavaScript einfallen. Damit könntest du die Werte der Input Felder auslesen und mit onclick-event dem href-attribut anhängen. Um die Werte auszulesen und zu schreiben solltest du dich mit JS + DOM befassen.

Torben Brodt · 25. November 2009, 08:08

Aber warum willst du überhaupt so verrückte sachen machen? Du kannst auch mit einem normalen link ein html formular abschicken.
Das geht so:

Quellcode

href="document.getElementById('deineid').submit()"

Gnah · 25. November 2009, 19:26

Nein.
Wieso verrückt..? weil es sein muss ^^!
Also in die erste Box wird zB. ein Vorname und in der zweiten ein Nachname eingegeben.
Und wenn man auf den link/button/oä klickt, soll zB. in der Datenbank nach "Vorname Nachname" gesucht werden, und was ausgelesen werden.

Will halt die beiden eingeben die der User macht kombinieren und damit dann weiterarbeiten.

Torben Brodt · 25. November 2009, 19:34

also in eine Variable? ich würde das ehrlich gesagt serverseitig zusammensetzen.
Ansnsten hier nochmal mein komplettes Beispiel mit klickbarem Formular Absenden:

Quellcode

<form method="get" id="foo">
<input type="text" name="hidden" name="p" value="test"/><br />
<input type="text" name="nummer1" /><br />
<input type="text" name="nummer2" /><br />
</form>
<a href="#" onclick="document.getElementById('foo').submit()">Klick mich</a>

ansonsten die Lösung wie du sie willst (wie ich sie aber nicht so gut finde)

Quellcode

<a href="index.php?foo&query=" onclick="this.href+=document.getElementById('foo').nummer1.value+' '+document.getElementById('foo').nummer2.value; ">Klick mich</a>

Gnah · 25. November 2009, 20:44

Die erste Methode wird bei meinem vorhaben leider nicht klappen =/

Die zweite spricht mich eher an. Nur leider passiert da rein gar nichts. Ich vermute mal wenn der User was eingibt, das nicht direkt gespeichert wird.
Oder irre ich mich da?

€:/ Hab schon eine Vorgabe für den Atributt "value" gemacht aber es klappt trodztem nicht. Eine Idee?

Torben Brodt · 25. November 2009, 21:20

Eingabe? Speichern?
Nein, der Link wird erst umgeschrieben, wenn man auf den Link klickt. Mein Beispiel klappt und ist komplett.
So wird der Link bei einer Eingabe von "aaa" zu localhost/index.php?foo&query=aaa

Gnah · 25. November 2009, 21:27

Leider ist das ganze bei mir leer =/
Könntest du vll mal den Code für die Inputs posten?
Vielleicht habe ich nen Denkfehler oder so gemacht.

Torben Brodt · 25. November 2009, 21:45

Die Codes aus meinem Beispiel gehören zusammen... :whistling:

Gnah · 25. November 2009, 22:00

<input type="text" name="nummer1" id="fooa" /><br />
<input type="text" name="nummer2" id="foob" /><br />

<a href="index.php?foo&query=" onclick="this.href+=document.getElementById('fooa').nummer1.value+' '+document.getElementById('foob').nummer2.value; ">Klick mich</a>

Query bleibt immer leer. Keine Ahnung wieso

Torben Brodt · 25. November 2009, 22:06

warum kopierst du nicht einfach meinen Code ;)
Ein input ohne form ist meines Wissens nach sowieso kein gültiges HTML. Der Fehler bei dir ist das überflüssige Adressieren über die Formularelement-Namen.

Ich würde dir außerdem mal empfehlen Firebug zu installieren, dann siehst du die JavaScript Fehler sofort.

Dominic · 26. November 2009, 06:44

Hey,

mich würde allerdings noch interessieren, wieso du die empfohlene Methode nicht anwenden kannst?

Gnah · 26. November 2009, 14:22

Weiss nicht mehr was da genau nicht ging.
Hab das ganze jetzt umgebaut. Basiert aber auf dem zweitem Prinzip, dass d0nut gepostet hat.

btw, hab leider noch ein Problem.

document.getElementById('foo').innerHTML = document.getElementById('bar');

Das sollte eigentlich den content aus dem div-Element mit der id "bar" holen .. Nur leider bekomme ich die ganze Zeit folgendes eingetragen => "[object HTMLDivElement]".

Jemand ne Idee?
Javascript ist echt nicht mein Ding also nicht wundern

Deadman44 · 26. November 2009, 16:38

Quellcode

document.getElementById('foo').innerHTML = document.getElementById('bar').innerHTML;

so würde ich es machen, habe es jetzt aber nicht getestet.

Gnah · 26. November 2009, 16:59

Und der meister hat gesprochen.
Nice danke

2 Input Felder => Value auslesen & Value in den href-Atributt schreiben.

2 Input Felder => Value auslesen & Value in den href-Atributt schreiben.

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags