Home »

Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio

Thứ Sáu, 8 tháng 5, 2009
[FD's BlOg] - Một ứng dụng cho phép bạn hiển thị một field nào đó khi nhấp chọn vào một buttom radio đã được định sẵn. Dùng nhiều trong thiết kế contact form.

Xem demo ở đây : http://fandung.110mb.com/hide-show-email-field/show-radio.html

Dưới đây là minh họa về khung xác nhận mail

Hình minh họa:

Nhấp vào nút Yes thì field điền mail sẽ hiển thị, như hình bên dưới:


Code HTML:

<!-- Radio elements -->
<input type="radio" name="newsletter" value="1" id="newsletter-1" onclick="javascript:toggle(1)" /><label for="newsletter-1">Yes</label>
<input type="radio" name="newsletter" value="1" id="newsletter-0" onclick="javascript:toggle(0)" checked="checked" /><label for="newsletter-2">No</label>

<!-- Hidden layer -->
<div id="email-field" style="display:none;">
<input type="text" id="email" />
Add your Email
</div>


Code Javascript:

<script type="text/javascript">
function toggle(status){
idStatus = status;
element =document.getElementById('email-field');
if(idStatus==0){
element.style.display='none';
} else {
element.style.display='block';
}
}
</script>
Tags:

Comments[ 0 ]


Đăng nhận xét