PDA

View Full Version : Setting Text Field Readonly once Combobox Selected

shinta
06-27-2006, 02:05 AM
Hi,

I am working on a form and I need help on how to make a certain text field become readonly or the other way around once user has selected an option from a combobox. Any way of how on doing it is very appreciated. Thank you.
_Aerospace_Eng_
06-27-2006, 02:28 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
function setBox()
{
document.getElementById('optional').readOnly = (document.getElementById('optionsmenu').value == 'none')? 0 : 1;
alert(document.getElementById('optional').readOnly);
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="optionmenu" id="optionsmenu" onChange="setBox()">
<option value="none">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" name="optional" id="optional" value="test">
</form>
</body>
</html>
shinta
06-27-2006, 03:28 AM
Can I apply the same method if I wish to set a combo box readonly? Thanks.
_Aerospace_Eng_
06-27-2006, 03:34 AM
Since I don't think you want the readonly only field to submit I've made them disabled rather than readonly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">
function setBox()
{
document.getElementById('optional').disabled = (document.getElementById('optionsmenu').value == 'none')? 0 : 1;
document.getElementById('optionsmenu').disabled = (document.getElementById('optional').value == '')? 0 : 1;
}
</script>
</head>
<body>
<form action="#" method="post">
<select name="optionmenu" id="optionsmenu" onchange="setBox()">
<option value="none">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="text" name="optional" id="optional" onkeyup="setBox()">
</form>
</body>
</html>