JavaScript: Text nach Button-Klick in Textfeld?
Ich habe so eine Seite :
<li class="items">
<p>some text 1</p>
<div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
<p>some text 2</p>
<div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
<p>some text 3</p>
<div><button class="link" value="3">Wählen</a></div>
</li>
<form action="send" method="POST">
<input type="text" name="text" id="text" required>
<input type="number" name="zahl" id="zahl">
<button type="submit" name="submit">Senden</button>
</form>
oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.
Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.
2 Antworten
1) Beseitige erst einmal deine Markupfehler.
Das button-Element benötigt noch einen schließenden Tag. Der Endtag für das a-Element kommt dafür raus. Das gilt für alle deine Menüeinträge.
<div>
<button class="link" type="button" value="1">Wählen</button>
</div>
Als Typ für den Button wäre button passend, denn es werden bei Klick ja keine Daten direkt an den Webserver verschickt.
Die Zieladresse für dein Formular (action-Attribut) scheint zudem keine tatsächliche URL zu sein.
2) Jeder der Buttons bekommt einen Handler für das Klickereignis zugeordnet. In diesem wird der Buttonwert ausgelesen und dann in das Eingabefeld gesetzt.
const numberField = document.getElementById("zahl");
const buttons = document.querySelectorAll(".link");
for (const button of buttons) {
button.addEventListener("click", function() {
numberField.value = this.value;
});
}
Am besten mit jquery. Hier die Lösung: https://www.w3schools.com/jquery/jquery_dom_set.asp