로그인 폼, 회원 가입 폼 등 input 칸을 이용했을 때
값을 입력하지 않고 전송하면 값을 넣어달라는 alert창이 필요할 때가 있다.
onclick하면 alert을 띄우는 function을 호출하고, function 안에서 조건문을 이용해 null값일 시 alert을 출력하면 된다😊
<body>
<form action="" method="post">
<div class="login_box">
<input name="id" id="id" placeholder="아이디를 입력해주세요." >
<input name="pw" id="pw" placeholder="비밀번호를 입력해주세요.">
<input type="submit" value="로그인" id="login" onclick="A()"> // 클릭 시 function A() 발생
</div>
</form>
</body>
<script>
function A(){
let id=document.getElementById('id'); // submit 버튼을 누른 후 전송된 value를 인지할 수 있도록 function안에 적어주어야 한다.
let pw=document.getElementById('pw');
let id_val=id.value;
let pw_val=pw.value;
if(id_val==="") { alert("아이디를 입력해주세요."); id.focus(); }
else if(pw_val==="") { alert("비밀번호를 입력해주세요."); pw.focus(); }
</script>placeholder에 아이디를 입력해달라는 문구를 적어서 null값이 나오지 않을 수 있지 않을까 했는데
value 값을 비교해 판단하기 때문에 다행히 상관이 없었다 o.ob
script 안에서 function A()를 만들어 주었다.
각 input 태그의 id를 가져와 변수에 저장해주었고
(이때 function A()의 밖에서 저장하게 되면 전송한 값이 저장되지 않고 계속해서 빈 값이 나온다)
input에 입력된 값 → value가 null인지 확인할 것이기 때문에
document.getElementById('id').value;의 형태로 value 값을 조건문에 넣어 비교했다.
if(A===" "B) 형태로 값이 비어있는지 확인해서 alert 창을 띄우고,
.focus();를 사용하면 비어있는 칸으로 이동이 돼서 사용자가 편리하게 값을 입력할 수 있게 된다😀
'HTML&CSS&JS' 카테고리의 다른 글
| [JS] form onsubmit / return false;로 조건에 맞지 않으면 submit 멈추기 (0) | 2023.06.07 |
|---|---|
| [CSS] placeholder의 글자 폰트, 색 등등 꾸미기 (0) | 2023.06.07 |
| [CSS] button 태그, onclick으로 페이지 이동하기 (0) | 2023.05.25 |
| [HTML] table태그로 표 만들기(tr td th) (0) | 2023.04.18 |
| [CSS] <p>태그의 absolute, 개행 (0) | 2023.04.16 |
