[JavaScript] 체크하면 폼데이터 자동입력

말 그대로 체크하면 폼데이터가 자동으로 입력되는 것을 자바스크립트로 구현해보도록 하겠다.

이 기능은 바로 쇼핑몰에서 많이 사용되는 기능이다.

예시 GIF 파일을 살펴보자

 처음 만드는 gif 이라 그런지.. 조금 살짝 느린거 같으니 여유를 갖고 지켜보자!! ㅎㅎ

 <!-- 버튼 클릭시 자동입력 버튼 클릭시 or 클릭 해제시 임의에 문자 f의 인자값을 가져라 버튼에 onchang="check1(this)" -->

  

  <script type="text/javascript">

    function check1(f){

      if (f.checked) {

        $('#name_2').val($('#name_1').val());

        $('#adr_2').val($('#adr_1').val());

      } else{

      $('#name_2').val('');

      $('#adr_2').val('');

        }

      }

    </script>

    <!-- 버튼 클릭시 자동입력-->

  <div class="container" style="text-align:center">

      <form class="form-horizontal">

  <div class="form-group">

    <h1>주문자명</h1>

    <label for="inputEmail3" class="col-sm-2 control-label">성함</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="name_1" name="name_1" placeholder="성함">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">주소</label>

    <div class="col-sm-10">

      <input type="text" class="form-control" id="adr_1" name="adr_1" placeholder="주소">

    </div>

  </div>

  <h1>받는 사람</h1>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox" name="checkbox" id="checkbox" onchange="check1(this)"> 위와 동일하면 체크해주세요

        </label>

      </div>

    </div>

    </div>

    <div class="form-group">

      <label for="inputEmail3" class="col-sm-2 control-label">성함</label>

      <div class="col-sm-10">

        <input type="email" class="form-control" id="name_2" name="name_2" placeholder="성함">

      </div>

    </div>

    <div class="form-group">

      <label for="inputPassword3" class="col-sm-2 control-label">주소</label>

      <div class="col-sm-10">

        <input type="text" class="form-control" id="adr_2" name="adr_2" placeholder="주소">

      </div>

    </div>

  </div>

</form>

</div>