입력 요소 값 가져오기

1. val() 함수의 사용

• 입력값 조회 : 파라미터 앖이 함수를 호출하면 현재 설정되어 있는 입력값(value 속성의 값)으 리턴 받음
  let value + $("셀렉터").val();
• 입력값 설정 : 파라미터를 통해 입력값(value 속성 값)을 설정
  $("셀렉터").val("내용");
• 조회한 입력값이 존재 여부를 if문으로 검사하면 입력 여부를 알 수 있음
  if(!value){...}
• focus() 함수의 사용 : 입력 요소에 포커스를 강제로 설정
  $("셀렉터").focus();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="myform">
        <div>
            <label>사용자 이름
                <input type="text" name="username" id="username">
            </label>
        </div>
        <div>
            <label>비밀번호
                <input type="password" name="userpass" id="userpass">
            </label>
        </div>
        <button type="submit">입력값 확인</button>
        <hr>
        <!-- 선텍 결과 표시할 div -->
         <div id="result"></div>
    </form>
    <script>
        // 폼에서 데이터 전송 이벤트
        $("#myform").submit(function(e){
            e.preventDefault();

        // username에 값이 없을 경우 "이름을 입력하세요" alert()
        let username = $("#username").val();
        if (!username){
            alert("이름을 입력해주세요");
            $("#username").focus();
            return false;
        }

        // userpass에 값이 없을 경우 "비밀번호를 입력하세요" alert()
        let userpass = $("#userpass").val();
        if (!userpass){
            alert("비밀번호를 입력하세요");
            $("#userpass").focus();
            return false;
        }

        // 입력값을 화면에 표시  #result 에다가 이름 : 비밀번호 : 각각 표시
        $("#result").append("<div>이름 : " + username + "</div>");
        $("#result").append("<div>비밀번호 : " + userpass + "</div>");

        // 백엔드 페이지에게 데이터를 전송
        // $(this).submit();
        });
    </script>
</body>
</html>

2. 셀렉트박스 입력값

• 만약 <option> 요소에 value 속성이 없을 경우 태그 안의 내용을 가져오기 때문에 값이 필요없는 항목이더라도 반드시 공백을 지정해야함

	<select>
		<option value="">--- 선택하세요 ---</option>
		<option value="1">항목 1</option>
	</select>

• 드롭다운 역시 val() 함수를 사용해서 선택한 <option> 요소의 값을 가지고 옴
• 선택 위치 조회 : 드롭 다운에 포함된 option 태그 중에서 선택된 항목(:selected)의 위치를 검사
  $("셀렉터 > option:selected").index()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="myform">
        <div>
            <label>과목
                <select name="subject" id="subject">
                    <option value="">--- 선택하세요 ---</option>
                    <option value="html">HTML</option>
                    <option value="css">CSS</option>
                    <option value="javascript">Javascript</option>
                </select>
            </label>
        </div>
        <button type="submit">입력값 확인</button>
        <hr>
        <div id="result"></div>
    </form>
    <script>
        // 폼에서 데이터 전송 이벤트
        $("#myform").submit(function(e){
            e.preventDefault();

        let subject = $("#subject").val();
        if (!subject){
            alert("과목을 선택해주세요");
            $("#subject").focus();
            return false;
        }

        let subject_index = $("#subject > option:selected").index();

        $("#result").append("<div>과목 : " + subject + "</div>");
        $("#result").append("<div>선텍한 과목의 인덱스값 : " +  subject_index + "</div>");

        // 백엔드 페이지에게 데이터를 전송
        // $(this).submit();
        });
    </script>
</body>
</html>

3. 라디오의 선택 항목

• 선택값 조회
• 여러개 항목 중에서 선택된 항목을 의미하는 가상 셀렉터:checked를 사용하여 선택된 요소에 접근
• 라디오 버튼은 여러 개의 항목 중에서 단 하나만 선택할 수 있으므로, :checked 가상 클래스를 사용하여 접근하는 요소 역시 단일 요소가 됨
  let value = $("셀렉터:checked").val();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="myform">
        <label>
            <input type="radio" name="subject" value="html">HTML
        </label>
        <label>
            <input type="radio" name="subject" value="css">CSS
        </label>
        <label>
            <input type="radio" name="subject" value="javascript">Javascript
        </label>
        <button type="submit">입력값 확인</button>
    </form>
    <script>
        $("#myform").submit(function(e){
            e.preventDefault();

            let value = $("input[name='subject']:checked").val();
            if (!value) {
                alert("선택된 항목은 " + value + "입니다");
                return false;
            }
            
            alert("선택된 항목은 " + value + "입니다");
        // 백엔드 페이지에게 데이터를 전송
        // $(this).submit();
        });
    </script>
</body>
</html>

4. checkbox 선택 항목

• checkbox는 여러 개의 항목들 중에서 복수 선택이 가능한 요소
• 사용자가 선택한 항목에 대한 접근은 가상 셀렉터:checked를 사용해야함
• 체크박스는 복수 선택이 가능하기 때문에 접근한 요소는 배열 상태가 됨

	<input tpye="checkbox" name="hello" class="mycheck" value="1">
	<input tpye="checkbox" name="hello" class="mycheck" value="2">
	<input tpye="checkbox" name="hello" class="mycheck" value="3">

	let el = $("셀렉터:checked"); // 2번, 3번을 선택했다고 가정
	let el = [<input tpye="checkbox" name="hello" class="mycheck" value="2">
		<input tpye="checkbox" name="hello" class="mycheck" value="3">];

• 가져온 요소가 배열이기 때문에 반복문으로 처리
• 배열의 요소들을 jquery 객체로 변환하여 val() 함수를 호출
  for(let i=0; i<el.length; i++) {
  let value = $(el[i]).val();
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <form id="myform">
        <label>
            <input type="checkbox" class="hobby" 
                value="soccer"/> 축구
        </label>
        <label>
            <input type="checkbox" class="hobby" 
                value="basketball"/> 농구
        </label>
        <label>
            <input type="checkbox" class="hobby" 
                value="baseball"/> 야구
        </label>
        <button type="submit">입력값 확인</button>
        <hr/>
        <div id="result"></div>
    </form>
    <script>
        $("#myform").submit(function(e){
            e.preventDefault();

            // 선택된 항목을 가져온다.-> 배열
            let check_list = $(".hobby:checked");

            // 배열의 길이가 0이면 선택된 항목이 없다는 뜻
            if( check_list.length == 0 ){
                alert("선택된 항목이 없습니다.");
                return false;
            }

            // 배열의 길이만큼 반복
            for( let i=0; i<check_list.length; i++ ){
                let value = $( check_list[i] ).val();
                // 화면 표시
                $("#result").append("<div>" + value + "</div>");
            }

            $.each(check_list, function(index, item){
                console.log("index : " + index);
                console.log("item : " + item);
            });

        });
    </script>
</body>
</html>