인터렉티브 폼 (input,change이벤트, HTML동적생성, forEach반복문)

폼의 기본 형태를 만들어보자.

<form class="container my-5">
        <div class="form-group">
      
          <p>상품선택</p>
          <select class="form-control" id="option1">
            <option>바지</option>
            <option>셔츠</option>
          </select>
      
          <div class="size-select">
            <p class="mt-4">사이즈선택</p>
            <select class="form-control" id="option2">
              <option>95</option>
              <option>100</option>
              <option>105</option>
            </select>
          </div>

        </div>
</form>

쇼핑몰과 같은 곳에서 어떤 것을 선택하면 사이즈가 나오게 끔 하는 UI이다. 사이즈선택 div박스는 평소엔 안보여야 하므로

.size-select {
    display: none;
}

먼저 display: none을 준다. 

 

이제 자바스크립트로 select 인풋에서 셔츠라는 값이 선택되면 밑에 사이즈 선택 UI를 보여주게 짜야하는데 이럴때 쓰는 input이벤트 change이벤트가 있다.

change이벤트는 select가 바뀔 때, input태그는 안에 값을 입력하고 focus를 잃을 때 발동된다.

input이벤트는 select가 바뀔 때, input태그는 안에 하나하나 값이 입력될 때 마다 발동된다.

 

$('#option1').on('change', function(e) {
        if ( $('#option1').val() == "셔츠" ) {
          $('.size-select').show();
        }
        if ( $('#option1').val() == "바지" ) {
          $('.size-select').hide();
        }
});

이런 식으로, 자바스크립트를 작성하면 사용자가 선택한 값이 셔츠면 사이즈선택을 보여주고, 모자면 다시 감추게끔 change 이벤트를 활용해서 작성할 수 있다.

 

 

위 처럼 UI를 미리 짜서 만드는 방법이 있는 반면, 동적으로 HTML코드를 짜서 집어 넣는 경우가 있다.

<form class="container my-5">
        <div class="form-group">
      
          <p>상품선택</p>
          <select class="form-control" id="option1">
            <option>바지</option>
            <option>셔츠</option>
          </select>
      
          <div class="size-select">
            <p class="mt-4">사이즈선택</p>
            <select class="form-control" id="option2">
              
            </select>
          </div>

        </div>
</form>

먼저, html의 옵션부분을 지워주고

자바스크립트에서 템플릿을 만들고 append함수를 이용해서 추가하는 방식으로 하면된다. 

$('#option1').on('change', function(e) {
        if ( $('#option1').val() == "셔츠" ) {
          $('.size-select').show()
          $('#option2').html('');
          //템플릿을 만들고 append 하는 방식으로 추가
          var 템플릿 = `
            <option>95</option>
            <option>100</option>
            <option>105</option>
          `;
          $('#option2').append(템플릿);
        } else if ( $('#option1').val() == "바지" ) {
          $('.size-select').show()
          $('#option2').html('');
          var 템플릿 = `
            <option>28</option>
            <option>30</option>
            <option>32</option>
          `;
          $('#option2').append(템플릿);
        }
});

이때 템플릿에서 ` ` 에 쓰는 이유는 ' ' 안에 적으면 enter(줄바꿈)을 할 수 없어서 ` ` 안에 적어서 자유롭게 줄바꿈하기 위해서이다. 그리고 동적으로 html을 집어넣으면 좋은 점은 매번 UI를 만들지 않고 위 처럼 클릭만해서 UI를 다르게 실행해 줄 수 있다. 중간에 있는 $('#option2').html('');코드는 셔츠 클릭 후 바지를 클릭하면 전 사이즈가 그대로 남아있음을 방지하기 위한 코드이다.

 

만약, 동적으로 html을 생성하는데 option태그가 10개 이상이 되면 하나하나 다 적어줄 수 없기에 forEach반복문을 이용해보자. 먼저, 그냥 반복문을 이용해보면,

var 바지사이즈 = [26,28,30,32,34,36]

if( $('#option1').val() == "바지" ) {
          $('.size-select').show()
          $('#option2').html('');
          
         for (let i = 0; i < 바지사이즈.length; i++) {
          var 템플릿 = `
            <option>${바지사이즈[i]}</option>
          `;
          $('#option2').append(템플릿);
         }
}

이런 식으로, 사이즈에 대한 array를 미리 만들어놓고, option태그에 ${바지사이즈[i]}라고 변수를 담는 문법을 이용해 담아주면 된다. 그리고 반복문을 실행하는 횟수는 바지사이즈.length로 바지사이즈 변수의 길이만큼 반복해주세요 라고 하면 된다. 더 간단한 forEach 반복문을 써보면

바지사이즈.forEach(function(i) {
          var 템플릿 = `
            <option>${i}</option>
          `;
          $('#option2').append(템플릿);
 }

이런 식으로, 사용하면 array 자료 갯수만큼 반복해달라는 뜻이 된다. 대신 여기서 i는 array안에 있는 자료를 의미하므로 ${i}이렇게 써주면 순서대로 26, 28 ...이렇게 오게 된다.