[JavaScript] input 태그에 입력한 value 가져오기

 

form 태그 내 input 태그에 값을 입력하지 않고 submit button을 누르면 alert 창이 뜨게 만들려고 한다. 그럼 input 태그의 값을 어떻게 가져와야 할까? 

 

 

 

 

input 태그의 값을 가져오려면 다음과 같이 작성하면 된다 .

 

document.getElementById('id 값').value;

 

 

<div class="black-bg" show-modal >
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <form action="success.html">
            <div class="my-3">
              <input type="text" id="inputValue" class="form-control">
             </div>
             <div class="my-3">
               <input type="password" class="form-control">
             </div>
             <button type="submit" class="btn btn-primary" id="submit">전송</button>
             <button type="button" class="btn btn-danger" id="close">닫기</button>
          </form> 
        </div>
      </div> 

      <script>
        //전송 버튼 누르면 input에 입력한 값이 공백이면 알림창 띄워 주세요~
        var inputValue = document.getElementById('inputValue').value;
        //폼이 전송될 때 submit이라는 이벤트가 발생한다. 따라서 아래처럼 안 해두 됨
        //$('#submit').on('click',function(){
            $('form').on('submit',function(){
            if(inputValue=='' || inputValue == null){
            alert('공백은 안됨.');
        }
        })
        </script>

 

 

inputValue에 사용자가 입력한 값을 저장하여 만약 그 값이 공백이라면 alert를 띄우게 하는 코드이다. 여기서는 alert를 띄운 다음 action에 지정해둔 url로 이동하게 되는데 이를 막으려면 아래와 같이 작성하자.

 

$('form').on('submit',function(e){
    if(inputValue=='' || inputValue == null){
    alert('공백은 안됨.');
    e.preventDefault();
}