[Share Code] Tìm hiểu Bootstrap & jQuery - C2307L

#bt2023.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

<!DOCTYPE html>
<html>
<head>
	<title>Form Payment - Page</title>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="script.js"></script>
</head>
<body onload="init()">
<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>
</body>
</html>

#jquery.html

<!DOCTYPE html>
<html>
<head>
	<title>Form Payment - Page</title>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<!-- <script type="text/javascript" src="script-jquery.js"></script> -->
</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 class="abc" required="true" type="number" id="unit_price" disabled="true">
					</td>
				</tr>
				<tr>
					<td>Quantity:</td>
					<td>
						<input class="abc" 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" placeholder="Enter ABC">
					</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">
	$(function() {
		$('#product').val(975)
		$('#quantity').val(34)
		$('#total_price').val(234324)

		$('input').val(123)
		$('textarea').val('23423423')

		$('.abc').val('334')

		$('[placeholder="Enter ABC"]').val('111111')
	})
</script>

</body>
</html>

#script.js

var productTag, quantityTag, unitPriceTag, totalPriceTag, fullnameTag, shippingAddressTag, creditCardTag, num1Tag, num2Tag, num3Tag, num4Tag

function init() {
	productTag = document.getElementById('product')
	quantityTag = document.getElementById('quantity')
	unitPriceTag = document.getElementById('unit_price')
	totalPriceTag = document.getElementById('total_price')
	fullnameTag = document.getElementById('fullname')
	shippingAddressTag = document.getElementById('shipping_address')
	creditCardTag = document.getElementById('credit_card')
	num1Tag = document.getElementById('card-number-1')
	num2Tag = document.getElementById('card-number-2')
	num3Tag = document.getElementById('card-number-3')
	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')
}

#script-jquery.js

var productTag, quantityTag, unitPriceTag, totalPriceTag, fullnameTag, shippingAddressTag, creditCardTag, num1Tag, num2Tag, num3Tag, num4Tag

$(document).ready(function() {

})

$(function() {
	// productTag = document.getElementById('product')
	productTag = $('#product')

	quantityTag = document.getElementById('quantity')
	unitPriceTag = document.getElementById('unit_price')
	totalPriceTag = document.getElementById('total_price')
	fullnameTag = document.getElementById('fullname')
	shippingAddressTag = document.getElementById('shipping_address')
	creditCardTag = document.getElementById('credit_card')
	num1Tag = document.getElementById('card-number-1')
	num2Tag = document.getElementById('card-number-2')
	num3Tag = document.getElementById('card-number-3')
	num4Tag = document.getElementById('card-number-4')

	loadData();
})

function changeProduct() {
	let product = productTag.val()
	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.val() * 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.val()
	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.val(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;
}

#vidu.html

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap tutorial</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Latest compiled and minified CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
			<ul class="nav nav-tabs">
			  <li class="nav-item">
			    <a class="nav-link active" href="#"><i class="bi bi-house-door-fill" style="color: red"></i> Active</a>
			  </li>
			  <li class="nav-item dropdown">
			    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
			    <ul class="dropdown-menu">
			      <li><a class="dropdown-item" href="#">Link 1</a></li>
			      <li><a class="dropdown-item" href="#">Link 2</a></li>
			      <li><a class="dropdown-item" href="#">Link 3</a></li>
			    </ul>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link" href="#">Link</a>
			  </li>
			  <li class="nav-item">
			    <a class="nav-link disabled" href="#">Disabled</a>
			  </li>
			</ul>
		</div>
		<div class="col-md-12">
			<table class="table table-bordered table-hover">
				<thead>
					<tr class="bg-info">
						<th class="text-primary">STT</th>
						<th>Full Name</th>
						<th>Email</th>
						<th>Address</th>
						<th style="width: 160px"></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>
							<button class="btn btn-warning">Edit</button>
							<button class="btn btn-danger">Remove</button>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>
							<button class="btn btn-warning">Edit</button>
							<button class="btn btn-danger">Remove</button>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>
							<button class="btn btn-warning">Edit</button>
							<button class="btn btn-danger">Remove</button>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>
							<button class="btn btn-warning">Edit</button>
							<button class="btn btn-danger">Remove</button>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>
							<button class="btn btn-warning">Edit</button>
							<button class="btn btn-danger">Remove</button>
						</td>
					</tr>
					<tr>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>1</td>
						<td>
							<button class="btn btn-warning">Edit</button>
							<button class="btn btn-danger">Remove</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<!-- sm (bo di) -> smartphone, md: ipad..., lg: large (pc, tv) -->
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
		<div class="col-md-3 col-6 col-lg-2">
			<img src="https://gokisoft.com/uploads/stores/49/2021/10/khoa-hoc-php-online.jpg" style="width: 100%">
		</div>
	</div>
</div>
</body>
</html>

[Share Code] Tìm hiểu Bootstrap & jQuery - C2307L

#bt2023.html

#jquery.html

#script.js

#script-jquery.js

#style.css

#vidu.html

Tags:

Phản hồi từ học viên

5

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó