머니버그 솔루션 > TIP > JS/Jquery/Ajax 팁

jQuery 비 동기 통신 $.ajax(), $.get(), $.post() 사용방법

머니버그 — Tue, 14 Sep 2021 13:49:39 +0900

$.ajax() 사용방법

비동기 요청 시 사용하는 $.ajax()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
    url: 'example.php' // 요청 할 주소
    async: true, // false 일 경우 동기 요청으로 변경
    type: 'POST' // GET, PUT
    data: {
        Name: 'ajax',
        Age: '10'
    }, // 전송할 데이터
    dataType: 'text', // xml, json, script, html
    beforeSend: function(jqXHR) {}, // 서버 요청 전 호출 되는 함수 return false; 일 경우 요청 중단
    success: function(jqXHR) {}, // 요청 완료 시
    error: function(jqXHR) {}, // 요청 실패.
    complete: function(jqXHR) {} // 요청의 실패, 성공과 상관 없이 완료 될 경우 호출
});
Colored by Color Scripter
cs

$.get() 사용방법

HTTP GET 요청을 하여 서버로부터 데이터를 로드 한다.

1
2
3
4
5
6
7
8
9
10
11
12
$.get( "example.php?Name=ajax&Age=10", function(jqXHR) {
    alert( "success" );
}, 'json' /* xml, text, script, html */)
.done(function(jqXHR) {
    alert( "second success" );
})
.fail(function(jqXHR) {
    alert( "error" );
})
.always(function(jqXHR) {
    alert( "finished" );
});
Colored by Color Scripter
cs

$.post() 사용방법

HTTP POST 요청을 하여 서버로부터 데이터를 로드 한다.

전송할 데이터를 정의하는 부분을 제외하고 $.get() 방식과 동일하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.post( "example.php?Name=ajax&Age=10", {
    Name: 'ajax',
    Age: '10'
}, function(jqXHR) {
    alert( "success" );
}, 'json' /* xml, text, script, html */)
.done(function(jqXHR) {
    alert( "second success" );
})
.fail(function(jqXHR) {
    alert( "error" );
})
.always(function(jqXHR) {
    alert( "finished" );
});
Colored by Color Scripter
cs

참고 https://webinformation.tistory.com/22

jQuery UI 편리한 날짜선택 위젯 Datepicker 간단 사용법 #2

머니버그 — Wed, 30 Dec 2020 19:16:59 +0900

⑤ showOn

기본값은 input 옆에 버튼이 없다. input을 클릭해야 달력이 표시됩니다.

이 옵션의 값을 "button"이나 "both"로 설정하면 input 옆에 버튼이 표시됩니다.

"button"은 버튼을 클릭하면 달력이 표시되고, input에 직접 값을 입력할 수 있습니다.

"both"는 input을 클릭해도 버튼을 클릭해도 달력이 표시됩니다.

예외처리 등을 줄이려면 "both"를 선택하는 것이 간편할 겁니다.

$.datepicker.setDefaults({
showOn: "button" // button:버튼을 표시하고,버튼을 눌러야만 달력 표시
});
$.datepicker.setDefaults({
showOn: "both" // both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시
});

⑥ buttonImage, buttonImageOnly, buttonText

showOn이 "both"이거나 "button"일 경우에만 의미있는 옵션들입니다.

이 옵션은 주석만 봐도 이해가 잘 될 거라고 생각합니다.

$.datepicker.setDefaults({
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif", //버튼 이미지 경로
buttonImageOnly: true, //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트
});

⑦ yearSuffix

기본값은 달력의 년도가 2018과 같이 숫자로만 표현됩니다.

아래와 같이 옵션을 주면 2018년과 같이 년도 뒤에 올 텍스트를 추가할 수 있습니다.

$.datepicker.setDefaults({
yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
});

⑧ monthNamesShort, monthNames, dayNamesMin, dayNames

기본값은 달력의 월과 요일 정보가 영문으로 표시됩니다.

아래와 같이 한글로 직접 입력해서 월과 요일정보를 한글과 숫자로만 표현할 수 있습니다.

$.datepicker.setDefaults({
monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'], // 달력의 월 부분 텍스트
monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], // 달력의 월 부분 Tooltip 텍스트
dayNamesMin: ['일','월','화','수','목','금','토'], // 달력의 요일 부분 텍스트
dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] // 달력의 요일 부분 Tooltip 텍스트
});

⑨ minDate, maxDate

이 옵션을 설정하면 minDate와 maxDate 안에 해당하지 않는 날짜는 disable 처리됩니다.

$.datepicker.setDefaults({
minDate: "-1M", // 최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
maxDate: "+1M" // 최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});

선택할 날짜의 범위를 지정한 모습

⑩ numberOfMonths

한번에 여러 month를 표현할 때는 다음과 같이 배열 형식으로 표현할 month의 개수를 설정할 수 있습니다.

$.datepicker.setDefaults({
numberOfMonths: [2,2]
});

여러달을 한번에 표현한 모습

⑪ showButtonPanel, currentText, closeText

Datepicker의 하단 메뉴을 설정 할 수 있습니다.

$.datepicker.setDefaults({
showButtonPanel: true, // true로 설정하면 하단의 메뉴 영역이 보임
currentText: '오늘 날짜', // 표시 되는 텍스트를 지정
closeText: '닫기' // 표시 되는 텍스트를 지정
});

오늘날짜/닫기 버튼을 추가한 모습

⑫ 포인터 설정

기본적으로 아무 설정을 하지 않으면 Datepicker로 선언한 input과 버튼에 마우스를 올렸을 시 보기가 좋지 않습니다.

사이에 아래와 같이 선언해 주면 마우스 포인터의 모양을 손가락 모양으로 바꿀 수 있습니다.

참고1. https://its-easy.tistory.com/12
참고2. http://www.nextree.co.kr/p9887/

jQuery UI 편리한 날짜선택 위젯 Datepicker 간단 사용법 #1

머니버그 — Wed, 30 Dec 2020 13:57:48 +0900

Jquery UI 공식사이트인 https://jqueryui.com 에서 모든 Example과 API문서를 보고,

실무에서 많이 쓰일 것 같은 내용만 손쉽게 사용 할 수 있도록 정리해 보았습니다.

설명한 기준은 1.12.1 버전 입니다.

웹 페이지를 검색하다 보면, 주로 회원가입 또는 날짜 관련해서 입력을 요구 하는 경우가 많습니다.

이처럼 날짜를 입력 받을 때 직접 입력 받는 방법도 있지만, jQuery에서 제공하는 달력 형식의 UI 위젯중 하나인 Datepicker가 있습니다.

Datepicker 위젯은 제가 현재까지 진행했던 프로젝트에서 빠지지 않고 항상 사용했습니다.

참 편리한 Datepicker를 살펴 보겠습니다.

위젯(widget) :

프로그래밍에서 widget은 작은 프로그램을 의미하며, 사용자와 컴퓨터가 상호 작용하는 인터페이스 요소입니다.

Datepicker란?

앞에서 설명한 바와 같이 Datepicker는 jQuery에서 제공하는 위젯 중 하나이며,

날짜를 다룰 때 UI 형식으로 쉽게 날짜를 선택 하도록 도와주는 역할을 합니다.

Datepicker를 이용하면 많은 기능을 포함한 디자인된 달력을 간단한 코딩으로도 만들 수 있습니다.

Datepicker의 동작 순서는 먼저 Datepicker 메소드를 통해서 jQuery가 javascript 해석기로 Datepicker를 요청합니다.

요청을 받은 javascript 해석기는 DOM에서 id가 Datepicker인 요소를 찾습니다.

다시 javascript 해석기로 return 후 화면으로 출력합니다.

Datepicker UML

1. 사용방법

Datepicker를 사용하기 위해서는 기본적으로 다음의 3가지 File을 import해야 합니다.

1
2
3
4
5
6
7
8
// jQuery UI CSS파일 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
 
// jQuery 기본 js파일
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
// jQuery UI 라이브러리 js파일
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
Colored by Color Scripter
cs

Datepicker의 가장 기본적인 코드를 살펴보면 다음과 같습니다.

1
2
3
4
5
//script구문 내부에 해당 메소드를 입력합니다.
$(function() {
    $( "#testDatepicker" ).datepicker({
    });
});
Colored by Color Scripter
cs

위의 코드를 살펴보면 function 내부에 Datepicker 선택자와 메소드로 이루어져 있습니다.

1
2
//해당 메소드에서 선택자로 지명한 id가 testDatepicker인 input 태그를 추가합니다.
<input type="text" id="testDatepicker">
cs

기본적인 Datepicker의 모습

위에 코드를 HTML로 정리하면 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
<body>
    <input type="text" id="testDatepicker">
    
    <script>
        $(function() {
            $( "#testDatepicker" ).datepicker({
            });
    });
 
    </script>
</body>
</html>
Colored by Color Scripter
cs

Datepicker를 출력할 input tag를 선언하면, 해당 id를 찾아 기본 옵션의 날짜선택기를 사용할 수 있습니다.

2. Datepicker 옵션 설정 방법

① Datepicker 별 옵션 설정

이번에는 Datepicker를 응용해서 구현할 수 있는 여러 가지 옵션 중에서 자주 사용하는 옵션들을 소개하겠습니다.

아래의 코드는 각 Datepicker 별로 옵션을 설정하는 방법입니다.

옵션은 말 그대로 옵션이므로 사용자가 필요한 옵션만 사용하면 됩니다.

Datepicker 별로 옵션이 달라야 하는 경우에만 이 방법을 사용하는 것이 좋습니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
<body>
    <input type="text" id="testDatepicker">
    
    <script>
        $(function() {
            $( "#testDatepicker" ).datepicker({
                dateFormat: 'yy-mm-dd' //Input Display Format 변경
                ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
                ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
                ,changeYear: true //콤보박스에서 년 선택 가능
                ,changeMonth: true //콤보박스에서 월 선택 가능                
                ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
                ,buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로
                ,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
                ,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트                
                ,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
                ,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트
                ,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
                ,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
                ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
                ,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
                ,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)    
            });                  
 
            //초기값을 오늘 날짜로 설정
            $('#testDatepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
        }); 
    </script>
</body>
</html>
Colored by Color Scripter
cs

② 전체 Datepicker 옵션 일괄 설정

아래의 코드는 모든 Datepicker에 대한 옵션을 일괄적으로 설정하는 방법입니다.

한번의 설정으로 testDatepicker, sampleDatepicker의 옵션을 모두 설정할 수 있습니다.

Tiles 프레임워크를 이용하거나 공통 js파일에 아래와 같이 옵션을 일괄적으로 설정하면 시스템의 모든 Datepicker에 대한 옵션을 한곳에서

설정할 수 있습니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
<body>
    <input type="text" id="testDatepicker">
    <input type="text" id="sampleDatepicker">
    
    <script>
        $(function() {
            $.datepicker.setDefaults({
                dateFormat: 'yy-mm-dd' //Input Display Format 변경
                ,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
                ,showMonthAfterYear:true //년도 먼저 나오고, 뒤에 월 표시
                ,changeYear: true //콤보박스에서 년 선택 가능
                ,changeMonth: true //콤보박스에서 월 선택 가능                
                ,showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시  
                ,buttonImage: "이미지 버튼 경로" //버튼 이미지 경로
                ,buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함
                ,buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트                
                ,yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트
                ,monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'] //달력의 월 부분 텍스트
                ,monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] //달력의 월 부분 Tooltip 텍스트
                ,dayNamesMin: ['일','월','화','수','목','금','토'] //달력의 요일 부분 텍스트
                ,dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] //달력의 요일 부분 Tooltip 텍스트
                ,minDate: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
                ,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)                    
            });
 
            //input을 datepicker로 선언
            $("#testDatepicker").datepicker();                    
            $("#sampleDatepicker").datepicker();
            
            //From의 초기값을 오늘 날짜로 설정
            $('#testDatepicker').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
            //To의 초기값을 내일로 설정
            $('#sampleDatepicker').datepicker('setDate', '+1D'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
        });
    </script>
</body>
</html>
Colored by Color Scripter
cs

3. Datepicker 옵션별 세부 설정

① dateFormat

input의 displayFormat을 변경해주는 옵션입니다.

기본값은 DD/MM/YYYY 형태인데 우리나라에서 자주 사용되는 형태가 아닙니다.

아래와 같이 변경하면 YYYY-MM-DD 형태가 됩니다.

다른 형태가 필요하다면 공식 API문서를 참고해야 합니다.

$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd' //Input Display Format 변경
});

② showOtherMonths

$.datepicker.setDefaults({
showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
});

FLASE 일 경우

TRUE 일 경우

③ showMonthAfterYear

달력의 위쪽에 보면 년도보다 월이 먼저 표시됩니다. (ex : May 2018)

이 옵션을 true로 변경하면 년도가 월보다 먼저 표시됩니다. (ex : 2018 May)

년도가 먼저 표시되는 것이 우리나라에서는 일반적이기 때문에 아주 유용한 옵션입니다.

$.datepicker.setDefaults({
showMonthAfterYear: true //년도 먼저 나오고, 뒤에 월 표시
});

FLASE 일 경우

TRUE 일 경우

④ changeYear, changeMonth, nextText, prevText

changeYear와 changeMonth는 선택 하는 날짜의 범위가 넓을 때 앞뒤 화살표가 아닌 콤보박스로 년도와 월을 선택 할 수 있도록 해주는 옵션입니다.

nextText와 prevText의 설정을 통해 화살표에 툴팁을 지정 할 수 있습니다.

$.datepicker.setDefaults({
changeMonth: true, // true 설정 시 년도를 선택 할 수 있는 콤보박스 표시
changeYear: true, // true 설정 시 월을 선택 할 수 있는 콤보박스 표시
nextText: '다음 달', // 상단 우측 화살표에 툴팁을 지정
prevText: '이전 달' // 상단 좌측 화살표에 툴팁을 지정
});

FLASE 일 경우

TRUE 일 경우

JQuery UI 편리한 날짜선택 위젯 Datepicker 간단 사용법 #2

참고1. https://its-easy.tistory.com/12
참고2. http://www.nextree.co.kr/p9887/

jQuery select option 선택 값 가져오기

머니버그 — Wed, 30 Dec 2020 00:26:33 +0900

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
73
74
75
76
// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();
 
// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();
 
// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();
 
// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));
 
// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("1번");
 
// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("0번");
 
// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("1차2차");
 
// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("1차");
 
// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");
 
// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");
 
or
 
$("#id").text("1번").attr("selected", "selected");
 
// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");
 
or
 
$("#id").val("1").prop("selected", true);
 
// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();
 
// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();
 
// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();
 
// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));
 
// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();
 
// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();
 
// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();
 
// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("3번");
 
// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("2번");
 
// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
    alert($(this).val());
    alert($(this).children("option:selected").text());
});
Colored by Color Scripter
cs

참고 https://oingbong.tistory.com/175

jQuery SelectBox change 이벤트

머니버그 — Wed, 30 Dec 2020 00:19:03 +0900

SelectBox 의 change 이벤트 관련 내용을 정리해 봅니다.

1. change 이벤트 만들기

1
2
3
4
5
$("#SelectBoxID").change( function() {
 
    // 처리할 내용
 
});
Colored by Color Scripter
cs

2. bind 를 이용해 change 이벤트를 붙이기

1
2
3
4
5
$("#SelectBoxID").bind( "change", function() {
 
    // 처리할 내용
 
});
Colored by Color Scripter
cs

3. on을 이용해 change 이벤트 만들기

1
2
3
4
5
$("#SelectBoxID").on( "change", function() {
 
    // 처리할 내용
 
});
Colored by Color Scripter
cs

참고 https://freehoon.tistory.com/80

jQuery에서 부모창 제어/접근(opener, parent)

머니버그 — Tue, 29 Dec 2020 21:46:45 +0900

1. jQuery 자식 팝업 창에서 부모창 컨트롤

1
$(opener.document).find("#Form").attr("action","index.php").submit();
cs

2. 자식창 -> 부모창으로 값 전달하기

1
2
3
4
5
6
7
8
9
opener.document.getElementById("id").value="value"; //dom 객체로 제어
 
$("#id",opener.document).val("value"); // jQuery 방식 1
 
$("input[name=imgFile]", parent.document.body).val() // 방식 2
 
$(opener.document).find("#id").val("value"); //방식 3
 
opener.location.href="javascript:fun();"; //일반적인 방법
cs

참고 https://jp1020.tistory.com/entry/jQuery%EC%97%90%EC%84%9C-%ED%8C%9D%EC%97%85-%EB%B6%80%EB%AA%A8opener-%EA%B0%9D%EC%B2%B4-%EC%BB%A8%ED%8A%B8%EB%A1%A4

jQuery 라디오 버튼 체크 값 가져오기, 체크 여부 확인하기

머니버그 — Tue, 29 Dec 2020 19:38:34 +0900

1. 라디오 버튼 체크 값 가져오기

1
2
<input type="radio" name="rdoOptionFlog" value="Y"> 동의
<input type="radio" name="rdoOptionFlog" value="N"> 동의 안함
cs

위와 같이 라디오 버튼을 구현 했을 시

jQuery를 이용하여 체크된 라디오 버튼의 값, 혹은 라디오 버튼의 체크 여부를 확인 할 수 있습니다.

1
var rdoCheckValue = $('input[name=rdoOptionFlog]:checked').val();
cs

위와 같이 사용하면 체크된 라디오 버튼의 체크된 값을 가져 올 수 있습니다.

만약 아래와 같이

1
2
<input type="radio" name="rdoOptionFlog"> 동의
<input type="radio" name="rdoOptionFlog"> 동의 안함
cs

value 의 값을 따로 설정 하지 않을 시 체크를 하지 않으면 'undefined'가 뜨게 되고 체크를 하였다면 'on' 이라는 값을 출력하게 됩니다.

2. 라디오 버튼 체크 여부 확인하기

라디오 버튼, 체크 박스의 체크 여부를 확인 하기 위해서는 아래와 같이 사용하면 됩니다.

1
2
3
4
5
6
7
8
// 방법 1
var rdoCheck = $('input[name=rdoOptionFlog]').is(':checked');
 
// 방법2 : 라디오 버튼 지정
var rdoCheck = $('input:radio[name=rdoOptionFlog]').is(':checked');
 
// 방법3 : 체크 박스 지정
var rdoCheck = $('input:checkbox[name=rdoOptionFlog]').is(':checked');
cs

결과는 TRUE / FALSE 로 나옵니다.

참고 https://dkfkslsksh.tistory.com/31

jQuery form 처리하는 방법 .submit() event

머니버그 — Tue, 29 Dec 2020 16:07:13 +0900

웹 상에서 사용자에게 입력을 받기 위해 form을 사용합니다.

제이쿼리에는 폼을 처리하는 몇 가지 이벤트가 있는데, 그 중 .submit()에 대해 알아보겠습니다.

폼 양식 내 정보 출력

셀렉터로 사용자가 폼에서 입력한 정보를 가져와 원하는 위치를 지정해 다시 출력해 주는 코드를 작성해 보았습니다.

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
        $("#myForm").submit(function(){
                var name = $("#name").val();
                $("#inputData").append('' + '이름: '+ name + '
');
                var email = $("#email").val();
                $("#inputData").append('' + '이메일: ' + email + '
');
                return false;
        }); // end submit()
}); // end ready()
Colored by Color Scripter
cs

먼저 하단의 html 문서를 받아오기 위해 $(document).ready() funtion의 Dom 구조로 시작 합니다.

.submit()function으로 서브밋 이벤트를 실행시킵니다.

이때 함수명이 지정되지 않은 익명함수를 사용하였습니다.

.val()은 폼의 value를 읽어오거나 지정할 수 있습니다.

name과 email을 각각 셀렉터로 연결한 뒤, .append()로 특정 영역에 삽입해 줍니다.

1
2
3
4
5
6
<form id="myForm">
        이 름 : <input type="text" id='name' name="name"><p>
        이메일 : <input type="email" id='email' name="email"><p>
        <input type="submit" value="전송">
</form>
<div id="inputData"></div>
Colored by Color Scripter
cs

폼 유효성 검사

사용자가 username을 입력했을 때 빈칸인지 아닌지 검증해 알림을 띄우는 코드를 작성해 보았습니다.

1
2
3
4
5
6
7
8
$(document).ready(function() {
        $('#signup').submit(function() {
                if ($('#username').val() == '') {
                        alert('Please supply a name in the Name field.');
                        return false;
                }
        }); // end submit()
}); // end ready()
Colored by Color Scripter
cs

마찬가지로 Dom과 서브밋으로 시작합니다.

if문으로 empty string('')이 있는지 체크하여, 있다면 alert로 박스알림을 띄워 줍니다.

return false; 는 username이 비어있는 상태로 서버로 전송되는 것을 방지하기 위해 반드시 넣어줍니다.

1
2
3
4
5
6
7
8
9
<form action="process.php" method="post" name="signup" id="signup">
        <div>
                <label for="username" class="label">Name</label>
                <input name="username" type="text" id="username" size="36">
        </div>
        <div>
                <input type="submit" name="submit" id="submit" value="Submit">
        </div>
</form>
Colored by Color Scripter
cs

참고 https://dog-foot-story.tistory.com/6