반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
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
Tags
more
Archives
Today
Total
관리 메뉴

비전공개미 개발노트

자바스크립트 return false일때 입력값 새로고침 안되게 본문

프론트엔드/JavaScript

자바스크립트 return false일때 입력값 새로고침 안되게

비전공개미 2022. 10. 4. 14:09
반응형
SMALL
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testForm.html</title>
    <style>
        * {font-size: 16pt;}
    </style>
    <script>
        function check(){
            let namechk = document.joinForm.user_name.value;
            if(namechk == ""){
                alert("이름을 입력해주세요");
                document.joinForm.user_name.focus();
                return false;
            }
            let pwdchk = document.joinForm.user_passwd.value;
            if(pwdchk == ""){
                alert("비밀번호를 입력해주세요");
                document.joinForm.user_passwd.focus();
                return false;
            }
        }

    </script>
</head>
<body>
    <h2>입력폼화면생성</h2>
    <div style="width:400px">
        <form name="joinForm" action="" onsubmit="return false;">
            <fieldset>
                <legend>입력화면 test</legend>
                <div class="input_group">
                    <label>이름 : </label>
                    <input type="text" name="user_name">
                </div>
                <div class="input_group">
                    <label>비번 : </label>
                    <input type="password" name="user_passwd">
                </div>
                <div>
                    <label>성별 : </label>
                    <input type="radio" name="gender" value="M">남자
                    <input type="radio" name="gender" value="F">여자
                </div>
                <div>
                    <label>취미 : </label>
                    <input type="checkbox" name="hobby" value="soccer">축구
                    <input type="checkbox" name="hobby" value="golf">골프
                    <input type="checkbox" name="hobby" value="movie">영화
                    <input type="checkbox" name="hobby" value="game">게임
                </div>
                <div>
                    <label>직업 : </label>
                    <select name="job">
                        <option value="dev">개발자</option>
                        <option value="dba">DBA</option>
                        <option value="pub">Web퍼블리셔</option>
                        <option value="network">Network관리자</option>
                    </select>
                </div>
                <div>
                    <label>파일 : </label>
                    <input type="file" name="myfile" size="20">
                </div>
                <div>
                    <label>내용 : </label>
                    <div>
                        <textarea name="memo" cols="30" rows="3"></textarea>                    
                    </div>
                </div>
                <div>
                    <input type="submit" value="데이터등록" onclick="check();">
                    <input type="reset" value="입력취소">
                </div>
            </fieldset>
        </form>
    </div>
</body>
</html>
testForm.html

입력폼화면생성

입력화면 test
남자 여자
축구 골프 영화 게임

 

 

 

이름과 비밀번호를 입력하지않으면 alert경고창을 띄워 focus를 주는데

alert창이 뜬 후 미리입력했던 이름이 새로고침되어 삭제되는 부분이 발생

 

form 태그에 onsubmit="return false;"를 입력하여 submit되지 않게 고정하여 해결

반응형
LIST
저작자표시 (새창열림)

'프론트엔드 > JavaScript' 카테고리의 다른 글

[JavaScript] 배열을 불러와 박스색상 변경하기  (0) 2022.10.06
[JavaScript] Date, String, Math, 사용자 객체  (0) 2022.10.05
[JavaScript] 배열선언, 배열출력, $.each  (1) 2022.10.05
[JavaScript] prompt창으로 입력, switch문 활용  (0) 2022.10.05
HTML/JavaScript - 숫자만 입력하기 / 다음우편번호 서비스  (0) 2022.09.30
'프론트엔드/JavaScript' Related Articles more
Comments