<table width="1000" border="1">
<tr>
<td>Pos:</td>
<td>Menge:</td>
<td>Einheit:</td>
<td>Artikel:</td>
<td>MwSt:</td>
<td>Netto:</td>
<td>Gesamt:</td>
<td>Optionen:</td>
</tr>
<? // ----- Hier stehen die Positionen ?>
<script>
document.getElementById('tr-select-article')
.insertAdjacentHTML('beforebegin', htmlArticle);
</script>
<tr>
<td colspan="8">
<select id="tr-select-article" style="textbox" name="">
<option value="artikel">Artikel wählen:</option>
<?php
foreach($artikels as $artikel) {
echo '<option value="'.$artikel['id'].';'.$artikel['name'].';'.$artikel['kurz'].';'.$artikel['einheit'].';'.$artikel['preis_netto'].';'.$artikel['lang'].' ">'.$artikel['name'].'</option>';
}
?>
<input type="button" id="erstellen" value="Eintragen"></td>
</tr>
</table>
<template id="tpl-article">
<tr>
<td><input type="text" size="10" id="ArtikelId" name="id" value="{{artikel-id}}"></td>
<td><input type="text" size="10" id="ArtikelMenge" name="menge" value="{{menge}}"></td>
<td><input type="text" size="10" id="ArtikelEinheit" name="id" value="{{einheit}}"></td>
<td><input type="text" size="50" id="ArtikelName" name="name" value="{{name}}"></td>
<td><input type="text" size="10" id="ArtikelMwSt" name="mwst" value="19"></td>
<td><input type="text" size="20" id="ArtikelNetto" name="netto" value="{{preis_netto}}"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td><input type="text" size="50" id="ArtikelKurz" name="kurz" value="{{kurz}}"></td>
<td colspan="3"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td><textarea cols="48" rows="6" id="ArtikelLang" name="lang"><? echo ("{{lang}}"); ?></textarea></td>
<td colspan="3"> </td>
<td> </td>
</tr>
</template>
<script>
$("#tr-select-article").select2();
/* // Read selected option
$('#tr-select-article').change(function(){
let value = $('#tr-select-article').val();
let parts = value.split(';');
$('#ArtikelId').val(parts[0]); // = '.$artikel['id'].'
$('#ArtikelName').val(parts[1]); // = '.$artikel['name'].'
$("#ArtikelKurz").val(parts[2]); // = '.$artikel['kurz'].'
$("#ArtikelEinheit").val(parts[3]); // = '.$artikel['einheit'].'
$("#ArtikelNetto").val(parts[4]); // = '.$artikel['preis_netto'].'
$("#ArtikelLang").text(parts[5]); // = '.$artikel['lang'].'
});
*/
// Eventlistener für Klick auf den Erstellen-Button registrieren:
document.getElementById('erstellen').addEventListener('click', event => {
// value des Artikels aus dem Eingabefeld lesen:
let value = $('#tr-select-article').val();
// und in seine Bestandteile zerlegen:
let parts = value.split(';');
// HTML des Templates ermitteln und Platzhalter ersetzen:
let htmlArticle = document.getElementById('tpl-article')
.replace('{{artikel-id}}', parts[0]),
.replace('{{name}}', parts[1]),
.replace('{{kurz}}', parts[2]),
.replace('{{einheit}}', parts[3]),
.replace('{{netto}}', parts[4]),
.replace('{{lang}}', parts[5])
// usw. für die weiteren Parameter des Artikels
// Und das Ergebnis vor der Tabellenzeile für die Auswahl
// des Artikels einfügen:
});
</script>
