[Javascript] input 태그 value 제어

티스토리 뷰

WEB/자바스크립트

[Javascript] input 태그 value 제어

춘햄 2021. 5. 14. 11:22

자바 스크립트를 이용하여 input 태그의 value 값을 저장하고, 그 값을 다른 input 태그의 value에 삽입하는 간단한 예제이다.

바로 코드를 보자. (css는 주요 내용을 포함하고 있지 않기 때문에 생략)

◎order-result.js

var check = document.querySelector("#shippingInfo");

check.addEventListener("click", function checkFunction() {
	if (check.checked == true) {
		var bName = document.querySelector("#billingName").value;
		var bTel = document.querySelector("#billingTel").value;
		var bAddr = document.querySelector("#billingAddr").value;

		document.querySelector("#shippingName").value = bName;
		document.querySelector("#shippingTel").value = bTel;
		document.querySelector("#shippingAddr").value = bAddr;
	} else{
		document.querySelector("#shippingName").value = "";
		document.querySelector("#shippingTel").value = "";
		document.querySelector("#shippingAddr").value = ""
	}
});

◎order-result.html

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>결제하기</title>
	<link rel="stylesheet" href="css/order.css">
</head>
<body>
	<div id = "container">
		<form name =  "order">
			<fieldset>
				<legend>주문 정보</legend>
				<ul>
					<li>
						<label class = "field" for ="billingName">이름</label>
						<input type = "text" class = "input-box" id = "billingName" name =""/>
					</li>
					
					<li>
						<label class = "field" for ="billingTel">연락처</label>
						<input type = "text" class = "input-box" id = "billingTel" name ="billingTel"/>
					</li>
					
					<li> 
						<label class = "field" for ="billingAddr">주소</label>
						<input type = "text" class = "input-box" id = "billingAddr" name ="billingAddr"/>
					</li>
				</ul>
			</fieldset>
		</form>
		
		<form name =  "ship">
			<fieldset>
				<legend>배송 정보</legend>
				<ul>
					<li>
						<input type = "checkbox" id = "shippingInfo" name = "shippingInfo" checked = "checked" />
						<label for = "shippingInfo">주문정보와 배송정보가 같습니다.</label>
					</li>
					<li>
						<label class = "field" for ="billingName">이름</label>
						<input type = "text" class = "input-box" id = "shippingName" name ="shippingName"/>
					</li>
					
					<li>
						<label class = "field" for ="billingTel">연락처</label>
						<input type = "text" class = "input-box" id = "shippingTel" name ="shippingTel"/>
					</li>
					
					<li> 
						<label class = "field" for ="billingAddr">주소</label>
						<input type = "text" class = "input-box" id = "shippingAddr" name ="shippingAddr"/>
					</li>
				</ul>
			</fieldset>
			<button type = "submit" class = order>결제하기</button>
		</form>
	</div>
	
	<script src = "js/order-result.js"></script>
</body>
</html>

"주문 정보와 배송 정보가 같습니다." check box를 클릭했을 때,

위와 같이 바로 동일한 값이 삽입이 된다.

'WEB > 자바스크립트' 카테고리의 다른 글

[Javascript] 브라우저 정보 추출 (0)	2021.05.14
[Javascript] checkbox & Event 예제 <토핑> (0)	2021.05.14
[Javascript] form 내부 태그 제어 (0)	2021.05.14
[Javascript] 이벤트 (0)	2021.05.13
[Javascript] 간단한 D - day 페이지 (0)	2021.05.13