繳費記錄

<style>.file-upload-container {display: flex;align-items: center;}.file-name {margin-left: 10px;font-style: italic;}</style>
<div class="product-form__input">
<label class="form__label">請在此上傳您的付款記錄（螢幕截圖或照片）)</label>
<div class="file-upload-container">
<input id="file-please-upload-your-payment-record-here-(screenshot-or-photo))" form="{{ 'product-form-' | append: section.id }}"
name="properties[請在此上傳您的付款記錄（螢幕截圖或照片））]" style="display: none;" type="file" required />
<button id="button-please-upload-your-payment-record-here-(screenshot-or-photo))" class="button">上傳檔案</button>
<p id="fileName-please-upload-your-payment-record-here-(screenshot-or-photo))" class="file-name">未選擇檔案</p>
</div>
<p id="errorMessage" class="error-message" style="display: none;margin-top:0;color:red">請上傳您的檔案。</p>
</div>
<script>
document.getElementById('file-please-upload-your-payment-record-here-(screenshot-or-photo))').addEventListener('change', function(event) {
const files = event.target.files;
let fileName;
if (files.length === 0) {fileName = '未選擇檔案';}
else if (files.length === 1) {fileName = files[0].name;document.getElementById('errorMessage').style.display = 'none'; }
else {fileName = files.length + ' files';document.getElementById('errorMessage').style.display = 'none';}
document.getElementById('fileName-please-upload-your-payment-record-here-(screenshot-or-photo))').textContent = fileName;
});
document.getElementById('button-please-upload-your-payment-record-here-(screenshot-or-photo))').addEventListener('click', function() {
document.getElementById('file-please-upload-your-payment-record-here-(screenshot-or-photo))').click();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('.product-form__submit').addEventListener('click', function(event) {
const inputFile = document.getElementById('file-please-upload-your-payment-record-here-(screenshot-or-photo))');
if (!inputFile.files.length && inputFile.required) {
document.getElementById('errorMessage').style.display = 'block';
}
});})</script>


<script>
document.addEventListener("DOMContentLoaded", ()=>{document.querySelector("form[novalidate]").removeAttribute("novalidate")})
</script>