+ line.toFixed(2);
sub += line;
});
document.getElementById('subtotal').textContent = sub.toFixed(2);
document.getElementById('grandTotal').textContent = sub.toFixed(2);
}
document.querySelectorAll('#items input').forEach(i => i.addEventListener('input', calc));
function generatePDF() {
const client = document.getElementById('clientName').value || "Client";
const pdfHTML = document.querySelector('#invoiceForm').outerHTML; // Uses current form styling
const element = document.createElement('div');
element.innerHTML = pdfHTML;
document.body.appendChild(element);
html2pdf().from(element).set({margin: 0.5, filename: 'Invoice.pdf', html2canvas: {scale: 3}, jsPDF: {format: 'letter'}}).save().then(() => element.remove());
}
*/
+ amount.toFixed(2);
total += amount;
});
document.getElementById('grandTotal').textContent = total.toFixed(2);
}
document.querySelectorAll('#items input').forEach(i => i.oninput = calc);
function generatePDF() {
const form = document.getElementById('invoiceForm');
const clone = form.cloneNode(true);
clone.style.boxShadow = 'none';
clone.style.background = 'white';
document.body.appendChild(clone);
const clientName = document.getElementById('clientName').value.trim() || "Valued Client";
const clientEmail = document.getElementById('clientEmail').value.trim();
const invNum = document.getElementById('invoiceNumber').value || "INV-XXXX";
const total = document.getElementById('grandTotal').textContent;
const dueDate = document.getElementById('dueDate').value
? new Date(document.getElementById('dueDate').value).toLocaleDateString('en-US', {month:'long', day:'numeric', year:'numeric'})
: "7 days from today";
// Generate PDF first
html2pdf().from(clone).set({
margin: 0.5,
filename: `${invNum}_${clientName.replace(/ /g,'_')}.pdf`,
html2canvas: {scale: 3},
jsPDF: {format: 'letter'}
}).save().then(() => {
clone.remove();
// THEN open email — guaranteed to fire
const subject = `Invoice ${invNum} – ${total} – Cloud AI Innovations`;
const body = `Hello ${clientName.split(' ')[0]},
Please find your invoice attached.
Invoice #: ${invNum}
Due Date: ${dueDate}
Amount Due: ${total}
Thank you for your business!
Best regards,
Chris W.
Founder & CEO
Cloud AI Innovations
Las Vegas • St. Petersburg
invoice@cloudaiinnovations.com`;
const mailto = `mailto:${clientEmail}?cc=invoice@cloudaiinnovations.com&subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailto;
});
}
*/
+ amount.toFixed(2);
total += amount;
});
document.getElementById('grandTotal').textContent = total.toFixed(2);
}
document.querySelectorAll('#items input').forEach(i => i.oninput = calc);
function generatePDF() {
const form = document.getElementById('invoiceForm');
const clone = form.cloneNode(true);
clone.style.boxShadow = 'none';
clone.style.background = 'white';
document.body.appendChild(clone);
const clientName = document.getElementById('clientName').value.trim() || "Client";
const clientEmail = document.getElementById('clientEmail').value.trim();
const invNum = document.getElementById('invoiceNumber').value || "INV-XXXX";
const total = document.getElementById('grandTotal').textContent;
html2pdf().from(clone).set({
margin: 0.5,
filename: `${invNum}_${clientName.replace(/ /g,'_')}.pdf`,
html2canvas: {scale: 3},
jsPDF: {format: 'letter'}
}).save().then(() => {
clone.remove();
const subject = `Invoice ${invNum} – ${total}`;
const body = `Hello ${clientName.split(' ')[0]},nnPlease find your invoice attached.nnAmount due: ${total}nnThank you!nChris W.nCloud AI Innovations`;
const mailto = `mailto:${clientEmail}?cc=invoice@cloudaiinnovations.com&subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailto;
});
}
*/
+ line.toFixed(2);
sub += line;
});
const taxData = document.getElementById('taxLocation').value.split('|');
const taxRate = parseFloat(taxData[0]) || 0;
const taxName = taxData[1] || "Tax";
const tax = sub * (taxRate / 100);
const disc = sub * (parseFloat(document.getElementById('discount')?.value || 0) / 100);
const total = sub + tax - disc;
document.getElementById('subtotal').textContent = sub.toFixed(2);
document.getElementById('taxName').textContent = taxName;
document.getElementById('tax_amount').textContent = tax.toFixed(2);
document.getElementById('discount_amount').textContent = disc.toFixed(2);
document.getElementById('grandTotal').textContent = total.toFixed(2);
}
document.getElementById('taxLocation').addEventListener('change', calc);
document.querySelectorAll('#items input').forEach(i => i.addEventListener('input', calc));
function generatePDF() {
const clientName = document.getElementById('clientName').value || "Client";
const clientCompany = document.getElementById('clientCompany').value || "";
const clientAddress = (document.getElementById('clientAddress').value || "Address not provided").replace(/n/g, '');
const clientPhone = document.getElementById('clientPhone').value || "Not provided";
const clientEmail = document.getElementById('clientEmail').value;
const invNum = document.getElementById('invoiceNumber').value || "INV-XXXX";
const invDate = document.getElementById('invoiceDate').value;
const dueDate = document.getElementById('dueDate').value;
const terms = document.getElementById('paymentTerms').value || "Net 7";
const methods = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
.map(cb => cb.parentElement.textContent.trim()).join(' • ') || 'Bank Transfer';
const taxName = document.getElementById('taxLocation').value.split('|')[1] || "Tax";
const pdfHTML = `
`;
const element = document.createElement('div');
element.innerHTML = pdfHTML;
document.body.appendChild(element);
html2pdf().from(element).set({
margin: 0.5,
filename: `${invNum}_${clientName.replace(/ /g,'_')}_${invDate}_Due_${dueDate}.pdf`,
html2canvas: {scale: 3},
jsPDF: {unit: 'in', format: 'letter'}
}).save().then(() => document.body.removeChild(element));
const mailto = `mailto:${clientEmail}?cc=invoice@cloudaiinnovations.com&subject=Invoice ${invNum} – ${document.getElementById('grandTotal').textContent}&body=Hello ${clientName.split(' ')[0]},%0D%0APlease find your invoice attached.%0D%0AThank you!%0D%0ACloud AI Innovations`;
window.open(mailto, '_blank');
}
*/
+ amount.toFixed(2);
total += amount;
});
document.getElementById('grandTotal').textContent = total.toFixed(2);
}
document.querySelectorAll('#items input').forEach(i => i.oninput = calc);
function generatePDF() {
const form = document.getElementById('invoiceForm');
const clone = form.cloneNode(true);
clone.style.boxShadow = 'none';
clone.style.background = 'white';
document.body.appendChild(clone);
html2pdf().from(clone).set({margin:0.5, filename:'Invoice.pdf', html2canvas:{scale:3}, jsPDF:{format:'letter'}}).save().then(() => cl one.remove());
}
*/
+ line.toFixed(2);
sub += line;
});
const taxData = document.getElementById('taxLocation').value.split('|');
const taxRate = parseFloat(taxData[0]) || 0;
const taxName = taxData[1] || "Tax";
const tax = sub * (taxRate / 100);
const disc = sub * (parseFloat(document.getElementById('discount')?.value || 0) / 100);
const total = sub + tax - disc;
document.getElementById('subtotal').textContent = sub.toFixed(2);
document.getElementById('taxName').textContent = taxName;
document.getElementById('tax_amount').textContent = tax.toFixed(2);
document.getElementById('discount_amount').textContent = disc.toFixed(2);
document.getElementById('grandTotal').textContent = total.toFixed(2);
}
document.getElementById('taxLocation').addEventListener('change', calc);
document.querySelectorAll('#items input').forEach(i => i.addEventListener('input', calc));
function generatePDF() {
const clientName = document.getElementById('clientName').value || "Client";
const clientCompany = document.getElementById('clientCompany').value || "";
const clientAddress = (document.getElementById('clientAddress').value || "Address not provided").replace(/n/g, '');
const clientPhone = document.getElementById('clientPhone').value || "Not provided";
const clientEmail = document.getElementById('clientEmail').value;
const invNum = document.getElementById('invoiceNumber').value || "INV-XXXX";
const invDate = document.getElementById('invoiceDate').value;
const dueDate = document.getElementById('dueDate').value;
const terms = document.getElementById('paymentTerms').value || "Net 7";
const methods = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
.map(cb => cb.parentElement.textContent.trim()).join(' • ') || 'Bank Transfer';
const taxName = document.getElementById('taxLocation').value.split('|')[1] || "Tax";
const pdfHTML = `
`;
const element = document.createElement('div');
element.innerHTML = pdfHTML;
document.body.appendChild(element);
html2pdf().from(element).set({
margin: 0.5,
filename: `${invNum}_${clientName.replace(/ /g,'_')}_${invDate}_Due_${dueDate}.pdf`,
html2canvas: {scale: 3},
jsPDF: {unit: 'in', format: 'letter'}
}).save().then(() => document.body.removeChild(element));
const mailto = `mailto:${clientEmail}?cc=invoice@cloudaiinnovations.com&subject=Invoice ${invNum} – ${document.getElementById('grandTotal').textContent}&body=Hello ${clientName.split(' ')[0]},%0D%0APlease find your invoice attached.%0D%0AThank you!%0D%0ACloud AI Innovations`;
window.open(mailto, '_blank');
}
*/
+ total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
subtotal += total;
});
// Tax Logic
const taxSelect = document.getElementById('taxLocation').value.split('|');
const taxRate = parseFloat(taxSelect[0]);
const taxName = taxSelect[1];
const taxAmount = subtotal * (taxRate / 100);
const grandTotal = subtotal + taxAmount;
// Update DOM
document.getElementById('subtotalVal').innerText = ' + subtotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById('taxLabel').innerText = taxName;
document.getElementById('taxVal').innerText = ' + taxAmount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
document.getElementById('grandTotal').innerText = ' + grandTotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
}
// 5. PDF Generation
function downloadPDF() {
const element = document.getElementById('invoice-capture-area');
const invNum = document.getElementById('invoiceNumber').value;
const client = document.getElementById('clientName').value || 'Client';
// PDF Options
const opt = {
margin: 0.2,
filename: `Invoice_${invNum}_${client}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2, useCORS: true },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// Generate
html2pdf().set(opt).from(element).save().then(() => {
// Prepare Mailto Link
const email = document.getElementById('clientEmail').value;
const subject = `Invoice ${invNum} from Cloud AI Innovations`;
const body = `Hi ${client},%0D%0A%0D%0APlease find attached invoice ${invNum}.%0D%0A%0D%0AThank you,%0D%0ACloud AI Innovations`;
if(email) {
window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
}
});
}
*/
+ amt.toLocaleString('en-US', {minimumFractionDigits: 2});
total += amt;
});
const totalStr = ' + total.toLocaleString('en-US', {minimumFractionDigits: 2});
document.getElementById('subtotal').innerText = totalStr;
document.getElementById('total').innerText = totalStr;
}
function generatePDF() {
const element = document.getElementById('invoice-print-area');
const invNum = document.getElementById('invNum').value;
html2pdf().set({
margin: 0.5,
filename: `Invoice_${invNum}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
}).from(element).save();
}
// Start
init();
*/
Invoice Generator – Cloud AI Innovations
CLOUD AI INNOVATIONS
Digital Marketing • AI SEO • Generative Engine Optimization
Las Vegas, NV • St. Petersburg, FL | invoice@cloudaiinnovations.com
Professional Digital Marketing Invoice Generator
+ amount.toFixed(2).replace(/B(?=(d{3})+(?!d))/g, ",");
total += amount;
});
// Update subtotals and grand total, applying comma formatting
const formattedTotal = total.toFixed(2).replace(/B(?=(d{3})+(?!d))/g, ",");
document.getElementById('subtotal').textContent = formattedTotal;
document.getElementById('grandTotal').textContent = formattedTotal;
}
function getInvoiceData() {
// Collect all line item data
const lineItems = Array.from(document.querySelectorAll('#items tbody tr')).map((row, index) => {
return `Item ${index + 1}: ${row.querySelector('.desc').value} (Qty: ${row.querySelector('.qty').value}, Rate: ${row.querySelector('.rate').value}) - Amount: ${row.querySelector('.line-total').textContent}`;
}).join('n');
// Collect all main data fields
return {
_replyto: document.getElementById('clientEmail').value,
_subject: `Invoice ${document.getElementById('invoiceNumber').value} – ${document.getElementById('grandTotal').textContent} – Cloud AI Innovations`,
'Invoice Number': document.getElementById('invoiceNumber').value,
'Client Name': document.getElementById('clientName').value,
'Client Email': document.getElementById('clientEmail').value,
'Client Company': document.getElementById('clientCompany').value,
'Client Phone': document.getElementById('clientPhone').value,
'Invoice Date': document.getElementById('invoiceDate').value,
'Due Date': document.getElementById('dueDate').value,
'Subtotal': ' + document.getElementById('subtotal').textContent,
'Grand Total': ' + document.getElementById('grandTotal').textContent,
'Notes': document.getElementById('notes').value,
'Line Items': lineItems
};
}
function generatePDFAndEmail() {
const clientEmail = document.getElementById('clientEmail').value;
const clientName = document.getElementById('clientName').value;
if (!clientEmail || !clientName) {
alert("Please enter the client's Name and Email to proceed.");
return;
}
// 1. Generate and Download PDF
const clone = document.getElementById('invoiceForm').cloneNode(true);
clone.style.background = 'white';
clone.style.padding = '40px';
clone.style.boxShadow = 'none';
clone.style.maxWidth = '900px';
clone.style.margin = '0 auto';
// Remove button and notes for PDF
clone.querySelectorAll('button, textarea#notes, script, style').forEach(el => el.remove());
// Replace input fields with static text for cleaner PDF rendering
clone.querySelectorAll('input, textarea').forEach(input => {
if (input.type !== 'hidden') {
const text = document.createElement('span');
text.textContent = input.value;
text.style.display = 'block';
text.style.padding = input.style.padding;
text.style.margin = input.style.margin;
text.style.border = 'none';
text.style.textAlign = input.style.textAlign;
input.parentNode.replaceChild(text, input);
}
});
document.body.appendChild(clone);
const invNum = document.getElementById('invoiceNumber').value || "INV-XXXX";
html2pdf().from(clone).set({
margin: 0.5,
filename: `${invNum}_${clientName.replace(/ /g,'_')}.pdf`,
html2canvas: {scale: 3},
jsPDF: {format: 'letter'}
}).save().then(() => {
clone.remove(); // Clean up the temporary element
// 2. Send Email via FormSubmit
const formData = getInvoiceData();
const formUrl = 'https://formsubmit.co/ajax/info@cloudaiinnovations.com';
fetch(formUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(formData)
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert(`SUCCESS! PDF for ${clientName} has been downloaded, and the invoice details have been emailed to ${clientEmail}. (You will need to manually attach the PDF to the email you send to your client.)`);
} else {
alert("Warning: PDF was downloaded, but the automated email failed to send via FormSubmit. Please check FormSubmit configuration.");
}
})
.catch(error => {
console.error('FormSubmit Error:', error);
alert("Warning: PDF was downloaded, but the automated email failed (CORS/Network error). Please check console.");
});
});
}
*/