[js] form 값 가져오기 / 입력하기

javascript로 다양한 form element들의 값을 가져올 수 있고 값을 입력할 수도 있어야 한다

javascript는 form element들을 접근할 수 있는 다양한 방법을 제공한다

특히 name 값을 활용한다

 

* form에서 읽어온 값은 무조건 string 이다

//입력값 보여주기
let result = "입력결과<br>";

//<form> element 객체 가져오기
let frm = document.forms['myform1'];

//input의 입력된 값 가져오기
let usename = frm['username'].value;
result += `이름 : ${usename}<br>`;

//checkbox의 값이 체크되면 해당 value 값 가져오기 (.checked로 판단) -> 복수로 선택될 수 있어 배열!
let hobby = [];
frm['drive'].checked.value && hobby.push(frm['drive']).value);
if(frm['music'].checked) {
    hobby.push(frm['music'].value);
}
if(frm['music'].checked) {
    hobby.push(frm['music'].value);
}
result += `취미 : ${hobby}.join(',')<br>`

//check + 동일한 name이 여러개
let skill = [];
for(e of frm['skill']) {
 e.checked && skill.push(e.value)
 }
 result += `보유 기술 : ${skill}.join(',')<br>`

//radio check + 동일한 name 여러개 but 하나만 체크할테니 한번 실행하고 break
let gender = "";
for(e of frm['gender']) {
 if(e.checked) {
   gender = e.value;
   break;
   }
}
result += `성별 : ${gender}<br>`;

//select
result += "좋아하는차1 : " + frm['cars'].value + "<br>";

//<select> : multiple
let cars2 = [];
for(e of frm['cars2']){
 e.selected && cars2.push(e.value);
}
 result += `좋아하는차2: ${cars2.join(',')}<br>`;

//<textarea> : .value 사용
result += '메모: ' + frm['message'].value + "<br>";

document.getElementById('result').innerHTML = result;




//입력값 세팅하기
let frm = document.forms['myform1'];

//input
frm['username'].value = "홍길동";

//checkbox
frm['drive'].checked = true;
frm['music'].checked = false;
frm['sports'].checked = true;

//checkbox 동일한 name
frm['skill'][0].checked = false;
frm['skill'][1].checked = false;
frm['skill'][2].checked = true;

//radio
frm['gender'][1].checked = true;

//select(단일)
frm['cars'][1].checked = true;

//select(multiple)
frm['cars2'][0].checked = true;
frm['cars2'][0].checked = false;
frm['cars2'][0].checked = false;
frm['cars2'][0].checked = true;

//textarea
frm['message'].value = '안녕하세요';