2012-5-23 DOM객체를 이용한 Form처리(javascript를 이용한 submit보내기 및 체크박스 테스트)
Dynamic_Project
name : javascript_ajax_class
WebContent : 폴더
javascript
html
form.html
res.jsp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function submitForm(){
//form 객체에 action, method설정 후 전홍송
var form = document.form1;//<-같은 구문 window.document.form1
alert("form.action : "+form.action);//form.action 조회 후 action을 변경해서 res.jsp를 호출
form.action = "res.jsp";
form.method = "post";//post방식으로 보내서 url뒤에 파라미터 값이 붙지 않는 것을 볼 수 있다.
form.submit();//전송
}
function resetForm(){
alert("폼을 초기화 합니다.");
document.form1.reset();
}
function ckTest(){
var chkbox = document.form2.menu;//checkbox배열 객체
var cnt = 0;
for(i=0;i<chkbox.length;i++){
if(chkbox[i].checked){
cnt++;
alert(chkbox[i].value+" : check됨");
}
}
alert("체크 개수 : "+cnt);
}
//전체 체크하기
function allCheck(){
var chkbox = document.form2.menu;//checkbox배열 객체
var allchkbox = document.form2.allchk.checked;
//메뉴 체크박스의 상태를 allchk의 상태와 같도록 설정한다.
for(i=0;i<chkbox.length;i++){
chkbox[i].checked = allchkbox;
}
}
//click()이용
function allCheck2(){
//메뉴 체크박스 배열 조회
var menu = document.form2.menu;
//allcheck의 체크 상태
var allchk = document.form2.allchk.checked;
//메뉴 체크박스 중 allchk의 상태와 다른 것들을 클릭시킨다.
for(i=0;i<menu.length;i++){
if(menu[i].checked != allchk){
menu[i].click();
}
}
}
function allCheck3(){
var chkbox = document.form2.menu;//checkbox배열 객체
var allchkbox = document.form2.allchk;
var cnt = 0;
for(i=0;i<chkbox.length;i++){
if(allchkbox.checked){
chkbox[i].checked = true;
}else{
chkbox[i].checked = false;
}
}
}
</script>
</head>
<body>
<form name="form1" action="abc.jsp">
이름 : <input type="text" name="name"><br>
나이 : <input type="text" name="age"><br>
<input type="button" value="전송버튼" onclick="submitForm()">
<input type="button" value="초기화" onclick="resetForm()">
<a href="javascript:resetForm()"><img src="url">초기화</a><!-- 그림을 버튼으로 사용하고 싶을 때 이미지에 링크를 걸어서 사용할때 지금과 같이 자바스크립트를 사용한다. -->
</form>
<p>
checkbox테스트<br>
<form name="form2">
<label for="blacknoodle">짜장면</label>
<input type="checkbox" name="menu" value="짜장면" id="blacknoodle"><br>
<label for="pizza">피자</label>
<input type="checkbox" name="menu" value="피자" id="pizza"><br>
<label for="coldnoodle">냉면</label>
<input type="checkbox" name="menu" value="냉면" id="coldnoodle"><br>
<label for="Ramen">라면</label>
<input type="checkbox" name="menu" value="라면" id="Ramen"><br>
<label for="allchk">모두체크/해제</label>
<input type="checkbox" name="allchk" value="모두체크/해제" id="allchk" onclick="allCheck2()"><br>
<input type="button" value="전송" onclick="ckTest()">
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
res.jsp입니다.<br>
form.html로 부터의 요청파라미터 값 : ${param.name }, ${param.age }
</body>
</html>
* 결과보기
- checkbox 결과보기
