Ẩn hiện field sọan thảo với việc nhấp chọn nào nút Radio - Wap giải Trí
vietnamese Tiếng Việt english English
Hôm nay: Thứ Ba, ngày 15 tháng 04 năm 2025
Home »

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

[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