const $orderForm = document.forms.order;
const $userInfo = $orderForm.elements.userInfo;
const $productInfo = $orderForm.elements.productInfo;
console.log($orderForm);
console.log($userInfo);
console.log($productInfo);
document.getElementById('btn1')
.addEventListener('click', e=>{
const { name, tel } = $userInfo.elements;
console.log($userInfo.elements);
console.log(`${name.value}사용자 ${tel.value}로 주문합니다.`);
});
$orderForm.addEventListener('submit',e=>{
e.preventDefault();
const {productName, color} = $productInfo.elements;
console.log(`상품명 : ${productName.value}\n색상:${color.value}`);
$orderForm.method = 'GET';
$orderForm.submit();
});
Form은 자바스크립트에서 워낙 중요하고 자주 쓰이니 따로 저렇게 document.forms로 조회할 수 있음.
document.forms.폼네임
<form name="order">
$폼및폼요소.elements
하면 input, textarea, select 등 폼요소의 자손들이 나옴.
$태그.elements.자손이름
해서 딱 그 자손을 찝을 수도 있음.
저거 elements 찍어보면 0,1 해서 form관련 요소의 자손들이 인덱스로 있음.
'프론트엔드-코드 > Javascript' 카테고리의 다른 글
html의 사용자 정의 속성 (0) | 2023.09.27 |
---|---|
현재 문서 정보 (0) | 2023.09.27 |
사용자 정의 이벤트 (0) | 2023.09.26 |
가장 가까운 조상 찾기 (0) | 2023.09.26 |
기본 이벤트 막기 (ex:우클릭 콘텍스트메뉴) (0) | 2023.09.26 |