Calculator Tools Calculator Tools
Create

DTF Print & Press - Customer Supplied Goods & Art

Aug 9, 2025

About this app

DTF Print & Press service for customer-supplied goods and art.

DTF Print & Press - Customer Supplied Goods & Art 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 Total Receiving Cost: $0.00 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 🔄

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 service for customer-supplied goods and art." />
<meta name="keywords" content="DTF Print, Press, Custom Goods, SeaSide Silk Screening, Silk Screening" />

<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
</script>
<!-- Font Awesome (6.6.0) -->
<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 {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.

document.addEventListener("DOMContentLoaded", function() {
updateReceivingCost();
document.getElementById("resetButton").addEventListener("click", function() {
document.getElementById("dtfForm").reset();
updateReceivingCost();
});

document.getElementById("quantity").addEventListener("input", updateReceivingCost);
document.getElementById("productType").addEventListener("change", updatePrice);
document.getElementById("printLocation1").addEventListener("change", updatePrice);
});

function updateReceivingCost() {
var quantity = parseInt(document.getElementById("quantity").value) || 0;
var receivingCost = quantity * 0.16;
document.getElementById("receivingCost").value = receivingCost.toFixed(2);
document.getElementById("receivingDisplay").innerText = `$${receivingCost.toFixed(2)}`;
}

function updatePrice() {
// Example: Your logic for updating price would go here.
let productPrices = {
"T-Shirt": 0,
"Polo": 1,
"Fleece": 2,
"Cap": 3
};
let locationPrices = {
"N/A": 0,
"Left Front Chest": 1,
"Right Front Chest": 1,
"Full Front": 2,
"Full Back": 2
};

let productType = document.getElementById("productType").value;
let location1 = document.getElementById("printLocation1").value;
let productCost = productPrices[productType] || 0;
let locationCost1 = locationPrices[location1] || 0;

// Continue to define and calculate costs for whatever locations you'd like
// The sample wants just Print Location 1 update for now.
}
} catch (error) {
throw error;
}
</script>

<style>
body {
background-color: white;
color: black;
}
h1, h2 {
text-align: center;
}
#main-container {
margin-top: 20px;
}
.red-button {
background-color: lightcoral;
border-radius: 50%;
height: 40px;
width: 40px;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}
.form-field {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>DTF Print & Press - Customer Supplied Goods & Art - V26</h1>
<h2>Receive Goods/Print/Press/Prep & Pack/Ship or Pickup</h2>
<p style="text-align:center;">Powered by SeaSide Silk Screening</p>
<button id="resetButton" class="red-button" title="Reset Form">🔄</button>
<form id="dtfForm">
<div class="form-field">
<label for="namePo">Name/PO Number</label>
<input type="text" class="form-control" id="namePo" required>
</div>
<div class="form-field">
<label for="quantity">Quantity <span id="quantityDisplay">0</span></label>
<input type="range" class="form-range" id="quantity" min="0" value="0">
<small>Qty Price Breaks 24, 36, 48, 72, 144, 288</small>
</div>
<input type="hidden" id="receivingCost">
<p>Total Receiving Cost: <span id="receivingDisplay">$0.00</span></p>
<div class="form-field">
<label for="productType">Product Type</label>
<select class="form-select" id="productType">
<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 class="form-field">
<label for="printLocation1">Print Location 1</label>
<select class="form-select" 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>

<!-- Additional Print Location fields can be added here similarly. -->

</form>
<button id="bottomResetButton" class="red-button" title="Reset Form" onclick="document.getElementById('dtfForm').reset(); updateReceivingCost();">🔄</button>
</div>
</body>
</html>