Step07_form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step07_form.html</title>
</head>
<body>
<form action="signup" method="post" id="myForm">
<input type="text" id="inputName"/>
<br/>
<select id="selectFruit">
<option value="orange" selected>오렌지</option>
<option value="apple">애플</option>
<option value="banana">바나나</option>
</select>
<br/>
<label>
<input type="radio" name="gender" id="man"/> 남자
</label>
<label>
<input type="radio" name="gender" id="woman" /> 여자
</label>
<br/>
<button type="submit">전송</button>
</form>
<script src="js/jquery-3.4.1.js"></script>
<script>
//페이지 로딩 시점에 테스트로 동작해보기
$("#inputName").val("김구라");
/*
.prop("checked") 체크 여부 읽어오기
.prop("checked", true) 강제 체크하기
.prop("checked", false) 강제 체크 해제하기
*/
$("#man").prop("checked", true);
//select 의 option 을 강제 선택하게 하기
$("#selectFruit").val("banana");
//폼에 submit 이벤트가 일어났을때 호출되는 함수 등록
$("#myForm").on("submit", function(){
//value 값 읽어오기 테스트
var inputName=$("#inputName").val();
var selectFruit=$("#selectFruit").val();
alert("sumbit 이벤트 발생!");
});
</script>
</body>
</html>
Step07_form2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step07_form2.html</title>
</head>
<body>
<form action="signup" method="post" id="signupForm">
<label for="email">이메일</label>
<input type="text" name="email" id="email"/>
<br/>
<label for="pwd">비밀번호</label>
<input type="text" name="pwd" id="pwd"/>
<br/>
<label for="pwd2">비밀번호 확인</label>
<input type="text" name="pwd2" id="pwd2"/>
<br/>
<button type="submit">가입</button>
</form>
<script src="js/jquery-3.4.1.js"></script>
<script>
/*
폼의 검증조건
1. 이메일 주소는 반드시 입력해야한다.
2. 비밀번호는 반드시 입력해야한다.
3. 비밀번호와 비밀번호 확인은 입력한 문자열이 동일해야한다.
위의 3개중 하나라도 만족하지 못하면
폼의 제출을 막는다.
*/
$("#signupForm").on("submit", function(){
//1. 이메일 주소를 입력했는지?
var email=$("#email").val();
if(email==""){
alert("이메일 주소를 입력하세요.");
$("#email").focus();//포커스 주기
return false; //폼전송 막기
}
//2. 비밀번호를 입력했는지?
var pwd=$("#pwd").val();
if(pwd==""){
alert("비밀번호를 입력하세요.");
$("#pwd").focus();
return false;
}
//3. 두 비밀번호가 일치 하는지?
var pwd2=$("#pwd2").val();
if(pwd != pwd2){
alert("비밀번호를 확인하세요.");
$("#pwd").focus();
return false;
}
});
</script>
</body>
</html>
'javascript, framework > jquery' 카테고리의 다른 글
| Step09_example (0) | 2022.09.16 |
|---|---|
| Step08_regExp(정규표현식 활용 예제) (0) | 2022.09.16 |
| Step06_animate (트랜지션, 이동) (0) | 2022.09.16 |
| step05_effect (사라졌다 나타나는 효과들) (0) | 2022.09.16 |
| Step01~04 (html, css 접근, event) (0) | 2022.09.16 |
