<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merchant Information Input</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
color: #333;
}
.form-container {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-container input[type="text"],
.form-container input[type="number"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-container button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-container button:hover {
background-color: #218838;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: left;
}
</style></head><body>
<h1>Merchant Information Input</h1>
<div class="form-container">
<form id="merchantForm">
<label for="cardNumber">Card Member Number:</label>
<input type="text" id="cardNumber" name="cardNumber" required>
<label for="businessNumber">Business Registration Number:</label>
<input type="text" id="businessNumber" name="businessNumber" required>
<label for="transactionCount">Number of Transactions:</label>
<input type="number" id="transactionCount" name="transactionCount" required>
<label for="supplyPrice">Supply Price:</label>
<input type="number" id="supplyPrice" name="supplyPrice" required oninput="calculateTax()">
<label for="taxAmount">Tax Amount (10%):</label>
<input type="number" id="taxAmount" name="taxAmount" readonly>
<button type="button" onclick="addInput()">Add Input</button>
</form>
</div>
<h2>Merchant Information Table</h2>
<table id="merchantTable">
<thead>
<tr>
<th>Serial Number</th>
<th>Card Member Number</th>
<th>Business Registration Number</th>
<th>Number of Transactions</th>
<th>Supply Price</th>
<th>Tax Amount</th>
</tr>
</thead>
<tbody>
<!-- Data will be appended here -->
</tbody>
</table>
<script>
let serialNumber = 1;
function calculateTax() {
const supplyPrice = document.getElementById('supplyPrice').value;
const taxAmount = supplyPrice * 0.10; // Calculate 10% of supply price
document.getElementById('taxAmount').value = taxAmount.toFixed(2); // Set tax amount and limit to 2 decimal places
}
function addInput() {
// Get form values
const cardNumber = document.getElementById('cardNumber').value;
const businessNumber = document.getElementById('businessNumber').value;
const transactionCount = document.getElementById('transactionCount').value;
const supplyPrice = document.getElementById('supplyPrice').value;
const taxAmount = document.getElementById('taxAmount').value;
// Validate the form (simple check)
if (!cardNumber || !businessNumber || !transactionCount || !supplyPrice || !taxAmount) {
alert("Please fill in all fields.");
return;
}
// Create a new row in the table
const table = document.getElementById('merchantTable').getElementsByTagName('tbody')[0];
const newRow = table.insertRow();
newRow.innerHTML = `
<td>${serialNumber++}</td>
<td>${cardNumber}</td>
<td>${businessNumber}</td>
<td>${transactionCount}</td>
<td>${supplyPrice}</td>
<td>${taxAmount}</td>
`;
// Reset form fields for new input
document.getElementById('merchantForm').reset();
document.getElementById('taxAmount').value = ''; // Clear tax amount manually
}
</script>
</body></html>
'컴퓨터 놀이' 카테고리의 다른 글
| [파이썬]사업자등록번호 조회 (1) | 2024.09.27 |
|---|---|
| 부분합과 횟수 만들기 (IF함수 + SUMIF함수, COUNTIF함수) (0) | 2024.09.27 |
| 부가세 신고 연습 (0) | 2024.09.26 |
| BioLite의 Backup 시스템으로 전력 중단 대비하기 (7) | 2024.09.18 |
| 작업 그룹(WorkGroup) 변경하기 (0) | 2024.09.02 |