자바스크립트 - form 이벤트

form 이벤트

document.forms : 문서에 존재하는 form들을 반환

Ex. document.forms.memberJoin : name 속성이 memberJoin인 문서내의 form 반환

Ex. document.forms[0] :  문서 내 가장 첫 번째 form

form.elements : 해당 form 내의 name 속성이 일치하는 element 들을 반환함

from.elements.userid : name 속성이 userid인 해당 form 내의 엘리먼트

 

<form name="memberJoin" method="post" action="">
        <table>
            <tr>
                <td><label for="userid">아이디</label></td>
                <td><input type="text" name="userid" id="userid" required></td>
                <td><input type="button" value="중복확인"></td>
            </tr>
            <tr>
                <td><label for="pwd1">비밀번호</label></td>
                <td><input type="password" name="pwd1" id="pwd1" required></td>
                <td><span id="pwdresult"></span></td>
            </tr>
            <tr>
                <td><label for="pwd2">비밀번호확인</label></td>
                <td><input type="password" name="pwd2" id="pwd2" required></td>
                <td></td>
            </tr>
            <tr>
                <td>성별</td>
                <td>
                    <input type="radio" name="gender" id="male" value="m"><label for="male">남자</label>
                    <input type="radio" name="gender" id="female" value="f"><label for="female">여자</label>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>나이</td>
                <td>
                    <select id="age" name="age">
                        <option value="10">10대 이하</option>
                        <option value="20">20대</option>
                        <option value="30">30대</option>
                        <option value="40">40대</option>
                        <option value="50">50대</option>
                        <option value="60">60대 이상</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>자기소개</td>
                <td colspan="2"><textarea name="introduce" id="introduce" rows="5" cols="30"
                        style="resize:none;"></textarea></td>
            </tr>
            <tr>
                <td><label for="email">이메일</label></td>
                <td><input type="email" name="email" id="email" required></td>
                <td><span id="emailresult"></span></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="reset" value="초기화">
                    <input type="submit" value="회원가입">
                    <input type="image" value="회원가입">
                </td>
                <td></td>
            </tr>
        </table>
    </form>

<script>
        //폼 얻기
        console.log(document.forms.memberJoin); // name이 memberJoin인 폼
        console.log(document.forms[0]);         // 문서 내의 첫 번째 폼
        // 요소 얻기
        let form = document.forms.memberJoin;
        console.log(form.elements.userid);     // form의 내부 요소 중 name이 userid인 요소
        console.log(form.elements.gender);     // form의 내부 요소 중 name이 gender인 요소
        console.log(form.elements.gender[0]);
        console.log(form.elements.gender[1]);
        // 역참조 가능
        let email = form.elements.email;        // 폼 -> 요소
        console.log(email.form);                // 요소 -> 폼
        console.log("===============================================")
    </script>

 

form 요소 값 다루기

input, textarea : input.value 또는 input.checked(checkbox 또는 radio)

select.options : option 하위 요소들을 담고 있는 컬렉션

select.value : 현재 선택 된 option값

select.selectIndex : 현재 선택 된 option의 인덱스

 

<button id="test1">input text</button>
<button id="test2">input radio</button>
<button id="test3">textarea</button>
<button id="test4">select</button>

 

<script>
        document.querySelector("#test1").addEventListener('click', () => {
            console.log("userid.value : " + userid.value);
            email.value = 'email@email.com';
        });
        document.querySelector("#test2").addEventListener('click', () => {
            console.log("male.checked : " + male.checked);
            female.checked = false;
        });
        document.querySelector("#test3").addEventListener('click', () => {
            console.log("introduce.innerHTML : " + introduce.innerHTML);
            console.log("introduce.value : " + introduce.value);
            introduce.value = '아이엠그라운드~자기소개하기~';
        });
        document.querySelector("#test4").addEventListener('click', () => {
           age.options[2].selected = true;
           age.selectedIndex = 3;
           age.value = '50';
           console.log("age.options[2].selected : " + age.options[2].selected);
           console.log("age.selectedIndex : " + age.selectedIndex);
           console.log("age.value : " + age.value);
        });
    </script>