DAY28(1) - form 다루기

은나현·2023년 3월 7일

JavaScript

[프로젝트 중심] 자바 개발 & 빅데이터 분석 전문가 양성과정

목록 보기

46/88

📌 1. 객체, 값 획득 방법

📍 1-1. id값 사용

id값에 의한 객체 획득 방법
: let e1 = document.getElementById("id값");
id값에 의한 입력값 획득 방법
: document.getElementById("id값").value;

📍 1-2. name값 사용

name값에 의한 객체 획득 방법
: let e2 = document.form1.객체name
name값에 의한 입력값 획득 방법
: document.form1.객체name.value;

📍 1-3. select 태그

selectedIndex : 사용자가 select타입의 input 태그에서 선택한 위치의 값
- 획득 방법 : 객체.selectedIndex
- selectedIndex값을 할당하면 그 위치에 해당하는 <option>태그가 강제로 선택된다.
  - 예시 : document.form1.sel.selectedIndex = 2;
선택 항목의 값 조회하기
- <select> 태그의 객체는 하위<option>태그 객체를 배열 형태로 가지고 있기 때문에, 배열의 인덱스 값을 selectedIndex 속성값으로 사용하면 선택한 <option>태그의 객체를 획득할 수 있다.
- 예시 : document.form1.sel[document.form1.sel.selectedIndex].value;

📍 1-4. 체크박스, 라디오 버튼

체크박스나 라디오 버튼의 n번째 인덱스 버튼 값 획득
: let val = document.form1.buttons[n].value;
체크박스나 라디오 버튼의 n번째 인덱스 버튼 체크 상태 검사
: let checked = document.form1.buttons[n].checked;
- 체크되었을 시 true, 아닐 시 false
체크박스나 라디오 버튼의 n번째 인덱스 버튼을 체크 상태로 만들기
: document.form1.buttons[n].checked = true;

📌 2. focus, reset, submit

📍 2-1. 포커스 지정(focus)

포커스focus는 입력 컴포넌트에 입력을 위한 커서가 지정된 상태를 뜻한다.
컴포넌트에 포커스 지정 방법
: document.form1.comp.focus();

📍 2-2. 리셋(reset)

리셋reset은 form 객체의 reset 버튼과 같이 작성 내용을 리셋한다.
리셋 버튼 생성 방법
: <input type="reset"/>
컴포넌트 리셋 방법
: document.form1.comp.reset();

📍 2-3. 내용 전송(submit)

전송submit은 form 객체의 submit 버튼과 같이 작성 내용을 전송한다.
전송 버튼 생성 방법
: <input type="submit"/>
폼 직접 전송 방법
: document.form1.submit();

➕ 예시 코드_ validationCheck

	<body>
		<form name="form1" onsubmit="doSubmit(); return false;">
			<fieldset>
				<legend>회원가입</legend>
				<div class="input_group first">
					<label>이름</label>
					<input type="text" name="user_name" />
				</div>
				<div class="input_group">
					<label>성별</label>
					<label><input type="radio" name="gender" 
                                  value="M"> 남자</label>
					<label><input type="radio" name="gender" 
                                  value="F"> 여자</label>
				</div>
				<div class="input_group">
					<label>직업</label>
					<select name="job">
						<option>----- 선택하세요 -----</option>
						<option value="dev">프로그래머</option>
						<option value="pub">퍼블리셔</option>
					</select>
				</div>
				<div class="input_group">
					<label>취미</label>
					<label><input type="checkbox" value="축구" 
                                  name="hobby"> 축구</label>
					<label><input type="checkbox" value="농구" 
                                  name="hobby"> 농구</label>
					<label><input type="checkbox" value="야구" 
                                  name="hobby"> 야구</label>
				</div>
				<div class="input_group">
					<label>&nbsp;</label>
					<input type="submit" name="button" value="제출"/>
					<input type="button" name="button2" value="리셋"/>
				</div>
			</fieldset>
		</form>
		<script>
			function doSubmit(){
				let frm = document.form1;
				//validation check
				//text요소의 입력 여부 검사
				if (!frm.user_name.value){
					// 값이 없을 때
					alert("이름을 입력해 주세요");
					frm.user_name.focus();
					return false;
				}
				// 라디오버튼 입력 여부 검사
				if(!frm.gender[0].checked 
					&& !frm.gender[1].checked){
					alert("성별을 선택해 주세요");
					return false;
				}
				// select 요소에 대한 선택 위치 검사
			 	if(document.form1.job.selectedIndex<1){
					alert("직업을 선택해 주세요")
					frm.job.focus();
					return false;
				}
				// 체크박스 선택 여부 검사
				let chk = false;
				for(let i=0; i<frm.hobby.length;i++){
					if(frm.hobby[i].checked){
						chk = true;
						break;
					}
				}
				if(!chk){
					alert("취미를 선택해 주세요");
					return false;
				}
				if(confirm("입력하신 내용이 맞습니까?")){
					frm.submit();
					alert("제출 완료");
					frm.clear();
				}
			}
		</script>
	</body>