By GokiSoft.com| 20:45 27/10/2023|

Học JS

Bài tập - quản lý form payment - Lập trình Javascript

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

5

(Dựa trên đánh giá ngày hôm nay)

Nguyễn Trần Tuân

2021-03-01 16:42:54

#27.2.2021.html

<!DOCTYPE html>
<html>
<head>
	<title>Quản Lý Form Payment - Page</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="panel">
		<div class="panel-heading">
			Purchase Order Form
		</div>
		<div class="panel-body">
			<form>
			<div>
				<fieldset>
					<legend>Product Information</legend>
					<div >
						<table border="1" cellpadding="2" style="border-color: blue ">
							<tr>
								<th>Product:</th>
								<td>
									<select required="true" id="product" onchange="addUnitPrice()">
									<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>
								<th>Unit Price ($):</th>
								<td><input required="true" type="number" id="unit_price" disabled="true" value="0" style="width: 45px" class="focus"></td>
							</tr>
							<tr>
								<th>Quantity:</th>
								<td><input type="number" id="quantity" disabled="true" value="0" onkeyup="updateQuantity()" style="width: 45px" class="focus"></td>
							</tr>
							<tr>
								<th>Total Price ($):</th>
								<td><input type="number" id="total_price" disabled="true" value="0" style="width: 45px" class="focus"></td>
							</tr>
						</table>
					</div>
				</fieldset>
				
				
			</div>
			<div>
				<fieldset>
					<legend>Shipping Information</legend>
					<div>
						<table border="1" cellpadding="2" style="border-color: blue ">
							<tr>
								<th>Full Name:</th>
								<td>
									<input type="text" id="full_name" class="focus">
								</td>
							</tr>
							<tr>
								<th>Shipping Address:</th>
								<td><input type="text" id="shipping_address" class="focus"></td>
							</tr>
							<tr>
								<th>Credit Card:</th>
								<td>
									<select required="true" id="credit_card" onchange="selectCreditCard()">
										<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>
								<th>Credit Card Number:</th>
								<td>
									<input type="number" id="ccn_1" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_2" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_3" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
									<input type="number" id="ccn_4" disabled="true" onkeypress="if(this.value.length>=4) { return false;}" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" style="width: 45px" class="focus">
								</td>
							</tr>
						</table>
					</div>
				</fieldset>
				<fieldset class="form">
					<button type="Submit">Submit</button>
					<button type="Reset">Reset</button>
				</fieldset>
				
			</div>
			</form>
		</div>
	</div>
	<script type="text/javascript" src="27.2.2021.js"></script>
</body>
</html>

#27.2.2021.js

function addUnitPrice(){
	var productTag = document.getElementById('product')
	var productValue = productTag.value
	var unitPrice = document.getElementById('unit_price')

	if(productValue != ''){
		unitPrice.value = productValue
		document.getElementById('quantity').disabled = false
	}
	else{
		unitPrice.value = '0'
		document.getElementById('quantity').disabled = true
	}
}
function updateQuantity(){
	quantityValue = document.getElementById('quantity').value
	unitPrice = document.getElementById('unit_price').value
	document.getElementById('total_price').value = quantityValue * unitPrice
}
function selectCreditCard(){
	var creditcard = document.getElementById('credit_card').value
	if(creditcard != ''){
		document.getElementById('ccn_1').disabled = false
		document.getElementById('ccn_2').disabled = false
		document.getElementById('ccn_3').disabled = false
		document.getElementById('ccn_4').disabled = false
	}else {
		document.getElementById('ccn_1').disabled = true
		document.getElementById('ccn_2').disabled = true
		document.getElementById('ccn_3').disabled = true
		document.getElementById('ccn_4').disabled = true
	}
}

#style.css

.panel {
	width: 500px;
	border: solid 1px grey;
	padding: 5px;
	background-color: #a8e8f1;
}
.panel-heading {
	border: solid 1px grey;
	width: 300px;
	padding: 5px;
	background-color: #4eaec1;
	font-size: 30px;

}
.focus:focus{
	background-color: yellow;
}
.form button {
	margin: 0 auto;
}
fieldset {
	margin: 8px;
	margin-left: 2px;
	border: solid 1px silver;
	border-radius: 4px;
	padding: 8px; 
}
legend {
	padding: 2px;
}
th {
	background-color: #e4e4ef;
	width: 150px;
	text-align: left;
}
td {
	background-color: #e4e4ef;
	width: 250px;
}

Vũ Ngọc Văn

2021-02-28 08:35:04

https://vungocvan-aptech.herokuapp.com/0227/payment_form.html

https://github.com/vanvu25894/02-HTML/tree/main/0227

Đào Mạnh Dũng

2021-02-27 16:55:42

#codepur.js

function select(){
	var Productv=document.getElementById('Product')
	var Pricev=document.getElementById('Price')

if(Productv.value=="Comfort Sleeper"){
	Pricev.value="650"
	}else
		{
				if(Productv.value=="Morgan Kids Bed"){
					Pricev.value="975"
			}else
				{
					if(Productv.value=="Entertainment Cabinet"){
						Pricev.value="480"
				}
			}
		}

document.getElementById('quantity').disabled = false
updateTotalPrice()
}
function updateTotalPrice(){

	var quantityv=document.getElementById('quantity')
	var Pricev=document.getElementById('Price')

		document.getElementById('Total').value=quantityv.value*Pricev.value;

}
	function unlockCredit() {
	var Creditv=document.getElementById('Credit')
	if(Creditv.value!='--select--')
	{
		document.getElementById('Credit1').disabled=false
		document.getElementById('Credit2').disabled=false
		document.getElementById('Credit3').disabled=false
		document.getElementById('Credit4').disabled=false
	}else
	{
		document.getElementById('Credit1').disabled=true
		document.getElementById('Credit2').disabled=true
		document.getElementById('Credit3').disabled=true
		document.getElementById('Credit4').disabled=true
	}
}

#purchase.html

<!DOCTYPE html>
<html>
<head>
	<title>purchase order form</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="stylels.css">

</head>
<body>


<div class="backgroundBlock">
	<h2 class="head"> purchase order form </h2>

		<fieldset  class="Block">
			<legend  style="color: #0080FF;margin-left:8px;margin-top: -2px"><b>Product Information</b></legend >

				<table class="table">
					<tr>
						<td>Product:</td>
						<td>
							<select id="Product" onchange="select()">
								<option>--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 type="Number" value="0" id="Price" disabled="true">
						</td>
						 
					</tr>
					<tr>
						<td>Quantity:</td>
						<td>
							<input type="Number" value="0" id="quantity" disabled="true" onkeyup="updateTotalPrice()">
						</td>
						 
					</tr>
					<tr>
						<td>Total Price ($):</td>
						<td>
							<input type="Number" value="0" id="Total" disabled="true">
						</td>
						 
					</tr>

				</table>


		</fieldset>

		<fieldset class="Block">
			<legend style=" color: #0080FF;margin-left:8px;margin-top: -2px"><b>Shipping Information</b></legend>

				<table class="table">
					<tr>
						<td>Full Name:</td>
						<td>
							<input type="text"  >
						</td>
						 
					</tr>
					<tr>
						<td>Shipping Address:</td>
						<td>
					 
							<input type="area" style="padding: 10px 50px 20px 10px;" >
						</td>
						 
					</tr>
					<tr>
						<td>Credit Card:</td>
						<td>
							<select id="Credit" onchange="unlockCredit()">
								<option>--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 required="true" type="text" id="Credit1" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true"style="width: 20%">
							<input style="width: 20%"required="true" type="text" id="Credit2" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
							<input style="width: 20%"required="true" type="text" id="Credit3" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
							<input style="width: 20%"required="true" type="text" id="Credit4" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
						</td>
						 
					</tr>

				</table>


		</fieldset>
 

<div class="BlockB">
	<button type="submit"style="margin-left: 40%">Submit</button>
	<button type="reset">Reset</button>
</div>

 

 

</div>

<script type="text/javascript" src="codepur.js"></script>
</body>
</html>

#stylels.css

.backgroundBlock {
	background-color: #75E1E1;
	border: solid #0A0A2A 1px;
	width: 40%; 
	margin: 0px auto;
}
.head {

		color: #0B0B61;
		background-color:#5DBBBB; 
		width: inherit; 
		border: solid #000000 1px;
		margin-top: 8px;
		margin-left:8px;
		padding: 5px;

}
.table  {

	border: solid #0080FF 1px;
	margin-left: 6px;
	margin-bottom: 6px;
	width: 91%; 
	

}
td {

	border: solid #0080FF 1px;
	background-color:#C8DDDD;
}
input {
	width: 40%; 
}
select {
	width: 60%; 
}
.Block {
	border-radius: 3px;
	border: solid #848484 1px;
	width: 90%; 
	margin-left:3px;
	margin-top: 10px;
}
input:focus {
  background-color: #F3F781;
}
.BlockB {
	border-radius: 3px;
	border: solid #000000 1px;
	width: 96%; 
	margin-left:3px;
	margin-top: 3px;
	margin-bottom:5px;
	padding:3px 1px 3px;
	background-color: #E6E6FA

}

TRẦN VĂN ĐIỆP

2021-01-25 02:11:44

#style.css

input:focus {
	background-color: yellow;
}

h2, legend {
	color: #14a2ba;
}

.main {
	width: 500px;
	margin: 0px auto;
	background-color: #cce8ed;
	padding: 10px;
}

fieldset {
	margin-bottom: 10px;
}

table {
	width: 100%;
}

.table-left {
	width: 40%;
	padding: 5px;
	background-color: #ebefef;
}

.table-right {
	width: 60%;
	padding: 5px;
	background-color: #ebefef;
}

.table-right.credit-card-number {
	display: flex;
	width: auto;
}

.table-right.credit-card-number input {
	width: 50px;
	float: left;
	margin-right: 10px;
}

.footer {
	background-color: #ebefef;
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

#vidu.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>
	<div class="main">
		<h2>Purchase Order Form</h2>
		<form method="post">
			<fieldset>
				<legend>Product Information</legend>

				<table border="1">
					<tr>
						<td class="table-left">Product: </td>
						<td class="table-right">
							<select required="true" id="product" onchange="selectProduct()">
								<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 class="table-left">Unit Price ($): </td>
						<td class="table-right">
							<input required="true" type="number" id="unit_price" value="0" disabled="true">
						</td>
					</tr>
					<tr>
						<td class="table-left">Quantity: </td>
						<td class="table-right">
							<input required="true" type="number" id="quantity" value="0" disabled="true" onkeyup="updateQuantity()">
						</td>
					</tr>
					<tr>
						<td class="table-left">Total Price: </td>
						<td class="table-right">
							<input required="true" type="number" id="total_price" value="0" disabled="true">
						</td>
					</tr>
				</table>
			</fieldset>

			<fieldset>
				<legend>Shipping Information</legend>

				<table border="1">
					<tr>
						<td class="table-left">Full Name: </td>
						<td class="table-right" class="table-right">
							<input required="true" type="text" id="fullname">
						</td>
					</tr>
					<tr>
						<td class="table-left">Shipping Address: </td>
						<td class="table-right">
							<input required="true" type="text" id="shipping_address">
						</td>
					</tr>
					<tr>
						<td class="table-left">Credit Card: </td>
						<td class="table-right">
							<select required="true" id="credit_card" onchange="selectCreditCard()">
								<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 class="table-left">Credit Card Number: </td>
						<td class="table-right credit-card-number">
							<input required="true" type="text" id="num1" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
							<input required="true" type="text" id="num2" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
							<input required="true" type="text" id="num3" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
							<input required="true" type="text" id="num4" pattern="[0-9]{4}" maxlength="4" minlength="4" disabled="true">
						</td>
					</tr>
				</table>
			</fieldset>

			<div class="footer">
				<button type="submit">Submit</button>
				<button type="reset">Reset</button>
			</div>
		</form>
	</div>

	<script type="text/javascript">
		function selectProduct() {
			var productTag = document.getElementById('product')
			var productValue = productTag.value

			if(productValue != '') {
				//chon san pham
				document.getElementById('unit_price').value = productValue
				document.getElementById('quantity').disabled = false
			} else {
				document.getElementById('unit_price').value = '0'
				document.getElementById('quantity').disabled = true
			}
		}

		function updateQuantity() {
			unitPrice = document.getElementById('unit_price').value
			quantity = document.getElementById('quantity').value

			document.getElementById('total_price').value = unitPrice * quantity
		}

		function selectCreditCard() {
			value = document.getElementById('credit_card').value
			if(value != '') {
				//enable -> input
				document.getElementById('num1').disabled = false
				document.getElementById('num2').disabled = false
				document.getElementById('num3').disabled = false
				document.getElementById('num4').disabled = false
			} else {
				//disable -> input
				document.getElementById('num1').disabled = true
				document.getElementById('num2').disabled = true
				document.getElementById('num3').disabled = true
				document.getElementById('num4').disabled = true

			}
		}
	</script>
</body>
</html>

silentvoice

2020-12-22 06:54:55

https://phamngoclong.herokuapp.com/baitaplap8/bai1/frompayment.html

nguyen hoang viet

2020-12-21 16:20:32

https://nguyenhoangviet.herokuapp.com/formpayment.html

Đặng Trần Nhật Minh

2020-11-01 13:07:00

https://html-code-nhatminh.herokuapp.com/21.10/Payment/formpayment.html

Do Trung Duc

2020-10-26 02:38:10

<!DOCTYPE html>
<html>
<head>
	<title>Payment</title>
	<meta charset="utf-8">
	<style type="text/css">
		.total{
			background-color: #cce0ff;
			margin: 0 auto;
			width: 60%;
			border: 1px grey solid;
			padding: 10px;

		}

		.header{
			background-color:  #9999ff;
			border: thin grey solid;
			margin-top: 10px;
			width: 18%;
		}

		.main_one, .main_two{
			width: 90%;
			border: grey 1px solid;
			padding: 5px;
			margin-top: 30px;
		}

		.row{
			display: flex;
			border: #0066ff
			padding: 2px;
			margin-top: 3px;
		}

		.row_select{
			margin-left: 10px;
		}

		.row_fill{
			margin-left: 10px;
			width: 20%;
		}

		.changecolor:focus{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="total">
		<form>
		<div class="header">Purchase Oder Form</div>
		<div class="main_one">
			<div style="margin-top: -10px; background-color: #cce0ff; width: 20% ">Product Information</div>
			<div style="border: 1px solid #0066ff; padding: 3px;">
				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Product</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<select required class="row_select, changecolor" id="product" onchange="changeProduct()" onchange="update_TotalPrice()"> 
						<option value="">--Select--</option>
						<option value="Comfort Sleeper">Comfort Sleeper</option>
						<option value="Morgan Kids Bed">Morgan Kids Bed</option>
						<option value="Entertainment Cabinet">Entertainment Cabinet</option>
						</select>
					</div>
				</div>

				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Unit Price ($)</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<input disabled required  class="row_fill, changecolor" type="number" name="" id="price">
					</div>
				</div>

				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Quantity</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<input disabled required  class="row_fill, changecolor" type="number" name="" id="quantity" onkeyup="update_TotalPrice()">
					</div>
				</div>	

				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Total price</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<input disabled required  class="row_fill, changecolor" type="number" name="" id="total_Price" >
					</div>
				</div>							

			</div>
		</div>

		<div class="main_two">
			<div style="margin-top: -10px; background-color: #cce0ff; width: 20% ">Shipping Information</div>
			<div style="border: 1px solid #0066ff; padding: 3px;">
				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Product</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<input required  class="row_fill, changecolor" type="text" name="">
					</div>
				</div>

				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Shipping Addess</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<textarea class="changecolor" required  rows="5" style="width:80%; margin-left: 10px;"></textarea>
					</div>
				</div>

				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Credit Card</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<select required  class="row_select, changecolor" onchange="update_CreditCard()"> 
						<option>--Select--</option>
						<option>Visa</option>
						<option>Master Card</option>
						<option>American Express</option>
						</select>
					</div>
				</div>	

				<div class="row">
					<div style="width: 30%; border: 1px solid #0066ff">Credit Card Number</div>
					<div style="width: 68%; border: 1px solid #0066ff; margin-left: 10px;">
						<input id="Card1" disabled style="width: 10%" class="changecolor" required  class="row_fill" type="number" name="" pattern="[0-9]{1,4}">
						<input id="Card2" disabled style="width: 10%"class="changecolor" required  class="row_fill" type="number" name="" pattern="[0-9]{1,4}">
						<input id="Card3" disabled style="width: 10%"class="changecolor" required  class="row_fill" type="number" name="" pattern="[0-9]{1,4}">
						<input id="Card4" disabled style="width: 10%" class="changecolor" required  class="row_fill" type="number" name="" pattern="[0-9]{1,4}">
					</div>
				</div>							

			</div>
		</div>

		<div style="text-align: center; margin-top: 20px;">
			<button type="Submit">Submit</button>
			<button type="Reset">Reset</button>
		</div>
		</form>
	</div>

<script type="text/javascript">

var productList = {
	"Comfort Sleeper": "650",
	"Morgan Kids Bed": "975",
	"Entertainment Cabinet": "480"
}


	function changeProduct(){
		document.getElementById('quantity').disabled = false
		var product = document.getElementById('product').value
		switch(product){
			case '':
				document.getElementById('price').value = 0
				document.getElementById('quantity').value = 0
				document.getElementById('total_Price').value = 0

			case 'Comfort Sleeper':
				document.getElementById('price').value = 650
				break;

			case 'Morgan Kids Bed':
				document.getElementById('price').value = 975
				break;

			case 'Entertainment Cabinet':
				document.getElementById('price').value = 480
				break;
		}
	}

 function update_TotalPrice(){
 	var price = document.getElementById('price').value
 	var quantity = document.getElementById('quantity').value
 	totalPrice = price * quantity
 	document.getElementById('total_Price').value = totalPrice
 }

function update_CreditCard(){
	document.getElementById('Card1').disabled = false
	document.getElementById('Card2').disabled = false
	document.getElementById('Card3').disabled = false
	document.getElementById('Card4').disabled = false

}

</script>

</body>
</html>

Nguyễn Xuân Mai

2020-10-23 04:28:58

<!DOCTYPE html>
<html>
<head>
	<title>Purchase Order Form</title>
	<style type="text/css">
		.panel{
			border: solid grey 1px; background-color: #ccf0c9; width:1000px; 
		}

		.panel-heading{
			background-color: #babbf5; font-size: x-large; border: solid grey 1px; width: 250px; color:blue; font-weight: bold; padding: 10px; margin-top: 10px; margin-left: 10px;
		}

		.panel-body{
			padding-left: 10px; padding-top: 5px; color: #373ae6; font-weight: bold;
		}

		.form-group{
			color: black; font-weight: normal; padding: 5px;
		}
	</style>
</head>
<body>
	<div class="panel">
		<div class="panel-heading">Purchase Order Form</div>
		<div class="panel-body">
			Product Information
			<div class="form-group">
				<table border="1" cellspacing="2" cellpadding="3" style="border-color: blue">
					<tr>
						<td>Product:</td>
						<td><select id="product" onchange ="enable1()" required="true" >
							<option>--Select--</option>
							<option>Comfort Sleeper</option>
							<option>Morgan Kids Bed</option>
							<option>Entertainment Cabinet</option>
						</select></td>
					</tr>
					<tr>
						<td>Unit Price($):</td>
						<td><input type="number" name="price" id="price" onfocus="onfocus()" onkeyup="updateTotalPrice()" required="true" disabled="true"></td>
					</tr>
					<tr>
						<td>Quantity:</td>
						<td><input type="number" name="quantity" id="quantity" onfocus="onfocus()" onkeyup="updateTotalPrice()" onkeypress="quantityno()" required="true" disabled="true"></td>
					</tr>
					<tr>
						<td>Total Price($):</td>
						<td><input type="number" name="totalprice" id="totalprice" onfocus="onfocus()" disabled="true" required="true"></td>
					</tr>
				</table>
			</div>
		</div>
		<br>
		<div class="panel-body">
			Shipping Information
			<div class="form-group">
				<table border="1" cellspacing="2" cellpadding="3" style="border-color: blue">
					<tr>
						<td>Full Name:</td>
						<td><input type="text" name="name" id="fname" onfocus="onfocus()" required="true"></td>
					</tr>
					<tr>
						<td>Shipping Address:</td>
						<td><input type="text" name="address" id="address" onfocus="onfocus()" required="true"></td>
					</tr>
					<tr>
						<td>Credit Card:</td>
						<td><select id="card" onchange="enable2()" required="true">
							<option>--Select--</option>
							<option>VISA</option>
							<option>Master Card</option>
							<option>American Express</option>
						</select></td>
					</tr>
					<tr>
						<td>Credit Card Number:</td>
						<td>
							<input type="number" name="cardnumber" id="cardnumber1" onfocus="onfocus()" size="5" maxlength="4" required="true" disabled="true" onkeypress="cardno1()">
							<input type="number" name="cardnumber" id="cardnumber2" onfocus="onfocus()" size="5" maxlength="4" required="true" disabled="true" onkeypress="cardno2()">
							<input type="number" name="cardnumber" id="cardnumber3" onfocus="onfocus()" size="5" maxlength="4" required="true" disabled="true" onkeypress="cardno3()">
							<input type="number" name="cardnumber" id="cardnumber4" onfocus="onfocus()" size="5" maxlength="4" required="true" disabled="true" onkeypress="cardno4()">
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div style="padding-left: 10px ">
			<input type="button" name="submit" value="Submit" onclick="submit()">
			<input type="button" name="reset" value="Reset" onclick="reset()">
		</div>
	</div>

	<script type="text/javascript">
		function onfocus(){
			var inputList = document.getElementsByTagName('input')
			console.log(inputList)

			for (var i = 0; i < inputList.length; i++) {
				inputList[i].style.backgroundColor = 'yellow'
				inputList[i].value = i
			}
		}

		function enable1(){
			var product=document.getElementById('product').value;
			if(product = 'Comfort Sleeper'){
				document.getElementById('price').value=650
                document.getElementById('quantity').disabled=false
			} else if (product = 'Morgan Kids Bed'){
				document.getElementById('price').value=975
                document.getElementById('quantity').disabled=false
			} else if (product = 'Entertainment Cabinet'){
				document.getElementById('price').value=480
                document.getElementById('quantity').disabled=false
			}
		}

		function enable2(){
			var card=document.getElementById('card').value
			if (card != '--Select--'){
				document.getElementById('cardnumber1').disabled=false
				document.getElementById('cardnumber2').disabled=false
				document.getElementById('cardnumber3').disabled=false
				document.getElementById('cardnumber4').disabled=false
			}
		}

		function updateTotalPrice() {
			var price = document.getElementById('price').value
			var quantity = document.getElementById('quantity').value
			totalprice = price * quantity
			document.getElementById('totalprice').value = totalprice
		}

		function quantityno() {
            if(isNaN(document.getElementById('quantity').value)=true){
                alert('Enter Number Only!')
                document.getElementById('quantity').value=''
            }
        }

        function submit(){
        	 if(document.getElementById('product').value!='--Select--' && document.getElementById('price').value!='' && document.getElementById('quantity').value!='' && document.getElementById('totalprice').value!='' && document.getElementById('fname').value!='' && document.getElementById('address').value!='' && document.getElementById('card').value!='--Select--' && document.getElementById('cardnumber1').value!='' && document.getElementById('cardnumber2').value!='' && document.getElementById('cardnumber3').value!='' && document.getElementById('cardnumber4').value!=''){
                alert('Your form has been submitted successfully!')
            }
            else{
                alert('Please fill all information!')
            }
        }

        function reset(){
        	document.getElementById('product').value='--Select--'
        	document.getElementById('price').value=''
        	document.getElementById('quantity').value=''
        	document.getElementById('quantity').disabled=true
        	document.getElementById('totalprice').value=''
        	document.getElementById('fname').value=''
        	document.getElementById('address').value=''
        	document.getElementById('card').value='--Select--'
        	document.getElementById('cardnumber1').value=''
        	document.getElementById('cardnumber2').value=''
        	document.getElementById('cardnumber3').value=''
        	document.getElementById('cardnumber4').value=''
        	document.getElementById('cardnumber1').disabled=true
        	document.getElementById('cardnumber2').disabled=true
        	document.getElementById('cardnumber3').disabled=true
        	document.getElementById('cardnumber4').disabled=true
        }
	</script>
</body>
</html>

Nguyễn Tiến Đạt

2020-10-22 04:40:47

#payment.css

.main{
    margin: 0 auto;
    width: 600px;
    height: 503px;
    background-color: rgb(168, 235, 201);
    display: flow-root;
}
.top{
    width: 280px;
    height: 30px;
    border: 1px solid grey;
    background-color: rgb(188, 213, 229);
    color: rgb(80, 121, 160);
    padding-left: 50px;
    margin-left: 10px;
    margin-top: 10px;
}
.information1{
    border: 1px solid grey;
    border-radius: 3px;
    width: 550px;
    height: 140px;
    margin-top: 40px;
    margin-left: 5px;
}
.information2{
    border: 1px solid grey;
    border-radius: 3px;
    width: 550px;
    height: 190px;
    margin-top: 40px;
    margin-left: 5px;
}
.onborder1{
    position:absolute;
    margin-top: 73px;
    margin-left: 482px;
    background-color:rgb(168, 235, 201) ;
    color: rgb(89, 134, 175);
    font-size: 18px;
}
.onborder2{
    position:absolute;
    margin-top: 254px;
    margin-left: 482px;
    background-color:rgb(168, 235, 201) ;
    color: rgb(89, 134, 175);
    font-size: 18px;
}
table{
    margin-top: 15px;
    margin-left: 25px;
    background-color:rgb(115, 214, 218) ;
    border-color: rgb(69, 136, 141);
}
td{
    border-color: rgb(69, 136, 141);
    background-color: rgb(214, 211, 211);
}
.yellowhover:focus{
    background-color: yellow;
}
li{
    padding-right: 5px;
}
.footer{
    margin-top: 5px;
    width: 61.84%;
    height: 30px;
    background-color: rgb(214, 211, 211);
    border: 1px solid grey;
    display: flex;
    padding: 5px;
    padding-left: 222px;
}
.reset{
    cursor: pointer;
}
.submit{
    margin-right: 7px;
    text-align: center;
    border: 1px solid grey;
    background-color: #efefef;
    padding-top: 4px;
    border-radius: 2px;
    padding-left: 6px;
    padding-right: 6px;
    cursor: pointer;
}
.submit:hover{
    background-color: rgb(211, 207, 207);
}

#payment.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment</title>
    <link rel="stylesheet" href="payment.css">
    <script>
        function production() {
            var product=document.getElementById('fm_production').value;
            switch(product){
                case '':
                document.getElementById('fm_price').value=0;
                document.getElementById('fm_quantity').disabled=true 
                document.getElementById('fm_quantity').value=0
                document.getElementById('fm_totalprice').value=0
                break;
                case 'Comfort Sleeper':
                document.getElementById('fm_price').value=650;
                document.getElementById('fm_quantity').disabled=false
                break;
                case 'Morgan Kids Bed':
                document.getElementById('fm_price').value=975;
                document.getElementById('fm_quantity').disabled=false
                break;
                case 'Entertainment Cabinet':
                document.getElementById('fm_price').value=480;
                document.getElementById('fm_quantity').disabled=false
                break;
            }
        }
        function calculate() {
            var x=document.getElementById('fm_price').value;
            var y=document.getElementById('fm_quantity').value;
            if(isNaN(y)){
                alert('Only number!!')
                document.getElementById('fm_quantity').value='';
                document.getElementById('fm_totalprice').value=0
            }
            else{
                document.getElementById('fm_totalprice').value=x*y;
            }
        }
        function credit() {
            var creditcard=document.getElementById('fm_credit').value
            if(creditcard!=''){
                document.getElementById('number1').disabled=false
                document.getElementById('number2').disabled=false
                document.getElementById('number3').disabled=false
                document.getElementById('number4').disabled=false
            }
            else{
                document.getElementById('number1').disabled=true
                document.getElementById('number2').disabled=true
                document.getElementById('number3').disabled=true
                document.getElementById('number4').disabled=true
            }
        }
        function pressnumber1() {
            if(isNaN(document.getElementById('number1').value)){
                alert('Only number!!')
                document.getElementById('number1').value=''
            }
        }
        function pressnumber2() {
            if(isNaN(document.getElementById('number2').value)){
                alert('Only number!!')
                document.getElementById('number2').value=''
            }
            
        }
        function pressnumber3() {
            if(isNaN(document.getElementById('number3').value)){
                alert('Only number!!')
                document.getElementById('number3').value=''
            }
            
        }
        function pressnumber4() {
            if(isNaN(document.getElementById('number4').value)){
                alert('Only number!!')
                document.getElementById('number4').value=''
            }
            
        }
        function Reset() {
            document.getElementById('fm_quantity').disabled=true
            document.getElementById('number1').disabled=true
            document.getElementById('number2').disabled=true
            document.getElementById('number3').disabled=true
            document.getElementById('number4').disabled=true
        }
        function Submit() {
            if(document.getElementById('fm_price').value!='' && document.getElementById('fm_quantity').value!='' && document.getElementById('fm_production').value!='' && document.getElementById('fm_totalprice').value!='' && document.getElementById('name').value!='' && document.getElementById('text').value!='' && document.getElementById('fm_credit').value!='' && document.getElementById('number1').value!='' && document.getElementById('number2').value!='' && document.getElementById('number3').value!='' && document.getElementById('number4').value!=''){
                alert('Success!!')
            }
            else{
                alert('Please fullfill all information!!')
            }
        }
    </script>
</head>
<body>
    <div class="onborder1">Product Information</div>
    <div class="onborder2">Shipping Information</div>
    <div class="main">
        <div class="top">
            <strong style="font-size: 25px;">Purchase Order Form</strong>
        </div>
        <form>
            <div class="information1">
                <table border="1">
                    <tr>
                        <td style="width: 184px;">Product:</td>
                        <td style="width: 307px;padding-left: 5px;">
                            <select id="fm_production" onchange="production()">
                                <option value="">Select</option>
                                <option value="Comfort Sleeper">Comfort Sleeper</option>
                                <option value="Morgan Kids Bed">Morgan Kids Bed</option>
                                <option value="Entertainment Cabinet">Entertainment Cabinet</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Unit Price ($):</td>
                        <td style="padding-left: 5px;"><input style="width: 50px;" id="fm_price" type="text" value="0" disabled></td>
                    </tr>
                    <tr>
                        <td>Quantity:</td>
                        <td onkeyup="calculate()" style="padding-left: 5px;"><input style="width: 45px;" id="fm_quantity" type="text" value="0" disabled></td>
                    </tr>
                    <tr>
                        <td>Total Price ($):</td>
                        <td style="padding-left: 5px;"><input style="width: 50px;" id="fm_totalprice" type="text" value="0" disabled></td>
                    </tr>
                </table>
            </div>
            <div class="information2">
                <table border="1">
                    <tr>
                        <td style="width: 184px;">Fullname:</td>
                        <td style="width: 307px;padding-left: 5px;">
                            <input id="name" class="yellowhover" type="text" style="width: 190px;">
                        </td>
                    </tr>
                    <tr>
                        <td><div style="margin-top: -33px;">Shipping Address:</div></td>
                        <td style="padding-left: 5px;"><textarea id="text" class="yellowhover" cols="30" rows="4"></textarea></td>
                    </tr>
                    <tr>
                        <td>Credit Card:</td>
                        <td style="padding-left: 5px;">
                            <select id="fm_credit" onchange="credit()">
                                <option value="">Select</option>
                                <option value="VISA">VISA</option>
                                <option value="Master Card">Master Card</option>
                                <option value="American Express">American Express</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>Credit Card Number:</td>
                        <td style="display: flex;list-style-type: none;padding-left: 5px;">
                                <li><input id="number1" onkeyup="pressnumber1()" maxlength="4" type="text" style="width: 45px;" disabled></li>
                                <li><input id="number2" onkeyup="pressnumber2()" maxlength="4" type="text" style="width: 45px;" disabled></li>
                                <li><input id="number3" onkeyup="pressnumber3()" maxlength="4" type="text" style="width: 45px;" disabled></li>
                                <li><input id="number4" onkeyup="pressnumber4()" maxlength="4" type="text" style="width: 45px;" disabled></li>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="footer">
                <div class="submit" onclick="Submit()" type="submit" value="Submit">Submit</div>
                <input onclick="Reset()" class="reset" type="reset" value="Reset">
            </div>
        </form>
    </div>
</body>
</html>

Bài tập - quản lý form payment - Lập trình Javascript

Tags:

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

5

Nguyễn Trần Tuân

#27.2.2021.html

#27.2.2021.js

#style.css

Vũ Ngọc Văn

Đào Mạnh Dũng

#codepur.js

#purchase.html

#stylels.css

TRẦN VĂN ĐIỆP

#style.css

#vidu.html

silentvoice

nguyen hoang viet

Đặng Trần Nhật Minh

Do Trung Duc

Nguyễn Xuân Mai

Nguyễn Tiến Đạt

#payment.css

#payment.html