Trong vài trường hợp thiết kế mẫu Form trên web bạn thể nhận được yêu cầu là khi khách hàng chọn YES thì mới điền thêm một số thông tin phụ, còn khách hàng chọn NO thì không cần phải điền các thông tin phụ này. Đoạn JavaScript đơn giản sau sẽ hướng dẫn các bạn cách để thực hiện công việc như trên.
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Effect Script
Hỗ trợ trình duyệt: Firefox, IE, Chrome, Safari, Opera
JavaScript Effect Script
<html>
<head>
<script type="text/javascript">
function changetextbox()
{
if (document.getElementById("mfi_4_a_i").value =="No") {
document.getElementById("sdd").style.display='none';
} else if (document.getElementById("mfi_4_a_i").value =="Yes") {
document.getElementById("sdd").style.background='pink';
}
else{
document.getElementById("sdd").style.display='block';
}
}
</script>
</head>
<body>
<select id="mfi_4_a_i" name="mfi_4_a_i" onchange="changetextbox();">
<option>Yes</option>
<option>No</option>
<option>No, but planning in future</option>
</select>
<textarea id="sdd" name="mfi_4_a_ii" style="border: 1px solid black; width: 200px;"></textarea>
</body>
</html>
<head>
<script type="text/javascript">
function changetextbox()
{
if (document.getElementById("mfi_4_a_i").value =="No") {
document.getElementById("sdd").style.display='none';
} else if (document.getElementById("mfi_4_a_i").value =="Yes") {
document.getElementById("sdd").style.background='pink';
}
else{
document.getElementById("sdd").style.display='block';
}
}
</script>
</head>
<body>
<select id="mfi_4_a_i" name="mfi_4_a_i" onchange="changetextbox();">
<option>Yes</option>
<option>No</option>
<option>No, but planning in future</option>
</select>
<textarea id="sdd" name="mfi_4_a_ii" style="border: 1px solid black; width: 200px;"></textarea>
</body>
</html>
No comments:
Post a Comment