티스토리 뷰

[JQUERY]자바스크립트

jQuery 026. input 의 값 확인하기. val()

가산동 2018. 10. 17. 22:29

아래는 예제입니다.

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //inputBtn의 이벤트
            $("#inputBtn").click(function(){
                
                //input 값
                var inputVal = $("#inputVal").val();
                
                alert("input의 val() = " + inputVal);
                
            });
            
        });
    </script>
</head>
    <body>
        <input type="text" id="inputVal"><button id="inputBtn">val() 확인</button>
    </body>
</html>
cs


아래는 예제의 미리보기 입니다. 실제 입력후 버튼을 클릭해 보세요.




예제를 라인별로 보겠습니다.

23
24
25
    <body>
        <input type="text" id="inputVal"><button id="inputBtn">val() 확인</button>
    </body>
cs

라인 24.    input 을 생성합니다. 타입은 'text', id는 'inputVal' 을 줬습니다. 옆에 id로 'inputBtn'을 가지는 

   버튼도 만들어 줍니다.


11
12
            //inputBtn의 이벤트
            $("#inputBtn").click(function(){
cs

라인 12.   만들어준 버튼에 클릭 이벤트를 생성합니다.

  클릭이벤트의 예제는 아래링크를 통해 볼 수 있습니다.

  >>[[JQUERY]자바스크립트] - jQuery 020. 이벤트 on(), 클릭이벤트 click()


13
14
15
16
                //input 값
                var inputVal = $("#inputVal").val();
                
                alert("input의 val() = " + inputVal);
cs

라인 14.    변수 'inputVal' 에 만들어둔 input의 값을 저장합니다.

라인 16.    alert() 함수를 활용해 input 의 val()를 출력합니다.

   alert() 함수의 예제는 아래링크를 통해 볼 수 있습니다.

   >>[[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()



# val()함수는 input의 값을 리턴합니다. 

# 다음 글에서는 text()에 대해 알아 보겠습니다.




저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 028. == 연산과 === 연산의 차이  (0) 2018.10.29
jQuery 027. 텍스트 값 가져오기 text()  (0) 2018.10.19
jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기  (0) 2018.10.16
jQuery 024. 조건문 if() 의 활용  (0) 2018.10.15
jQuery 023. 조건문 if()  (0) 2018.10.07
댓글