반응형
27.JavaScript - Form을 응용하는 예제입니다.
인터넷 가입절차를 보면 동의란이 있는데요. 동의하겠다는 부분에 체크를 하게 되면 버튼을 클릭할 수 있게 되고 클릭하게 되면 가입 폼을 나타내는 예제입니다.
기능설명
1. Check박스에 체크가 되면 버튼이 true가 되서 클릭이 가능
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function CheckAgree() {
//체크박스가 체크되었는지 확인
if (document.getElementById("chkAgree").checked) {
return true; //onsubmit 진행
}
else {
alert("동의하셔야 합니다."); //동의에 체크 안하면 메세지 박스
//동의에 체크가 되어있지 않으면 체크박스에 포커스 이동
document.getElementById("chkAgree").focus();
return false; //onsubmit 이벤트 중지
}
}
//동의 체크 하면 비활성화 한 버튼 다시 false로 바꿈
//체크박스가 체크되었다면 활성화, 그렇지 않으면 비활성화
function SetDis() {
document.getElementById("btnSubmit").disabled =
!document.getElementById("chkAgree").checked;
}
</script>
</head>
<body>
<form id="Frm" name="Frm" action="form.htm" method="get" onsubmit="return CheckAgree();">
약관에 동의하시겠습니까?<br />
<input type="checkbox" id="chkAgree" onclick="SetDis();" />동의함
<input type="submit" id="btnSubmit" value="회원가입페이지로 이동" />
</form>
<!--btnSubmit이 만들어지고 난 다음 에 비활성화 이벤트 호출-->
<script>
//기본값으로 버튼 비활성화
document.getElementById("btnSubmit").disabled = true; //비활성화
</script>
</body>
</html>
인터넷 가입절차를 보면 동의란이 있는데요. 동의하겠다는 부분에 체크를 하게 되면 버튼을 클릭할 수 있게 되고 클릭하게 되면 가입 폼을 나타내는 예제입니다.
기능설명
1. Check박스에 체크가 되면 버튼이 true가 되서 클릭이 가능
<head>
<title></title>
<script type="text/javascript">
function CheckAgree() {
//체크박스가 체크되었는지 확인
if (document.getElementById("chkAgree").checked) {
return true; //onsubmit 진행
}
else {
alert("동의하셔야 합니다."); //동의에 체크 안하면 메세지 박스
//동의에 체크가 되어있지 않으면 체크박스에 포커스 이동
document.getElementById("chkAgree").focus();
return false; //onsubmit 이벤트 중지
}
}
//동의 체크 하면 비활성화 한 버튼 다시 false로 바꿈
//체크박스가 체크되었다면 활성화, 그렇지 않으면 비활성화
function SetDis() {
document.getElementById("btnSubmit").disabled =
!document.getElementById("chkAgree").checked;
}
</script>
</head>
<body>
<form id="Frm" name="Frm" action="form.htm" method="get" onsubmit="return CheckAgree();">
약관에 동의하시겠습니까?<br />
<input type="checkbox" id="chkAgree" onclick="SetDis();" />동의함
<input type="submit" id="btnSubmit" value="회원가입페이지로 이동" />
</form>
<!--btnSubmit이 만들어지고 난 다음 에 비활성화 이벤트 호출-->
<script>
//기본값으로 버튼 비활성화
document.getElementById("btnSubmit").disabled = true; //비활성화
</script>
</body>
</html>
28.Form.zip반응형
'jQuery | javascript | CSS' 카테고리의 다른 글
| 30.JavaScript - JavaScript에서 스타일시트 적용 (0) | 2009.08.12 |
|---|---|
| 29.JavaScript - SelectedIndex (드롭다운리스트) (0) | 2009.08.12 |
| 27.JavaScript - Web Form (폼) (0) | 2009.08.11 |
| 26.JavaScript - HiStory (히스토리) (0) | 2009.08.11 |
| 25.JavaScript - location객체 (로케이션객체) (0) | 2009.08.11 |
Comments