[JS] form을 이용하여 사용자에게 입력받기 - 공백 차단 로그인편(간단)

아이디와 비밀번호를 입력받을 모달창을 디자인한다.

<form action="success.html">

    <div class="my-3">
        <input type="text" class="form-control" id="email"></input>
    </div>

    <div class="my-3">
        <input type="password" class="form-control" id="password"></input>
    </div>
    
    <button type="submit" class="btn btn-primary" id="submit">전송</button>
    <button type="button" class="btn btn-danger" id="close">닫기</button>

</form>

<input>태그는 사용자에게 입력받을 수 있는 태그이다.

<form>태그로 사용자에게 입력받은 데이터를 전송한다. success.html으로

<button>에 type으로 submit을 지정하면 해당 버튼이 폼 데이터(form data)를 제출한다.

<script>

	$('#submit').on('click',function(e){
        let email = document.getElementById('email');
        let password = document.getElementById('password');
        
        if(!email || !password){
        	alert(error);
            e.preventDefault();
        }
    });

</script>

email이라는 변수를 만들어서 <input>으로 받은 내용을 넣고

password이라는 변수를 만들어서 <input>으로 받은 내용을 넣고

 

submit이라는 아이디를 가지고 있는 버튼을 클릭하면 콜백함수를 실행하는데

만약에 email에 들어있는 값이 null(false)이 아니거나(true) password(false)에 들어있는 값이 null이 아니거나(true) 둘다 null(false)이 아니면 true로 바뀌니까 alert를 띄운다.

e.preventDefault로 전송을 차단하도록 한다.(기본-Default 동작들을 막는다.)