|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 |
<!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>book_insert_form_ajax_button</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/bookmanage.js"></script>
<body>
<center>
<form method="post" name="insert_book_form" action="BookInsertPro" onsubmit="return insertBookSave()">
</form>
</center>
</body>
</html> |
cs |
./js/bookmanage.js 경로의 파일을 받는 insert_book_form이 있다고 가정한다.
onsubmit 이벤트로 insertBookSave 함수를 호출했을 때를 비교한다.
1. return
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
function insertBookSave() {
var insert_book_form = document.insert_book_form;
// alert('bookCode value : ' + insert_book_form_bookCode.value);
if (! insert_book_form_bookCode.value) {
alert('도서 코드를 입력하세요.');
insert_book_form.bookCode.focus();
return;
}
} |
cs |
return 뒤에 어떠한 값으로 return하는지 정해주지 않았기 때문에 insert_book_form_value값이 들어가 있지 않을 경우 null로 return한다.
따라서 insert_book_form은 submit을 하지 못하고 null을 반환한다.
해당 return 아래를 전부 실행하지 않고 return 줄에서 클래스를 끝내버린다.
2. return true
|
1
2
3
4
5
6
7
8
9
10
11 |
function insertBookSave() {
var insert_book_form = document.insert_book_form;
if (! insert_book_form.bookCode.value) {
alert('도서 코드를 입력하세요.');
insert_book_form.bookCode.focus();
return true;
}
} |
cs |
return값을 true로 정해줬다.
insert_book_form이 submit 하기 전에 insertBookSave 함수에서 유효성 검사를 하고 통과가 되면 true (=submit true)로 리턴한다는 뜻이다.
즉 bookCode.value 값이 들어가 있지 않아도 submit 한다.
3. return false
|
1
2
3
4
5
6
7
8
9
10
11 |
function insertBookSave() {
var insert_book_form = document.insert_book_form;
if (! insert_book_form.bookCode.value) {
alert('도서 코드를 입력하세요.');
insert_book_form.bookCode.focus();
return false;
}
} |
cs |
return값을 false로 정해준다.
bookCode.value 값이 들어가 있지 않으면 submit을 fasle로 리턴한다는 뜻이다.
자바스크립트 함수를 쓰면서 return 값을 true나 false로 명확하게 주지 않고 return으로만 적었었는데,
input 값 관련 오류가 나서 어떤 이유인지 한참 찾아봤었다.
앞으로는 return 값을 true or false로 명확하게 해야겠다.
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| JavaScript :: 배열 정렬하기(문자열 배열, 숫자 배열) (0) | 2016.10.03 |
|---|---|
| JavaScript :: 정규 표현식 (0) | 2016.08.21 |
| JavaScript :: 부모창 > 자식창(팝업창) > 부모창 (2) | 2016.05.10 |
| JavaScript :: text type 내 숫자만 입력 가능하게 하는 예제 (0) | 2016.05.10 |
| JavaScript :: getElementById() vs querySelector() 차이 (0) | 2016.05.05 |