HTML input ausgeben?
Hallo Community,
ich habe einen Code für eine Webseite mit HTML geschrieben.
Nun ist es so, das ich den input von vier Feldern, welche sich oben auf der Webseite befinden, unten auf der Webseite angezeigt haben möchte. Ich habe schon viele Möglichkeiten im Internet gefunden, aber keine wollte so richtig funktionieren. Kann mir hier jemand bei meinem Problem helfen?
Bei dem Code kann ich euch nur einen Ausschnitt, nämlich den mit den betreffenden Teilen reinschicken, da die Frage sonst zu lang ist.
MfG Kuchenmonster31
Teilcode:
Feedbackwebsite
<form class="Formular" action="datenbank für website.py" method="post">
Vorname:
<input type="text" name="vorname" size="30" maxlength="50">
</form>
<!-- Nachname -->
<form class="Formular" action="datenbank für website.py" method="post">
Nachname:
<input type="text" name="nachname" size="30" maxlength="50">
</form>
<!-- Fedback für Coding School -->
<form class="Formular" action="datenbank für website.py" method="post">
Feedback für die<br> Coding School:
<textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Feedback für Website -->
<form class="Formular" action="datenbank für website.py" method="post">
Anmerkung zur <br> Website:
<textarea type="text" name="vorname" size="30" maxlength="1000"></textarea>
</form>
<!-- Button damit die eingabe unten auf der Website angezeigt wird: -->
<button class="Button">Formular abschicken</button>
<h4 class="Ausgabe">Ausgabe:</h4>
3 Antworten
https://jsfiddle.net/vx5d1sk2/3/
Nur für den Vornamen. Die anderen Felder müsstest du selbst machen
Danke für deine Hilfe ich gucke, ob ich das auch auf die anderen übertragen kann.
Entweder du lässt dasselbe HTML-Dokument von deinen Python-Handlern wieder zurückschicken (nur diesmal mit den Eingaben ergänzt) oder du regelst die Angelegenheit mit JavaScript.
Bei Letzterem wäre einmal die Frage, ob die Daten tatsächlich zum Server (also deinen Python-Skripten) geschickt werden müssen oder nicht.
a) Die Daten sollen auch zum Server:
Hänge einen Handler an das submit-Event und verschicke in dem die Daten.
Beispiel für ein Formular:
<form id="some-formular">
<label for="firstname">Vorname:</label>
<input id="firstname" maxlength="50" name="vorname" size="30">
<output id="output"></output>
</form>
<script>
const output = document.getElementById("output");
document.getElementById("some-formular").addEventListener("submit", evt => {
evt.preventDefault();
const formData = new FormData(evt.currentTarget);
fetch("/someScript", {
method: "post",
data: new URLSearchParams(formData)
}).then(() => {
output.textContent = `Vorname: ${formData.get("vorname")}`;
});
});
</script>
Ob du dabei nun auf die Antwort des Servers wartest (then-Callback) oder die Daten einfach direkt nach dem fetch-Aufruf in dein Dokument schreiben lässt, ist vermutlich egal.
Für die Ausgabe benötigst du auf jeden Fall ein Element, auf welches sich eindeutig referenzieren lässt. In dem Beispiel ist ein output-Element mit ID.
b) Die Daten sollen wirklich einfach nur nochmal ausgegeben werden:
Dafür könnte man das obige Beispiel als Grundlage nehmen und bräuchte nur einiges wegkürzen.
<form id="some-formular">
<label for="firstname">Vorname:</label>
<input id="firstname" maxlength="50" name="vorname" size="30">
<output id="output"></output>
</form>
<script>
const output = document.getElementById("output");
document.getElementById("some-formular").addEventListener("submit", evt => {
evt.preventDefault();
const formData = new FormData(evt.currentTarget);
output.textContent = `Vorname: ${formData.get("vorname")}`;
});
</script>
Detaillierte Informationen zu fetch, FormData, addEventListener, etc. findest du auf MDN.
Du bräuchtest auch einen Empfänger für HTTP-POST. Zeig mal Dein "datenbank für website.py".
oh habe ich ganz vergessen rauszuschreiben. Diese existiert nicht, weil es nicht geklappt hat. Sry. MfG