두둥 다시 돌아온 form 태그 !!
[form객체 얻는 방법]
ex)
form의 하위 객체로
아이디: <input type="text" name="choi"/>
※form객체를 이용해서 form의 하위객체 얻기
원칙) form객체.name속성에 지정한 값 : form객체.choi
1. <form> : form에 id및 name속성 지정 안한 경우
-document.forms(HTMLCollection) 이용
ex. 해당 HTML문서에서 첫번째 (유사배열)
form태그인 경우 : document.forms[0].choi
2. <form name="폼이름"> : form에 name속성 지정한 경우(가장 코드가 짧고 많이 씀)
-바로 폼이름이 form객체가 됨
<form name="frmObj">
ex.폼이름.name속성에 지정한 값
frmObj.choi
3. <form id="id명"> : form에 id속성 지정한 경우
- document.getElementById("id명").choi
혹은
document.querySelector("#id명").choi
4. document객체의 getElementsByTagName("form")[인덱스].choi
혹은
getElementsByName("폼이름")[인덱스].choi
5. this.form키워드로 form객체를 얻어 올 수 있다.
<input type="button" onclick = "fnSubmit(this.form)"/>
****※자바스크립트 코드로 submit시 submit이벤트는 발생하지 않는다****
ex) form객체.submit( ); 단순히 함수를 호출한다고 해서 이벤트는 발생 안해 .. 전송만 됨
얻어온 HTML가.. 길다... 근데 submit 기능이 있는 버튼 없는 버튼등 모든 경우를 다 처리 해 줘야 한다 !!
<h2 name="h2Obj" id="h2Id">회원가입 페이지</h2>
<!--방법1]submit기능이 있는 버튼으로 전송시-->
<!--
<form name="formObj" id=formId action="http://www.google.co.kr" method="get" onsubmit="return isValidate();">
-->
<!--
<form name="formObj" action="http://www.google.co.kr">
-->
<!-- 방법2]submit기능이 없는 버튼으로 전송시 -->
<form name="formObj" action="http://www.nate.com" onsubmit="alert('submit이벤트 발생');">
<table style="width:600px;border-spacing:1px;background-color:green">
<tr style="background-color:white">
<td style="width:15%">아이디</td>
<td><input type="text" name="id" size="20" /> <span style="color:red;font-size:0.8em" id="idError"></span></td>
</tr>
<tr style="background-color:white">
<td>비밀번호</td>
<td><input type="password" name="pwd" size="20" /></td>
</tr>
<tr style="background-color:white">
<td>비밀번호확인</td>
<td><input type="password" name="pwd2" id="pwd2" size="20" /></td>
</tr>
<tr style="background-color:white">
<td>성별</td>
<td>
<input type="radio" name="gender" value="man" />남
<input type="radio" name="gender" value="woman" />녀
<input type="radio" name="gender" value="trans" />트랜스젠더
</td>
</tr>
<tr style="background-color:white">
<td>관심사항</td>
<td>
<input type="checkbox" name="inter" value="pol" />정치
<input type="checkbox" name="inter" value="eco" />경제
<input type="checkbox" name="inter" value="spo" />스포츠
<input type="checkbox" name="inter" value="ent" />연예
</td>
</tr>
<tr style="background-color:white">
<td>학력사항</td>
<td>
<select name="grade">
<option value="">==학력을 선택하세요==</option>
<option value="ele">초등학교</option>
<option value="mid">중학교</option>
<option value="hig">고등학교</option>
<option value="uni">대학교</option>
</select>
</td>
</tr>
<tr style="background-color:white">
<td>첨부파일</td>
<td>
<input type="file" name="file" size="40" />
</td>
</tr>
<tr style="background-color:white">
<td>자기소개</td>
<td>
<textarea cols="60" rows="5" name="self"></textarea>
</td>
</tr>
<tr style="background-color:white">
<td colspan="2" align="center">
<table>
<!-- 방법1:submit기능이 있는 폼 하위태그-->
<tr>
<td>
<input type="submit" style="height:50px" value="submit버튼" title="type=submit" />
</td>
<td>
<input type="image" src="../HTML5/Images/submit1.png" title="type=image"
alt="image버튼" />
</td>
<td>
<!--방법2:submit기능이 없는 태그로 전송-->
<input type="button" onclick="fnNoSubmitButton(this.form);" style="height:50px" value="submit기능이없는 버튼" />
</td>
<td>
<a href="#" onclick="fnNoSubmitButton(this.form);">
<img style="height:100%" src="../HTML5/Images/submit2.png" alt="이미지태그1"
title="a태그로 링크주고 a태그에 리스너 부착" />
</a>
</td>
<td> <!----- cursor:pointer 이거는 마우스를 손모양으로 바꾸게 하는 것 !!!--->
<img style="cursor:pointer" onclick="fnNoSubmitButton(this.form);"
src="../HTML5/Images/submit3.png" alt="이미지태그2" title="img태그에 직접 리스너 부착" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
form 요소는 name속성으로 노드접근 가능 , 다른요소는(태그)는 불가
모든 요소(태그)의 id속성으로 해당노드 접근 가능(아이디는 유일하니까 가능 )
dom api로 노드 얻자 !
console.log('h2Obj:',h2Obj; // h2 is not defined ! h2는 폼 요소 아님
console.log('formObj:',formObj); //폼 노드 얻어옴(폼)
console.log('h2Id:',h2Id); // h2노드 잘 얻어옴(id속성)
console.log('formId:',formId); // 얘도(폼+id)
이제 이벤트처리 해보자 !!
window.addEventListener('DOMContentLoaded',function(){
//방법1. onsubmit속성으로 이벤트 처리
formObj.onsubmit = isValidate; // 이건 return false로 이벤트 취소 가능
//방법2. addEventListener으로 이벤트 처리
formObj.addEventListener('submit',isValidate); // 이건 e.preventDefault()로 이벤트 취소 가능
});
// 위에선 함수만 선언하고 함수정의는 밑에서 함 ! 이렇게 떼낼 수 도 있구나
// 함수 선언 할 때는 () 안붙인다 !! ()붙이면 호출이지
function isValidate(e){ // 태그 return false하면 전달 x
console.log('이벤트객체(e):',e); //찍어봐 뭐가 처리가 안되었는지 알 수 있음!
//1. 아이디 처리
if(formObj.id.value.trim()===''){
alert('아이디를 입력하세요');
formObj.id.focus();
if(e !== undefined )
e.preventDefault(); // addeventlistener()로 이벤트 처리 시 submit 취소
return false; // 어떤 버튼을 누를 지 모르니 둘다 처리 해야한다.
}
//2. 비밀번호 처리
if(formObj.pwd2.value.trim().length===0){
alert('비밀번호 확인을 입력하세요');
formObj.pwd2.focus();
if(e !== undefined )
e.preventDefault();
return false;
}
//비밀번호 일치 여부 처리
else{
if(formObj.pwd.value.trim()!== formObj.pwd2.value.trim()){
alert('비밀번호가 일치하지 않습니디.');
formObj.pwd2.focus();
if(e !== undefined )
e.preventDefault();
return false;
}
}
//성별 처리
//라디오 버튼 선택여부 판단, 체크박스나 라디오버튼은 radionodeList타입 유사배열
var isGender = false;
formObj.gender.forEach(function(item){ //일반for문도 사용 가능!!
if(item.checked){
isGender=true;
}
});
if(!isGender){
alert('성별을 선택하세요');
formObj.gender[0].focus();
if(e !== undefined )
e.preventDefault();
return false;
}
//문) 관심사항 체크박스는 최소 3개이상 선택하게 하고 아니면 이벤트 취소 처리하라.
var isinter=[]; // 나는 배열로 처리했는데 count로 처리해도 됨!
formObj.inter.forEach(function(item){
if(item.checked){isinter.push(item);}
})
if(isinter.length <3 ){
alert('3이상 선택하세요');
if(e !== undefined )
e.preventDefault();
return false;
}
//학력사항 처리
if(formObj.grade.selectedIndex ===0 ){
alert('학력사항을 선택하세요');
formObj.grade[0].focus();
if(e !== undefined )
e.preventDefault();
return false;
}
//파일로드 처리
if(formObj.file.value.trim()===''){
alert('파일을 입력하세요');
formObj.file.focus();
if(e !== undefined ) e.preventDefault();
return false;
}
//자기소개 처리
if(formObj.self.value.trim()===''){
alert('자기소개를 입력하세요');
formObj.self.focus();
if(e !== undefined ) e.preventDefault();
return false;
}
return true;
}////isValidate
function fnNoSubmitButton(obj){ // submit기능이 없는 버튼으로 전송했을 때
console.log(obj); // 처음것만 반응하고 나머지는 undefined
if(obj === undefined) //obj가 폼 객체가 아닐 때
obj=document.forms[0]; //폼 태그가 1개밖에 엄슴
//form 객체의 submit함수로 호출 하지만... 이벤트 호출은 발생 안 됨
if(isValidate()) obj.submit();
};
++추가
성별 체크 시
일반 for문 사용은
var isGender = false;
for(var i=0 ; i< formObj.gender.length ; i++){
if( formObj.gender[i].checked){
isGender = ture;
break;
}
}
쉬워용
그리고 관심사항 count 버전
체크박스 3개 이상 선택하도록 유효성 검사
var count=0;
formObj.inter.forEach(function(item){
if(item.checked) count++;
});
if(count < 3){
alert('관심사항은 3개이상 선택하세요');
formObj.inter[0].focus();
if(e !== undefined) e.preventDefault(); //addEventListener()로 submit이벤트 처리 시
return false;
}
style="cursor:pointer" 이거는 마우스를올렸을 때 커서모양을 손모양으로 바꾸게 하는 것 !!!
++추가
e !==undefined 기능을 잘 몰라서 실험해봄
아이디 넣었는데도 submit 기능이 없는 버튼을 누르면 전송 안됨!! 이벤트객체가 undefined 라고 콘솔창에 뜸
이거 분명... basic 때 확인 한거 같은데.... 다시 봐도 잘 모르겟으니 우선 패스....
뒤에 배우다 보면 분명 이해 될거야 ...
회원가입 페이지
'학원 > JS' 카테고리의 다른 글
| 11/09 39-4 [JS] InnerXXXTextContent (0) | 2022.11.09 |
|---|---|
| 11/09 39-3 [JS] MouseEvent (0) | 2022.11.09 |
| 11/09 39-2 [JS] FocusEvent (0) | 2022.11.09 |
| 11/09 39-1 [JS] KeyboardEvent (0) | 2022.11.09 |
| 11/08 38-8 [JS] CSSControl (0) | 2022.11.08 |
