후원신청시 금액직접입력 적용하려면? 채택완료
후원신청시 금액입력 부분을 아래와 같이 해놓았는데요.
<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 에서 제이쿼리를 사용하고 있다고 가정하고
아래예제를 참고하시면 되겠습니다.
</p>
<p>//라디오 입력부분</p>
<p><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="기타금액"> 기타금액(직접입력)</p>
<p> </p>
<p>//레이어안에 input을 두고 숨김</p>
<p><div id="show" style="display: none;">
<input type="text" name="wr_6" value="" placeholder="금액을 입력하세요.">
</div></p>
<p> </p>
<p>//기타금액을 선택할 경우 숨겨놓은 레이어를 보이게 처리</p>
<p><script>
$("input[name='wr_5']").click(function () {
$('#show').css('display', ($(this).val() === '기타금액') ? 'block':'none');
});
</script></p>
<p>
레이어안에 input을 넣는게 불편하시다면
아래와같이 input에 직접 클래스를 줘서 처리할 수 있습니다.
</p>
<p>//라디오 입력부분</p>
<p><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="기타금액"> 기타금액(직접입력)</p>
<p><input type="text" id="show" name="wr_6" <span style="color:#e74c3c;">class="showclass" </span>placeholder="금액을 입력하세요."></p>
<p> </p>
<p>//input을 숨김.</p>
<p><style>
.showclass {display: none;}
</style></p>
<p> </p>
<p>//기타금액을 선택할 경우 숨겨놓은 레이어를 보이게 처리</p>
<p><script>
$("input[name='wr_5']").click(function () {
$('#show').css('display', ($(this).val() === '기타금액') ? 'block':'none');
});
</script></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인