-
input.jsp를 복사해서 input2.jsp 파일 생성
-
function으로 함수를 부를 수도 있지만 제이쿼리를 쓰기위한 라이브러리 파일을 다운받아서 사용
-
절대경로: 루트부터
-
상대경로: 나 자신으로 부터 (. (점): 나 자신, ..(점점): 부모)
-
아이디는 #으로 시작, 클래스는 . 으로 시작
-
val(): 밸류값을 가져오는 함수
-
태그는 # 붙이지 않음. []는 속성
-
제이쿼리를 이용해서 alert창 띄우기 (input2.jsp)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--다운받은 제이쿼리 이용<script src="../js/jquery-3.5.1.min.js"></script> -->
<!--제이쿼리 주소이용 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
/*
$(document).ready(function(){ //function이 로드될때까지 기다려라
$("#btn").click(function(){ //btn이 클릭되면 함수를 호출할건데 그 함수의 이름 없이 바로 내용이 들어간다.
alert("test");
});
})
*/
$(function(){
$("#btn").on("click",function(){ //btn이 클릭되면 함수를 호출할건데 그 함수의 이름 없이 바로 내용이 들어간다.
if($("#name").val()==""){ //get.ElementByName과 같은 뜻. val()은 밸류 값을 가져오는 함수
alert("이름을 입력하세요");
return false;
} //if
if($("#studentNum").val()==""){
alert("학번을 입력하세요");
return false;
} //if
if($("input[name='hobby']:checked").length==0){ //태그는 #안붙임. []는 속성
alert("취미를 입력하세요");
return false;
} //if
//frm.submit();
$("#frm").submit();
}); //click
}) //function
</script>
</head>
<body>
<form action="inputResult.jsp" method="post" name="frm" id="frm">
<!--method="post"하면 선택된 값들이 주소창에 안보임--> <!--method="get"하면 주소창에 선택값들이 표시됨 -->
이름: <input type="text" name="name" id="name"><br> <!-- DOM방식은 id로 접근 -->
학번: <input type="text" name="studentNum" id="studentNum"><br>
성별:
<!--
<input type="radio" name="gender" value="man" checked>남자
<input type="radio" name="gender" value="woman">여자<br>
-->
<input type="radio" name="gender" value="man" checked id="man">
<label for="man">남자</label> <!-- id, label을 이용하여 글자를 클릭해도 선택됨 -->
<input type="radio" name="gender" value="woman" checked id="woman">
<label for="woman">여자</label><br>
전공:
<select name="major" id="major">
<option value="국문학과">국문학과</option>
<option value="영문학과">영문학과</option>
<option value="수학과">수학과</option>
<option value="정치학과">정치학과</option>
<option value="체육학과">체육학과</option>
</select>
<br>
취미<br>
<input type="checkbox" name="hobby" value="운동">운동
<input type="checkbox" name="hobby" value="운동1">운동1
<input type="checkbox" name="hobby" value="운동2">운동2
<input type="checkbox" name="hobby" value="운동3">운동3
<input type="checkbox" name="hobby" value="운동4">운동4 <br>
<input type="button" value="보내기" id="btn">
<input type="reset" value="취소">
</form>
</body>
</html>
|
cs |
'Learning > JSP' 카테고리의 다른 글
| ajax방식을 이용하여 id, pw 입력하고 하단부에 출력 (0) | 2020.07.15 |
|---|---|
| 자바스크립트, DB 이용하여 주소록 생성하기 (0) | 2020.07.13 |
| JSP액션 태그, 객체와 getter setter이용 (0) | 2020.07.09 |
| 객체와 메소드를 이용하여 JSP 성적 출력하기 (자바 파일: 생성자를 이용하여 값 할당) (0) | 2020.07.09 |
| 객체와 메소드를 이용하여 JSP 성적 출력하기 (자바파일: getter, setter 이용) (0) | 2020.07.09 |
