By GokiSoft.com|
21:13 30/10/2023|
Học JS
[Share Code] Bài tập - quản lý form payment - Lập trình Javascript - C2307L
Bài tập - quản lý form payment - Lập trình Javascript
#bt2023.html
<!DOCTYPE html>
<html>
<head>
<title>Form Payment - Page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form method="post" onsubmit="return saveData()">
<div class="panel">
<div class="panel-heading">
Purchase Order Form
</div>
<div class="panel-body">
<fieldset>
<legend>Product Information</legend>
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td style="width: 120px;">Product</td>
<td>
<select required="true" id="product" onchange="changeProduct()">
<option value="">Select</option>
<option value="650">Comfort Sleeper</option>
<option value="975">Morgan Kids Bed</option>
<option value="480">Entertainment Cabinet</option>
</select>
</td>
</tr>
<tr>
<td>Unit Price ($):</td>
<td>
<input required="true" type="number" id="unit_price" disabled="true">
</td>
</tr>
<tr>
<td>Quantity:</td>
<td>
<input required="true" type="number" id="quantity" disabled="true" onkeyup="calTotalPrice()">
</td>
</tr>
<tr>
<td>Total Price ($):</td>
<td>
<input required="true" type="number" id="total_price" disabled="true">
</td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Shipping Information</legend>
<table border="1" cellpadding="2" cellspacing="2">
<tr>
<td style="width: 120px;">Full Name:</td>
<td>
<input required="true" type="text" id="fullname">
</td>
</tr>
<tr>
<td>Shipping Address:</td>
<td>
<textarea required="true" rows="3" id="shipping_address"></textarea>
</td>
</tr>
<tr>
<td>Credit Card:</td>
<td>
<select required="true" id="credit_card" onchange="updateStatusNumber()">
<option value="">Select</option>
<option value="650">Visa</option>
<option value="975">Master Card</option>
<option value="480">American Express</option>
</select>
</td>
</tr>
<tr>
<td>Credit Card Number:</td>
<td>
<input disabled="true" required="true" type="text" class="credit-number" pattern="[0-9]{4}" id="card-number-1">
<input disabled="true" required="true" type="text" class="credit-number" pattern="[0-9]{4}" id="card-number-2">
<input disabled="true" required="true" type="text" class="credit-number" pattern="[0-9]{4}" id="card-number-3">
<input disabled="true" required="true" type="text" class="credit-number" pattern="[0-9]{4}" id="card-number-4">
</td>
</tr>
</table>
</fieldset>
</div>
<div class="panel-footer">
<button class="btn-success" type="submit">Submit</button>
<button class="btn-warning" type="reset" onclick="deleteData()">Reset</button>
</div>
</div>
</form>
<script type="text/javascript" src="script.js"></script>
</body>
</html>#script.js
var productTag = document.getElementById('product')
var quantityTag = document.getElementById('quantity')
var unitPriceTag = document.getElementById('unit_price')
var totalPriceTag = document.getElementById('total_price')
var fullnameTag = document.getElementById('fullname')
var shippingAddressTag = document.getElementById('shipping_address')
var creditCardTag = document.getElementById('credit_card')
var num1Tag = document.getElementById('card-number-1')
var num2Tag = document.getElementById('card-number-2')
var num3Tag = document.getElementById('card-number-3')
var num4Tag = document.getElementById('card-number-4')
loadData();
function changeProduct() {
let product = productTag.value
if(product == "") {
quantityTag.disabled = true
unitPriceTag.value = ""
totalPriceTag.value = ""
quantityTag.value = ""
} else {
quantityTag.disabled = false
unitPriceTag.value = product
totalPriceTag.value = product * quantityTag.value
}
}
function calTotalPrice() {
totalPriceTag.value = productTag.value * quantityTag.value
}
function updateStatusNumber() {
let creditCard = creditCardTag.value
if(creditCard == "") {
num1Tag.disabled = true
num2Tag.disabled = true
num3Tag.disabled = true
num4Tag.disabled = true
} else {
num1Tag.disabled = false
num2Tag.disabled = false
num3Tag.disabled = false
num4Tag.disabled = false
}
}
function saveData() {
let product = productTag.value
let unit_price = unitPriceTag.value
let quantity = quantityTag.value
let total_price = totalPriceTag.value
let fullname = fullnameTag.value
let shipping_address = shippingAddressTag.value
let credit_card = creditCardTag.value
let num1 = num1Tag.value
let num2 = num2Tag.value
let num3 = num3Tag.value
let num4 = num4Tag.value
localStorage.setItem('product', product)
localStorage.setItem('unit_price', unit_price)
localStorage.setItem('quantity', quantity)
localStorage.setItem('total_price', total_price)
localStorage.setItem('fullname', fullname)
localStorage.setItem('shipping_address', shipping_address)
localStorage.setItem('credit_card', credit_card)
localStorage.setItem('num1', num1)
localStorage.setItem('num2', num2)
localStorage.setItem('num3', num3)
localStorage.setItem('num4', num4)
return false
}
function loadData() {
productTag.value = localStorage.getItem('product')
unitPriceTag.value = localStorage.getItem('unit_price')
quantityTag.value = localStorage.getItem('quantity')
totalPriceTag.value = localStorage.getItem('total_price')
fullnameTag.value = localStorage.getItem('fullname')
shippingAddressTag.value = localStorage.getItem('shipping_address')
creditCardTag.value = localStorage.getItem('credit_card')
num1Tag.value = localStorage.getItem('num1')
num2Tag.value = localStorage.getItem('num2')
num3Tag.value = localStorage.getItem('num3')
num4Tag.value = localStorage.getItem('num4')
}
function deleteData() {
localStorage.removeItem('product')
localStorage.removeItem('unit_price')
localStorage.removeItem('quantity')
localStorage.removeItem('total_price')
localStorage.removeItem('fullname')
localStorage.removeItem('shipping_address')
localStorage.removeItem('credit_card')
localStorage.removeItem('num1')
localStorage.removeItem('num2')
localStorage.removeItem('num3')
localStorage.removeItem('num4')
}#style.css
.panel {
width: 600px;
background-color: #50ddef;
margin: 0px auto;
}
.panel .panel-heading {
background-color: orange;
font-size: 20px;
font-weight: bold;
padding: 10px;
text-align: center;
}
.panel .panel-footer {
background-color: #00bcd4;
padding: 6px;
font-size: 20px;
text-align: center;
}
.panel .panel-footer button {
font-size: 18px;
background-color: blue;
color: white;
padding: 5px;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.btn-warning {
background-color: orange !important;
}
button:hover {
background-color: yellow !important;
color: black !important;
}
table {
width: 100%;
}
table td {
font-weight: bold;
}
legend {
font-size: 22px;
color: red;
font-weight: bold;
}
table td input, table td textarea, table td select {
width: 300px;
font-size: 18px;
}
.credit-number {
width: 80px;
}
input:focus, textarea:focus, select:focus {
background-color: yellow !important;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
