프론트엔드-코드/Javascript

Form 객체

sdafdq 2023. 9. 26. 16:51
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관련 요소의 자손들이 인덱스로 있음.