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 Phấn Đông [T2008A]
Nguyên Phấn Đông

2020-10-22 04:13:24


#chuabai.html


<!DOCTYPE html>
<html>
<head>
	<title>Xây dựng trang web </title>
	<meta charset="utf-8">
	<style type="text/css">
		#body{
            border: 1px solid #000000;
            background-color: #84d6db;
			width: 500px;
			height: 700px;
			margin-left: 30%
		}
		#caption{
	background-color:#88ced1;
	border: 1px solid #000000 ;
	color: #1a6b70;
	padding:  2px; 
  	font-size: 20px;	
  	float: left;
  	margin-left: 5%;
		}
		table, th, td {
			    margin-left: 2px;
        	    border: 1px solid black;
        	    width: 60%;
        	    padding: 2px;
        	    min-width: 200px;
        	    background-color: #bfe1ff;
        	}
        	fieldset{
        	margin-left: 10px;
        	margin-right: 10px;
        	border: 1px solid #dae3eb;
        	}
	</style>
</head>
<body>
	
  <form id="body">
  <h1 id="caption" >Purchase order form</h1><br><br><br><br>
  <fieldset>
  	<legend>Product Information</legend>
  <table border="1" style="margin-left: 0%;" >
  	<tr>
  		<td>Product:</td>
  		<td><select id="manuafaturer_name" onchange="changeManufaturer()">
  			<option>Select</option>
  		</select>
  	</td>
  	</tr>
  	<tr>
  		<td>Unit Price</td>
  		<td id="category_name"><input class="form-control" type="text" name="Unitprice" id="Unitprice" value="0" disabled="true" onkeyup="updateTotalPrice()">
					</td>
  	</tr> 
  	<tr>
  		<td>Quantity</td>
  		<td id='quantity_name'><input class="form-control" type="number" name="quantity1" id="quantity1" placeholder="Enter quantity" value="0" disabled="true" onkeyup="updateTotalPrice()"  onkeydown="keydownFunction()" onkeyup="keyupFunction()"></td>
  	</tr>
  	<tr>
  		<td>Total price</td>
  		<td><input class="form-control" type="text" name="total_price" id="total_price" value="0" disabled="true" ></td>
  	</tr>
  </table>
  </fieldset>
  <fieldset>
  	<legend>Shipping Information</legend>
  	<table>
  		<tr>
  			<td><label>Full name</label></td>
  			<td><input type="text" name="fullname"></td>
  		</tr>
  		<tr>
  			<td><label>Shipping address</label></td>
  			<td><textarea rows="4" cols="25" name="comment" form="usrform"> </textarea></td>
  		</tr>
  		<tr>
  		<td>Credit card</td>
  		<td><select id="manut123" onchange="manu44()">
  			<option>Select</option>
  			<option>VISA</option>
  			<option>Master Card</option>
  			<option>American Express</option>
  		</select>
  		<tr>
  			<td>Credit card number</td>
  			<td><input type="text" maxlength="4" onkeypress="return isNumberKey(event)"  size="1">
  			<input type="text" maxlength="4" onkeypress="return isNumberKey(event)"  size="1">
  		<input type="text" maxlength="4" onkeypress="return isNumberKey(event)"  size="1">
  	<input type="text" maxlength="4" onkeypress="return isNumberKey(event)"  size="1"></td>
  		</tr>
  	</table>
        
  </fieldset>
  <div style="margin-left: 50%">
					<input type="submit" name="submit">
					<button class="btn btn-danger" type="reset">Reset</button>
				</div>
</form>
<script type="text/javascript">
	var manufactureList = {
			"Comfort Sleeper": [
				"650"
			],
			"Morgan Kids Bed": [
				"975"
			],
			"Entertainment Cabinet ": [
				"480"
			]
		}
		var productList = []

		var manuafaturerTag = document.getElementById('manuafaturer_name')
		for(var key in manufactureList) {
			manuafaturerTag.innerHTML += `<option value='${key}'>${key}</option>`
		}

		function changeManufaturer() {
			key = manuafaturerTag.value
			categoryList = manufactureList[key]
			console.log(categoryList)

			var categoruTag = document.getElementById('category_name')
			categoruTag.innerHTML = ''
			var quantityTag = document.getElementById('quantity_name')
			quantityTag.innerHTML = ''
		 

			if(categoryList != null) {
				for (var i = 0; i < categoryList.length; i++) {
					categoruTag.innerHTML += `<input type="text" value="${categoryList[i]}" disabled="true">`
                  quantityTag.innerHTML += `<input class="form-control" type="number" name="quantity1" id="quantity1" placeholder="Enter quantity" value="0" enabled="true"  onkeydown="keydownFunction()" onkeyup="keyupFunction()">`
				}
			}
		}
		function updateTotalPrice() {
			var price = document.getElementById('Unitprice').value
			var quantity = document.getElementById('quantity').value

			totalPrice = price * quantity

			document.getElementById('total_price').value = totalPrice
		}
		function keydownFunction() {
document.getElementById("quantity1").style.backgroundColor = "yellow";
}

function keyupFunction() {
document.getElementById("quantity1").style.backgroundColor = "White";
}
</script>
</body>
</html>


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

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