Ich habe eine Tabelle, welche durch einen Button um jeweils einen Eintrag erweitert werden soll. Das hat bisher Problemlos Funktioniert. Seitdem ich jedoch einen HTTP Request eingebaut habe um die Daten an den Server zu senden, funktioniert diese nicht mehr.
Code
<body id="firstBody">
<div id="focus"></div>
<div id=formBody>
<label id="überschrift" for="überschrift">Bitte legen Sie einen Vorlesungstermin fest
</label>
<label id="Termindatum" for="termindatum">Datum
<input id="lbDatum" type="date" name="termindatum" placeholder="04.03.2020">
</label>
<label id="Terminbezeichnung" for="terminbezeichnung">Bezeichnung:
<input id="lbTerminbezeichnung" type="text" name="terminbezeichnung" placeholder="Statistik" maxlength="30">
</label>
<label id="Start" for="start">Von:
<input id="lbStart" type="time" name="start" min="08:00" max="16:00" value="09:00">
</label>
<label id="Ende" for="ende">Bis:
<input id="lbEnde" type="time" name="ende" min="11:00" max="19:00" value="12:15">
</label>
<label id="Kursbezeichnung" for="kursbezeichnung">Kurs:
<input id="lbKursbezeichnung" type="text" name="kursbezeichnung" placeholder="WWI2020C" maxlength="10">
</label>
</div>
<script>
const url='http://localhost8080/test.html';
const data={
name: "Tabelle",
id: tab
}
$('.btn').click(function(){
$.post(url,data, function(data, status){
console.log(`${data} and status is ${status}`)
var formularBody = $("#formBody").html()
.send("#lbDatum")
.send("#lbTerminbezeichnung")
.send("#lbStart")
.send("#lbEnde")
.send("#lbKursbezeichnung");
$("#firstBody").html(formularBody);
var thetbody = $("#tbodytab");
});
})
function clone_this() //Create / Set Methode für neue Tabellenzeile mit übergebenen Datensätzen
{
var tbody = document.querySelector('#tab tbody');
// neue Tabellenzeile durch Klonen der letzten erzeugen
newRow = tbody.lastElementChild.cloneNode(true);
// und an Ende in den tbody einfuegen
tbody.appendChild(newRow);
// Eingabefelder in der neuen Tabellenzeile bereit stellen
var dstInputs = newRow.querySelectorAll('input');
for (j = 0; j < dstInputs.length; j++) {
// Quell-Eingabefeld bereitstellen
var srcInput = document.getElementById('lb' + dstInputs[j].name);
// und den Wert daraus in das Eingabefeld
// in der neuen Tabellenzeile uebertragen
dstInputs[j].value = srcInput.value;
}
}
</script>
<table id="tab" border="2">
<tbody id="tbodytab">
<tr>
<td width=" 160"><input type="text" name="Datum" value="Datum" readonly></td>
<td width="60"><input type="text" name="Start" value="Von" readonly></td>
<td width="60"><input type="text" name="Ende" value="Bis" readonly></td>
<td width="160"><input type="text" name="Terminbezeichnung" value="Modulbezeichnung" readonly></td>
<td width="160"><input type="text" name="Kursbezeichnung" value="Kursbezeichnung" readonly></td>
<td width="75"><input type="button" id="löschen" value="Löschen"></td> <!-- Delete Methode für Buttton an DB -->
</tr>
</tbody>
</table>
<input type="button" id="erstellen" value="Festlegen" onclick="clone_this()">
</body>Verwende zum ersten mal HTTP Requests und bin mir dementsprechend auch nicht bezüglich der Richtigkeit bewusst.
Danke schon mal für die Hilfe