말 그대로 체크하면 폼데이터가 자동으로 입력되는 것을 자바스크립트로 구현해보도록 하겠다.
이 기능은 바로 쇼핑몰에서 많이 사용되는 기능이다.
예시 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>
'공부한 내용 > JavaScript' 카테고리의 다른 글
Swith vs if else문 (0) | 2017.11.18 |
---|---|
폼의 값 두군데 파일에 동시에 submit하는 방법 (0) | 2017.07.07 |