SeouliteLab

jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제 본문

프로그래밍

jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제

Seoulite Lab 2024. 3. 26. 14:16

소개:
이 예제에서는 jQuery를 사용하여 input 태그에서 사용자가 입력한 값을 가져와서 alert 창으로 표시하는 방법을 살펴봅니다. '입력값 확인'이라는 버튼을 클릭하면 사용자가 입력한 ID와 PW 값을 가져와서 alert 창에 표시합니다.

input 태그 값 가져오기와 alert 창 표시:
jQuery를 사용하여 input 태그에서 값을 가져오는 것은 val() 메서드를 사용합니다. 이를 통해 입력된 값을 가져온 후, 가져온 값을 alert 창에 표시할 수 있습니다.

설정:
HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다.

예제: input 태그 값 가져오기와 alert 창 표시하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input 태그 값 가져오기와 alert 창 표시 예제</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="inputID" placeholder="ID를 입력하세요">
    <input type="password" id="inputPW" placeholder="비밀번호를 입력하세요">
    <button id="showInputBtn">입력값 확인</button>

    <script>
        $(document).ready(function(){
            $('#showInputBtn').click(function(){
                var inputID = $('#inputID').val();
                var inputPW = $('#inputPW').val();
                alert("입력된 ID: " + inputID + "\n입력된 PW: " + inputPW);
            });
        });
    </script>
</body>
</html>

출력 결과:
alert 창에 입력된 ID와 PW 값이 표시됩니다.

설명:
위의 예제에서는 jQuery를 사용하여 '입력값 확인' 버튼을 클릭하면 input 태그에 입력된 ID와 PW 값을 가져와서 alert 창에 표시합니다. $(document).ready() 함수를 사용하여 문서가 로드되면 버튼의 클릭 이벤트를 처리하도록 설정합니다. 클릭 이벤트 핸들러에서는 val() 메서드를 사용하여 input 태그에서 값을 가져온 후, alert 창에 표시합니다.

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

'프로그래밍' 카테고리의 다른 글

jQuery의 반복문 - for 문 활용하기  (0) 2024.03.26
jQuery를 사용한 HTML 요소 동적 추가 - append 메서드  (0) 2024.03.26
jQuery를 사용한 input 태그 placeholder 변경 예제  (0) 2024.03.26
jQuery를 활용한 h태그 내용 변경 예제  (0) 2024.03.26
Java에서 디렉토리 크기 계산하는 방법  (0) 2024.03.26
'프로그래밍' Related Articles more