Altering text box properties

Given the code below, is there a way to consolidate the nested if statements within the function showSelected() based on class assignments and concatinating the variable passed in. What I would like to do is have 1 IF statement, and so something to the effect of :

document.myform.userid + type.readOnly = false;

but this does not work, and I obviously need a lesson in javascript variable and class useage in this situation.

Code:
----------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="JavaScript">
function showSelected(type, x)
{
var selObj = document.getElementById('selectID' + x);
var selIndex = selObj.selectedIndex;
var txtValueObj = selObj.options[selIndex].value;

var type = type;

//alert("x: " + x + '\n' + "type: " + type + '\n' + "txtValueObj: " + txtValueObj)

if (txtValueObj == '*')
{
if (type == "Person1")
{
document.myform.useridPerson1.readOnly = false;
document.myform.useridPerson1.style.backgroundColor='fffaf0';
document.myform.address1Person1.readOnly = false;
document.myform.address1Person1.style.backgroundColor='fffaf0';
document.myform.address2Person1.readOnly = false;
document.myform.address2Person1.style.backgroundColor='fffaf0';
document.myform.citystatePerson1.readOnly = false;
document.myform.citystatePerson1.style.backgroundColor='fffaf0';
document.myform.countryPerson1.readOnly = false;
document.myform.countryPerson1.style.backgroundColor='fffaf0';
}
if (type == "Person2")
{
document.myform.useridPerson2.readOnly = false;
document.myform.useridPerson2.style.backgroundColor='fffaf0';
document.myform.address1Person2.readOnly = false;
document.myform.address1Person2.style.backgroundColor='fffaf0';
document.myform.address2Person2.readOnly = false;
document.myform.address2Person2.style.backgroundColor='fffaf0';
document.myform.citystatePerson2.readOnly = false;
document.myform.citystatePerson2.style.backgroundColor='fffaf0';
document.myform.countryPerson2.readOnly = false;
document.myform.countryPerson2.style.backgroundColor='fffaf0';
}

}
}

</script>

</head>

<body>

<form name="myform">
<table border="0">
<tr>
<td colspan=2 style="font-size:19px; font-weight:bold">Person 1</td>
</tr>
<tr>
<td colspan="2">
<select id="selectID1" onChange="showSelected('Person1', 1)">
<option>Select ID:</option>
<option>------------------------------------------------------------------------</option>
<option>ID 1</option>
<option>ID 2</option>
<option value="*">Enter Information for New Person</option>
</select>
</td>
</tr>
<tr>
<td>Name</td>
<td><input readonly size=35 type="text" name="useridPerson1"/></td>
</tr>
<tr>
<td>Address 1:</td>
<td><input readonly size=35 type="text" name="address1Person1"/></td>
</tr>
<tr>
<td>Address 2:</td>
<td><input readonly size=35 type="text" name="address2Person1" value=""/></td>
</tr>
<tr>
<td>City / State</td>
<td><input readonly size=35 type="text" name="citystatePerson1" value=""/></td>
</tr>
<tr>
<td>Country</td>
<td><input readonly size=35 type="text" name="countryPerson1" value=""/></td>
</tr>
</table>

<table border="0">
<tr>
<td colspan=2 style="font-size:19px; font-weight:bold">Person 2</td>
</tr>
<tr>
<td colspan="2">
<select id="selectID2" onChange="showSelected('Person2', 2)">
<option>Select ID:</option>
<option>------------------------------------------------------------------------</option>
<option>ID 1</option>
<option>ID 2</option>
<option value="*">Enter Information for New Person</option>
</select>
</td>
</tr>
<tr>
<td>Name</td>
<td><input readonly size=35 type="text" name="useridPerson2"/></td>
</tr>
<tr>
<td>Address 1:</td>
<td><input readonly size=35 type="text" name="address1Person2"/></td>
</tr>
<tr>
<td>Address 2:</td>
<td><input readonly size=35 type="text" name="address2Person2" value=""/></td>
</tr>
<tr>
<td>City / State</td>
<td><input readonly size=35 type="text" name="citystatePerson2" value=""/></td>
</tr>
<tr>
<td>Country</td>
<td><input readonly size=35 type="text" name="countryPerson2" value=""/></td>
</tr>
</table>
</form>

</body>

</html>

Altering text box properties

A question of consolidation

Argblat

Bernard Marx

Argblat

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week