Calculator Tools Calculator Tools
Create

DTF Print & Press - Customer Supplied Goods & Art

Aug 10, 2025

About this app

DTF Print & Press application allowing users to input their name, quantity, product type, and print locations for custom printing services.

DTF Print & Press - Customer Supplied Goods & Art Reset DTF Print & Press - Customer Supplied Goods & Art - V26 (Receive Goods/Print/Press/Prep & Pack/Ship or Pickup) **Powered by SeaSide Silk Screening** Name/PO Number Quantity 0 (Qty Price Breaks 24, 36, 48, 72, 144, 288) Product Type T-Shirt - $0 Polo - $1 Fleece - $2 Cap - $3 Print Location 1 N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Print Location 2 N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Print Location 3 N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Print Location 4 N/A - $0 Left Front Chest - $1 Right Front Chest - $1 Full Front - $2 Full Back - $2 Total Cost: $0.00

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>DTF Print & Press - Customer Supplied Goods & Art</title>
<meta name="description" content="DTF Print & Press application allowing users to input their name, quantity, product type, and print locations for custom printing services.">
<meta name="keywords" content="DTF, Print, Press, Customer, Goods, Art, Screen Printing, Custom Printing">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const quantityField = document.getElementById('quantity');
const receivingCostField = document.getElementById('receivingCost');
const finalCostField = document.getElementById('totalCost');

quantityField.addEventListener('input', function() {
const quantity = parseFloat(quantityField.value) || 0;
const receivingCost = quantity * 0.16;
receivingCostField.value = receivingCost.toFixed(2);
finalCostField.textContent = (receivingCost + getProductPrice() + getPrintLocationPrice()).toFixed(2);
});

function getProductPrice() {
const productType = document.getElementById('productType').value;
const prices = { 'T-Shirt': 0, 'Polo': 1, 'Fleece': 2, 'Cap': 3 };
return prices[productType] || 0;
}

function getPrintLocationPrice() {
const selectedLocations = Array.from(document.querySelectorAll('.printLocation'));
return selectedLocations.reduce((total, loc) => {
const selectValue = loc.value;
const locPrices = { 'N/A': 0, 'Left Front Chest': 1, 'Right Front Chest': 1, 'Full Front': 2, 'Full Back': 2 };
return total + (locPrices[selectValue] || 0);
}, 0);
}

document.getElementById('resetBtn').onclick = function() {
quantityField.value = 0;
receivingCostField.value = 0.00;
finalCostField.textContent = '0.00';
document.getElementById('namePO').value = '';
document.getElementById('productType').selectedIndex = 0;
document.querySelectorAll('.printLocation').forEach(select => select.selectedIndex = 0);
};
});
} catch (error) {
throw error;
}
</script>

<style>
body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
}
#main-container {
margin-top: 20px;
}
#resetBtn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #f44336;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
#formBox, #printLocationBox {
border: 2px solid #007bff;
padding: 20px;
border-radius: 5px;
margin-bottom: 20px;
}
.totalCost {
font-weight: bold;
margin-top: 20px;
}
.small-text {
font-size: 0.8em;
color: #555;
}
.very-small-text {
font-size: 0.7em;
color: #777;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<button id="resetBtn">Reset</button>
<div class="row text-left">
<h6 class="very-small-text">DTF Print & Press - Customer Supplied Goods & Art - V26</h6>
<h6 class="very-small-text">(Receive Goods/Print/Press/Prep & Pack/Ship or Pickup)</h6>
<h6 class="very-small-text">**Powered by SeaSide Silk Screening**</h6>
</div>
<div id="formBox">
<div class="mb-3">
<label for="namePO" class="form-label">Name/PO Number</label>
<input type="text" class="form-control" id="namePO">
</div>
<div class="mb-3">
<label for="quantity" class="form-label">Quantity</label>
<input type="number" class="form-control" id="quantity" min="0" value="0">
<span class="small-text" id="quantityDisplay">0</span> <span class="small-text">(Qty Price Breaks 24, 36, 48, 72, 144, 288)</span>
<input type="hidden" id="receivingCost" value="0.00">
</div>
<div class="mb-3">
<label for="productType" class="form-label">Product Type</label>
<select id="productType" class="form-select">
<option value="T-Shirt">T-Shirt - $0</option>
<option value="Polo">Polo - $1</option>
<option value="Fleece">Fleece - $2</option>
<option value="Cap">Cap - $3</option>
</select>
</div>
</div>

<div id="printLocationBox">
<div class="mb-3">
<label for="printLocation1" class="form-label">Print Location 1</label>
<select class="form-select printLocation" id="printLocation1">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation2" class="form-label">Print Location 2</label>
<select class="form-select printLocation" id="printLocation2">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation3" class="form-label">Print Location 3</label>
<select class="form-select printLocation" id="printLocation3">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
<div class="mb-3">
<label for="printLocation4" class="form-label">Print Location 4</label>
<select class="form-select printLocation" id="printLocation4">
<option value="N/A">N/A - $0</option>
<option value="Left Front Chest">Left Front Chest - $1</option>
<option value="Right Front Chest">Right Front Chest - $1</option>
<option value="Full Front">Full Front - $2</option>
<option value="Full Back">Full Back - $2</option>
</select>
</div>
</div>

<div class="totalCost">
Total Cost: $<span id="totalCost">0.00</span>
</div>
</div>
</body>
</html>