후원신청시 금액직접입력 적용하려면?
본문
후원신청시 금액입력 부분을 아래와 같이 해놓았는데요.
<input type="radio" name="wr_5" value="1만원"<?php echo ($write['wr_5'] == "1만원") ? " checked" : "";?> required> 1만원
<input type="radio" name="wr_5" value="2만원"<?php echo ($write['wr_5'] == "2만원") ? " checked" : "";?> required> 2만원
<input type="radio" name="wr_5" value="3만원"<?php echo ($write['wr_5'] == "3만원") ? " checked" : "";?> required> 3만원
<input type="radio" name="wr_5" value="기타금액"<?php echo ($write['wr_5'] == "기타금액") ? " checked" : "";?> required> 기타금액(직접입력)
여기서, 기타금액을 선택하면 , 입력창이 보이고 직접 금액을 입력할 수 있도록 하고 싶습니다.
도움 부탁 드립니다.
답변 1
간단하게 제이쿼리로 처리할 수 있습니다.
head.sub.php 에서 제이쿼리를 사용하고 있다고 가정하고
아래예제를 참고하시면 되겠습니다.
//라디오 입력부분
<input type="radio" name="wr_5" value="1만원"> 1만원
<input type="radio" name="wr_5" value="2만원"> 2만원
<input type="radio" name="wr_5" value="3만원"> 3만원
<input type="radio" name="wr_5" value="기타금액"> 기타금액(직접입력)
//레이어안에 input을 두고 숨김
<div id="show" style="display: none;">
<input type="text" name="wr_6" value="" placeholder="금액을 입력하세요.">
</div>
//기타금액을 선택할 경우 숨겨놓은 레이어를 보이게 처리
<script>
$("input[name='wr_5']").click(function () {
$('#show').css('display', ($(this).val() === '기타금액') ? 'block':'none');
});
</script>
레이어안에 input을 넣는게 불편하시다면
아래와같이 input에 직접 클래스를 줘서 처리할 수 있습니다.
//라디오 입력부분
<input type="radio" name="wr_5" value="1만원"> 1만원
<input type="radio" name="wr_5" value="2만원"> 2만원
<input type="radio" name="wr_5" value="3만원"> 3만원
<input type="radio" name="wr_5" value="기타금액"> 기타금액(직접입력)
<input type="text" id="show" name="wr_6" class="showclass" placeholder="금액을 입력하세요.">
//input을 숨김.
<style>
.showclass {display: none;}
</style>
//기타금액을 선택할 경우 숨겨놓은 레이어를 보이게 처리
<script>
$("input[name='wr_5']").click(function () {
$('#show').css('display', ($(this).val() === '기타금액') ? 'block':'none');
});
</script>
정말 상세하고 친절한 답변 감사 드립니다. 한번 적용해 보겠습니다.^^
답변을 작성하시기 전에 로그인 해주세요.
