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
Tags:
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 [community,C2010L]](https://www.gravatar.com/avatar/0a08195aa34b45d11720149b07201aa0.jpg?s=80&d=mm&r=g){kind=avatar}
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 [community,C2010L]](https://www.gravatar.com/avatar/3bec4690245af20ea34f68305e3e24b1.jpg?s=80&d=mm&r=g){kind=avatar}
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 [community,C2010L]](https://www.gravatar.com/avatar/6a111fa53fd75dc87034660a8857df16.jpg?s=80&d=mm&r=g){kind=avatar}
Đà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 [Teacher]](https://www.gravatar.com/avatar/fc6ba9324e017d540af3613b3a77dd21.jpg?s=80&d=mm&r=g){kind=avatar}
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 [C2009I]](https://www.gravatar.com/avatar/9e5d35bff7e4f5191ba44a5e273bd9ca.jpg?s=80&d=mm&r=g){kind=avatar}
silentvoice
2020-12-22 06:54:55
https://phamngoclong.herokuapp.com/baitaplap8/bai1/frompayment.html
![nguyen hoang viet [community,C2009I]](https://www.gravatar.com/avatar/d2766fccea69cebc93358554d1a18e65.jpg?s=80&d=mm&r=g){kind=avatar}
nguyen hoang viet
2020-12-21 16:20:32
https://nguyenhoangviet.herokuapp.com/formpayment.html
![Đặng Trần Nhật Minh [T2008A]](https://www.gravatar.com/avatar/ee8dc5a777ad26f3a962e86c233437cf.jpg?s=80&d=mm&r=g){kind=avatar}
Đặ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 [T2008A]](https://www.gravatar.com/avatar/2973ac07124f066b4605c535e8d39a99.jpg?s=80&d=mm&r=g){kind=avatar}
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 [T2008A]](https://www.gravatar.com/avatar/d3d863d6f47708501814fb41e9c38f31.jpg?s=80&d=mm&r=g){kind=avatar}
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 [T2008A]](https://www.gravatar.com/avatar/b5819cd0adc95c727c7ad0c2bcf6098b.jpg?s=80&d=mm&r=g){kind=avatar}
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>
