1. 주문서
body 태그
<body>
<!-- 배송 정보 자동으로 입력하기 1 -->
<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="billingName">
</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="shipping">
<fieldset>
<legend> 배송 정보</legend>
<ul>
<li>
<input type="checkbox" id="shippingInfo" name="shippingInfo">
<label class="check">주문 정보와 배송 정보가 같습니다</label>
</li>
<li>
<label class="field" for="shippingName">이름 : </label>
<input type="text" class="input-box" id="shippingName" name="shippingName">
</li>
<li>
<label class="field" for="shippingTel">연락처 : </label>
<input type="text" class="input-box" id="shippingTel" name="shippingTel">
</li>
<li>
<label class="field" for="shippingAddr">주소 : </label>
<input type="text" class="input-box" id="shippingAddr" name="shippingAddr">
</li>
</ul>
</fieldset>
</form>
<button type="submit" class="order">결제하기</button>
</div>
</body>
order.css
* {
margin:0;
padding:0;
box-sizing: border-box;
}
ul {
list-style: none;
}
legend {
font-size:1.2em;
font-weight:bold;
margin-left:20px;
}
form {
width:520px;
height:auto;
padding-left:10px;
margin:50px auto;
}
fieldset {
border:1px solid #c0c0c0;
padding:30px 20px 30px 30px;
margin-bottom:35px;
}
.field {
float:left;
width:60px;
font-weight:bold;
font-size:0.9em;
line-height: 55px;
text-align:right;
margin-right:15px;
}
.input-box {
width:350px;
height:35px;
border:1px solid #aaa;
border-radius:5px;
padding:5px;
margin:10px 0;
float:left;
}
.order {
width:100%;
padding:20px;
border:1px solid #aaa;
background:#e9e9e9;
font-size:1em;
font-weight:bold;
}
'주문 정보와 배송 정보가 같습니다' 클릭 시 주문 정보 가지고 오고, 클릭 해제시 정보 지우는 코드
<head>
<link rel="stylesheet" href="css/order.css">
<script>
document.addEventListener('DOMContentLoaded', function () {
const check = document.querySelector('#shippingInfo');
// 체크박스의 id는 shippingInfo
check.addEventListener('click', function () {
// check 요소에 click 이벤트가 발생했을 때 실행할 함수
if (this.checked) { // 체크 되었을 때
document.querySelector('#shippingName').value = document.getElementById('billingName').value;
document.querySelector('#shippingTel').value = document.getElementById('billingTel').value;
document.querySelector('#shippingAddr').value = document.getElementById('billingAddr').value;
} else { // 체크 해제되었을 때 배송정보 지움
document.querySelector('#shippingName').value = "";
document.querySelector('#shippingTel').value = "";
document.querySelector('#shippingAddr').value = "";
}
});
});
</script>
</head>
💡 폼 요소 접근 방법 3가지
1. id 값이나 class 값을 사용해 폼 요소에 접근하기
👾 id 값이나 class 값을 사용해 폼 요소에 접근하는 방법은 DOM의 다른 요소에 접근하는 것과 같음
👾 querySelector() 함수나 querySelectorAll() 함수를 사용
👾 텍스트 필드에 있는 값을 가져오기 위해서는 텍스트 필드에 접근하는 소스 뒤에 value 속성을 붙임
console.log(document.getElementById('billingName').value) console.log(document.querySelector('[name=billingName]').value);
2. name 값을 사용해 폼 요소에 접근하기
👾 폼 요소에 id나 class 속성이 없고 name 속성만 있는 경우 name 식별자를 사용해 폼 요소에 접근
👾 이 방법을 사용하려면 <form> 태그에 name 속성이 지정되어 있어야 하고,
<form> 태그안에 포함된 폼 요소에도 name 속성이 있어야 함
👾 폼 안에 있는 텍스트 필드에 접근하려면 <form>의 name 값과 텍스트 필드의 name 값을 사용
👾 submit시에 input의 name은 서버로 전송. 하지만 form의 name은 서버로 전송되지 않음
console.log(document.order.billingName.value);
3. 폼 배열을 사용해 폼 요소에 접근하기
👾 document의 속성 중 forms 속성은 문서 안에 있는 <form> 태그를 모두 가져와 배열 형태로 반환
👾 이 방법은 폼 요소에 id나 class 속성도 없고 name 속성도 없을 때 유용
👾 <form> 태그 안에 포함된 요소에 접근하려면 elements 속성을 사용
➡️ 해당 폼 안에 있는 모든 폼 요소를 가져오는 속성, 인덱스 번호로 접근
console.log(document.forms[0].elements[1].value);
[ 내용 참고 : IT 학원 강의 ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] localStorage 객체 (0) | 2024.04.07 |
|---|---|
| [JavaScript] 회원가입 예제 (0) | 2024.04.05 |
| [JavaScript] 드롭다운 목록, 체크박스, 라디오 버튼, 기본 이벤트 막기, 참가신청 명단 (0) | 2024.04.05 |
| [JavaScript] 키보드 이벤트 및 관련 속성, 이벤트 발생 객체 - 리스너를 외부로 빼낸 경우 와 글자입력 양식 이벤트 (0) | 2024.04.03 |
| [JavaScript] 이벤트 핸들러 등록과 제거 (0) | 2024.04.02 |