form.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
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsp 파일 가져다 쓰기</title>
</head>
<body>
<form>
<span>이름</span>
<input type="text" placeholder="이름" id="name" name="name" /> <br>
<span>나이</span>
<input type="text" placeholder="나이" id="age" name="age" /> <br>
<span>주소</span>
<input type="text" placeholder="주소" id="address" name="address" /> <br>
<input type="submit" value="전송" />
</form>
<div></div>
</body>
</html>
Colored by Color Scripter
|
|
첫 번째 방식
ex2_1.js
|
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
|
$(function() {
var isStyle = false;
$("form")
.submit(
function(e) {
e.preventDefault();
var check = 0;
// 이름에 포커스를 줄때는 check = 0이다.
// 나이에 포커스를 줄때는 check = 0이다.
// 주소에 포커스를 줄때는 check = 0이다.
if ($("#name").val() == "") {
// 이름을 입력하지 않은 경우
$("#name").attr("placeholder", "이름을 입력하세요");
// 이름에 포커스를 준다.
// if (check == 0)
$("#name").focus();
check++;
}
if ($("#age").val() == "") {
$("#age").attr("placeholder", "나이를 입력하세요");
if (check == 0)
$("#age").focus();
check++;
}
if ($("#address").val() == "") {
$("#address").attr("placeholder", "주소을 입력하세요");
if (check == 0)
$("#address").focus();
check++;
}
// input 태그 중 빈곳이 한 곳이라도 있으면 placeholder 생성 변경
if (check != 0) {
if (!isStyle) {
// placeholder의 색상을 빨간색으로 변경하는 스타일을 head 뒤에
// 추가한다.
$(
"<style>input::-webkit-input-placeholder{color:red;}</style>")
.appendTo("head");// chrom, safari
$(
"<style>input::-moz-input-placeholder{color:red;opacity:1}</style>")
.appendTo("head");// firefox
$(
"<style>input::-ms-input-placeholder{color:red;opacity:1}</style>")
.appendTo("head"); // ie
isStyle = true;
}
} else {
var data_name = "name=" + $("#name").val();
var data_age = "age=" + $("#age").val();
var data_address = "address=" + $("#address").val();
var data = data_name + "&" + data_age + "&"
+ data_address;
// 쿼리스트링 형식으로 파라미터의 이름과 값의 형태로 전달
}
return false; // 안썼으면 submit false
});
});
Colored by Color Scripter
|
|
두 번째 방식
ex2_1.js
|
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
|
$(function() {
var isStyle = false;
$("form")
.submit(
function(e) {
e.preventDefault();
var check = 0;
if ($("#name").val() == "") {
$("#name").attr("placeholder", "이름을 입력하세요");
// if (check == 0)
$("#name").focus();
check++;
}
if ($("#age").val() == "") {
$("#age").attr("placeholder", "나이를 입력하세요");
if (check == 0)
$("#age").focus();
check++;
}
if ($("#address").val() == "") {
$("#address").attr("placeholder", "주소을 입력하세요");
if (check == 0)
$("#address").focus();
check++;
}
// input 태그 중 빈곳이 한 곳이라도 있으면 placeholder 생성 변경
if (check != 0) {
if (!isStyle) {
// placeholder의 색상을 빨간색으로 변경하는 스타일을 head 뒤에
// 추가한다.
$(
"<style>input::-webkit-input-placeholder{color:red;}</style>")
.appendTo("head");// chrom, safari
$(
"<style>input::-moz-input-placeholder{color:red;opacity:1}</style>")
.appendTo("head");// firefox
$(
"<style>input::-ms-input-placeholder{color:red;opacity:1}</style>")
.appendTo("head"); // ie
isStyle = true;
}
} else {
var data = {name : $("#name").val(), age :$("#age").val(), address:$("#address").val()};
// 오브젝트 형식으로 파라미터의 이름과 값의 형태로 전달
}
return false; // 안썼으면 submit false
});
});
Colored by Color Scripter
|
|
세 번째 방식
ex2_1.js
|
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
|
$(function() {
var isStyle = false;
$("form")
.submit(
function(e) {
e.preventDefault();
var check = 0;
// 이름에 포커스를 줄때는 check = 0이다.
// 나이에 포커스를 줄때는 check = 0이다.
// 주소에 포커스를 줄때는 check = 0이다.
if ($("#name").val() == "") {
// 이름을 입력하지 않은 경우
$("#name").attr("placeholder", "이름을 입력하세요");
// 이름에 포커스를 준다.
// if (check == 0)
$("#name").focus();
check++;
}
if ($("#age").val() == "") {
$("#age").attr("placeholder", "나이를 입력하세요");
if (check == 0)
$("#age").focus();
check++;
}
if ($("#address").val() == "") {
$("#address").attr("placeholder", "주소을 입력하세요");
if (check == 0)
$("#address").focus();
check++;
}
// input 태그 중 빈곳이 한 곳이라도 있으면 placeholder 생성 변경
if (check != 0) {
if (!isStyle) {
// placeholder의 색상을 빨간색으로 변경하는 스타일을 head 뒤에
// 추가한다.
$(
"<style>input::-webkit-input-placeholder{color:red;}</style>")
.appendTo("head");// chrom, safari
$(
"<style>input::-moz-input-placeholder{color:red;opacity:1}</style>")
.appendTo("head");// firefox
$(
"<style>input::-ms-input-placeholder{color:red;opacity:1}</style>")
.appendTo("head"); // ie
isStyle = true;
}
} else {
//서버로 보낼 데이터를 폼에서 얻어옵니다.
//입력 양식에 적힌 값을 쿼리 문자열로 바꾼다.
var data = $("form").serialize();
//공백 없이 써야함
//$("div").load("process.jsp", "name=love&age=21&address=seoul");
}
return false; // 안썼으면 submit false
});
});
Colored by Color Scripter
|
|
