html tool - total not appearing (additionalRows) #42

Petersohn-Timo · 2025-01-08T23:53:17Z

Hey,
i am trying to get a html tool working for my friends to easily generate invoices. unfortunately the total amount is not appearing (everything from the additionalRows) and I can not get my head around the cause. I tried literally everything, and all the other stuff is working so great. would really appreciate any help :)
html code below

!DOCTYPE html>

<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Rechnungsgenerator</title>
    <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: auto;
        }
        h1 {
            text-align: center;
        }
        form {
            display: flex;
            flex-direction: column;
        }
        label, input, textarea, button {
            margin-top: 10px;
            padding: 10px;
            width: 100%;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .items {
            display: flex;
            margin-top: 10px;
        }
        .items div {
            flex: 1;
            padding: 5px;
        }
        .error {
            color: red;
        }
        .preview {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
    </style>
</head>

<body>
    <h1>Rechnungsgenerator</h1>
    <form id="invoiceForm">
        <h3>Firma</h3>
        <label>Name: <input type="text" id="businessName" value="Ihr Firmenname"></label><br>
        <label>Adresse: <input type="text" id="businessAddress" value="Ihre Firmenadresse"></label><br>
        <label>Telefon: <input type="text" id="businessPhone" value="Ihre Telefonnummer"></label><br>
        <label>Email: <input type="text" id="businessEmail" value="Ihre E-Mail-Adresse"></label><br>
        <label>Website: <input type="text" id="businessWebsite" value="Ihre Webseite"></label><br>
        
        <h3>Kunde</h3>
        <label>Name: <input type="text" id="clientName" value="Kundenname"></label><br>
        <label>Adresse: <input type="text" id="clientAddress" value="Kundenadresse"></label><br>
        <label>Telefon: <input type="text" id="clientPhone" value="Kundentelefon"></label><br>
        <label>Email: <input type="text" id="clientEmail" value="Kunden-E-Mail"></label><br>
        
        <h3>Rechnung</h3>
        <label>Rechnung #: <input type="number" id="invoiceNumber" value="1"></label><br>
        <label>Zahlungsdatum: <input type="date" id="paymentDate"></label><br>
        <label>Rechnungsdatum: <input type="date" id="invoiceDate"></label><br>
        <label>Rechnungsbemerkung: <input type="text" id="invoiceDescription" value="Gemäß § 19 UStG wird keine Umsatzsteuer berechnet." class="invoice-description"></label><br>

        <h3>Positionen</h3>
        <div id="itemList"></div>
        <button type="button" onclick="addItem(event)">Position hinzufügen</button><br>
        <label>Gesamtbetrag: <input type="text" id="total" readonly></label><br>
        
        <button type="button" onclick="generateInvoice()">Rechnung erstellen</button>
    </form>
    
    <script>
        function validateForm() {
          // Prüfen, ob alle erforderlichen Felder ausgefüllt sind
          const requiredFields = [
            'businessName', 'businessAddress', 'businessPhone', 'businessEmail', 'businessWebsite',
            'clientName', 'clientAddress', 'clientPhone', 'clientEmail',
            'invoiceNumber', 'invoiceDate', 'paymentDate'
          ];
          
          for (let fieldId of requiredFields) {
            const field = document.getElementById(fieldId);
            if (!field.value) {
              alert('Bitte füllen Sie alle Felder aus.');
              return false;
            }
          }
          return true;
        }

        function addItem(event) {
            event.preventDefault();
            const itemList = document.getElementById('itemList');
            const itemDiv = document.createElement('div');
            itemDiv.className = 'items';
            itemDiv.innerHTML = `
                <div><input type="text" placeholder="Titel" class="title"></div>
                <div><input type="text" placeholder="Beschreibung" class="description"></div>
                <div><input type="number" placeholder="Einzelpreis" class="unitPrice" oninput="calculateTotal()"></div>
                <div><input type="number" placeholder="Menge" class="quantity" oninput="calculateTotal()"></div>
                <div><input type="text" placeholder="Einheit" class="unit"></div>
                <div><input type="text" placeholder="Gesamt" class="total" readonly></div>
                <div><button type="button" onclick="removeItem(event)">-</button></div>`;
            itemList.appendChild(itemDiv);
        }

        function removeItem(event) {
            event.preventDefault();
            event.target.closest('.items').remove();
            calculateTotal();
        }

        function calculateTotal() {
            let total = 0;
            document.querySelectorAll('.items').forEach(item => {
                const quantity = parseFloat(item.querySelector('.quantity').value) || 0;
                const unitPrice = parseFloat(item.querySelector('.unitPrice').value) || 0;
                const itemTotal = quantity * unitPrice;
                item.querySelector('.total').value = itemTotal.toFixed(2) + ' ' + item.querySelector('.unit').value;
                total += itemTotal;
            });
            document.getElementById('total').value = total.toFixed(2) + ' €'; // Gesamtbetrag in Euro anzeigen
        }

        function setDates() {
            const today = new Date();
            const paymentDate = new Date(today);
            paymentDate.setDate(today.getDate() + 14);

            document.getElementById('invoiceDate').value = today.toISOString().split('T')[0];
            document.getElementById('paymentDate').value = paymentDate.toISOString().split('T')[0];
        }

        function generateInvoice() {
            const items = Array.from(document.querySelectorAll('.items')).map(item => [
                item.querySelector('.title').value,
                item.querySelector('.description').value,
                parseFloat(item.querySelector('.unitPrice').value) || 0,
                parseFloat(item.querySelector('.quantity').value) || 0,
                item.querySelector('.unit').value, // Manuelle Eingabe der Einheit
                parseFloat(item.querySelector('.total').value) || 0
            ]);

            // Gesamtbetrag berechnen
            let totalAmount = 0;
            items.forEach(item => {
                totalAmount += item[5]; // Der Gesamtbetrag jedes Artikels (index 5) wird zur Gesamtsumme addiert
            });
            
            const formattedTotalAmount = totalAmount.toFixed(2) + " €"; // Formatierung zu 2 Dezimalstellen
            
            const outputTypes = jsPDFInvoiceTemplate.OutputType;
            const jsPDF = jsPDFInvoiceTemplate.jsPDF();
            
            var pdfCreated = jsPDFInvoiceTemplate.default({
                outputType: "save",
                returnJsPDFDocObject: true,
                fileName: "Invoice 2025",
                orientationLandscape: false,
                compress: true,
                business: {
                    name: document.getElementById('businessName').value,
                    address: document.getElementById('businessAddress').value,
                    phone: document.getElementById('businessPhone').value,
                    email: document.getElementById('businessEmail').value,
                    website: document.getElementById('businessWebsite').value,
                },
                contact: {
                    label: "Rechnung ausgestellt für:",
                    name: document.getElementById('clientName').value,
                    address: document.getElementById('clientAddress').value,
                    phone: document.getElementById('clientPhone').value,
                    email: document.getElementById('clientEmail').value,
                },
                invoice: {
                    label: "Rechnung #: ",
                    num: document.getElementById('invoiceNumber').value,
                    invDate: "Zahlungsdatum: " + document.getElementById('paymentDate').value,
                    invGenDate: "Rechnungsdatum: " + document.getElementById('invoiceDate').value,
                    headerBorder: true,
                    tableBodyBorder: true,
                    header: [
                        { title: "#", style: { width: 10 } },
                        { title: "Titel", style: { width: 30 } },
                        { title: "Beschreibung", style: { width: 80 } },
                        { title: "Preis" },
                        { title: "Menge" },
                        { title: "Einheit" },
                        { title: "Gesamt" }
                    ],
                    table: items.map((item, index) => [index + 1, ...item]), // Deine Tabelle mit Positionen

                    additionalRows: [ //not appearing on the pdf file, unfourtunatly
                        {
                            col1: 'Total:',
                            col2: totalAmount.toFixed(2),  // Korrekte Formatierung des Gesamtbetrags
                            col3: 'ALL',
                            style: {
                                fontSize: 14,
                                fontWeight: 'bold'
                            }
                        },
                        {
                            col1: 'VAT:',
                            col2: '20%',
                            col3: 'ALL',
                            style: {
                                fontSize: 10
                            }
                        },
                        {
                            col1: 'SubTotal:',
                            col2: (totalAmount - (totalAmount * 0.2)).toFixed(2),  // Subtotal nach VAT
                            col3: 'ALL',
                            style: {
                                fontSize: 10
                            }
                        }
                    ],
                    invDescLabel: "Rechnungsbemerkung",
                    invDesc: document.getElementById('invoiceDescription').value,
                },
                    footer: {
                        text: "Die Rechnung wurde am Computer erstellt und ist ohne Unterschrift und Stempel gültig.",
                    },
                    pageEnable: true,
                    pageLabel: "Seite ",
            });
            pdfCreated.jsPDFDocObject.save();
        }

        window.onload = setDates;
        
    </script>
</body>
</html>

generated-7.pdf

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

html tool - total not appearing (additionalRows) #42

html tool - total not appearing (additionalRows) #42

Petersohn-Timo commented Jan 8, 2025 •

edited

Loading

html tool - total not appearing (additionalRows) #42

html tool - total not appearing (additionalRows) #42

Comments

Petersohn-Timo commented Jan 8, 2025 • edited Loading

Petersohn-Timo commented Jan 8, 2025 •

edited

Loading