복습 4

1. button과 submit

검색 : <input type="text" name="se" id="se" class="se">
<input type="button" value="검색" onclick="web()">

<br><br><br>

<form method="get" action="http://search.naver.com/search.naver">
검색 : <input type="text" name="query" id="se2" class="se">
<input type="submit" value="검색">
</form>

function web(){
	//id로 값을 가져오는 방식 
	var b =document.getElementById("se");
	//form이 없는 상황에서 name속명으로 값을 js로 가져오는 방식 
	var a =document.getElementsByName("se")[0];
	
	//form에 method="get" 방식과 동일한 형태
	location.href="http://search.naver.com/search.naver?query="+b.value;
}

• submit : 입력 후 엔터 기능
  • form태그와 함께 사용
  • method : 통신방법
  • action : 사용자가 입력한 데이터를 이관하는 경로 
• button : 클릭을 위주로 사용하는 기능로그인 => submit

⭐️UI를 잘알아두고 button인지 submit인지 잘 알기
검색 => submit
아이디 중복체크 => button
주소찾기 => button
회원가입 => button
아이디 찾기 => 이름, 이메일 => button
택배번호(송장) 입력 검색 => submit
댓글입력 => submit (button)도 가능
게시판에 글쓰기 => button

 

2.  checkbox, radio  이벤트 핸들링

<p>좋아하는 과일은? (한가지 이상 선택하세요)</p>
<input type="checkbox" id="f1">딸기<br>
<input type="checkbox" id="f2">수박<br>
<input type="checkbox" id="f3">토마토<br>
<input type="button" value="선택완료" onclick="fruit()">
<p>회원가입에 대한 약관</p>
<!-- radio는 무조건 name속성을 활성화 -->
<input type="radio" name="a" id="ag1">동의함
<input type="radio" name="a" checked>동의안함
<input type="button" value="가입완료" onclick="agree()">
<br><br><br>

function fruit(){
	var x;
	var count =0;
	for(x=1;x<=3;x++){
		var ck = document.getElementById("f"+x).checked;
		if(ck==true){
			count++;
		}
		console.log(ck);
	}
	if(count==0){
		alert("한가지 이상 선택해주세요");
	}else{
		location.href="http://nate.com";
	}
	console.log(count);
}

function agree(){
	var ag1 = document.getElementById("ag1");
	console.log(ag1.checked);//checkbox.value는 안씀 check만 사용 
	if(ag1.checked==false){	//boolean (true, false)
		alert("동의하셔야만 회원가입이 진행됩니다.");
	}	
}

• radio는 무조건 name속성을 이용하여 묶어주기

3. select, option 이벤트 핸들링

<select id="dy">
<option value="">[택배선택]</option>
<option value="로켓배송" selected>로켓배송</option>
<option value="일반배송">일반배송</option>
</select>
<input type="button" value="택배선택" onclick="delivery()">

function delivery(){
	var dy = document.getElementById("dy");
	if(dy.value==""){	//option의 value
		alert("배송분류를 선택해 주세요");
		
	}else{
		alert("해당 배송으로 택배가 발송됩니다");
	}	
}

• selected 속성을 이용해 기본값 설정