How to Make Read Only in Text when i select Option in Select Box .

[srins]

Hi,

I am not getting
here the value of
var id = selObj.options[selIndex].value;
in the below script.
Basically i need to do disable keyword (ie) Property = "search Type"
when i select the option "My Group" .

For other options i need to enable the Keyword text area.

But i am not getting the value in the "id" in my java script.
How to get the on change event and disable the keyword text when my option is "My Group".

<code>
<html:form action="groupNameSearch.do" method="POST">
<table border="0" width=80%>
<tr>
<td width=10%><b>Search Type:</b></td>
<td width=20%>
<html:select property="searchType" onchange="disablefield(window.document.GroupNameSearchForm.searchType.option[selectedIndex].text);">
<html:option value="userName">My Group</html:option>
<html:option value="members">Group Members</html:option>
<html:option value="groupName">By Partial Group Name</html:option>
</html:select>
<td width=8%>
<b>Keyword:</b>
</td>
<td width=35%><html:text maxlength="40" size="40" readonly="<%=read%>" title="keyword" property="searchName" value="<%
=searchValue%>" />
</td>
<td width=15% align=left>
<html:submit title="Search" value="Search" />
</td>
</tr>
</table>
</html:form>
</code>

<code>
function disablefield(){

var selObj = document.getElementById("searchType");
alert('your choice of text ....'+selObj);
box = document.GroupNameSearchForm.searchType.option.selectedIndex.value;
if(box!=null){
alert('your choice of text ....');
}
else{
alert('your choice of text');
}
destination = box.options[box.selectedIndex].value;
alert('your choice of text'+destination);
if (destination) location.href = destination;

var s="mani";
alert('your choice of text'+selObj);
var id = selObj.options[selIndex].value;

if(txt==userName){
window.document.GroupNameSearchForm.searchName=disable;

disable;
}
else{
window.document.GroupNameSearchForm.searchName=enable;
}
}
</code>

[Fotiman]

Oh, where to begin...

First, some general suggestions:
1. You're obviously using tables for layout. You should give strong consideration to uncoupling your presentation and content layers, using semantic markup (ie - not using tables for non-tabular data) and CSS to position/present your page the way you want. That will give you more flexibility to change the presentation later on without having to muck with your content.

2. You should always surround attribute values with quotes. As in width="80%" instead of width=80%.

3. You should not use the width attribute. It has been deprecated. This is presentation... use CSS to specify the width.

4. You should not use the <b> tags. Also deprecated. This is presentation. Use <strong> instead, and/or use CSS to specify bold styling.

5. Be sure to close all of your tags. You're missing a closing </td> after your </html:select>

6. You should not use the align attribute. It has been deprecated. This is presentation... use CSS instead.

7. You should consider separating your content layer (HTML) from your behavior layer (JavaScript). Instead of mucking up your content with 'onchange' attributes, specify all of the behaviors in JavaScript and use JavaScript to attach the event handlers/listeners.

Now, for you specific problem. Try the code below. Note the following changes:
1. I added styleId's to form elements (I can see you're using Struts and styleId will create an id attribute in the generated HTML).
2. I've pulled out the behavior from the markup and put it into script.
3. I didn't bother to make the other corrections/suggestions that I offered above (but I encourage you to).

<script type="text/javascript"> 
window.onload = function() { 
  var searchType = document.getElementById('searchType'); 
  searchType.onchange = function() { 
    var keywords = document.getElementById('searchName'); 
    if (this.selectedIndex == 0) { // My Group is selected 
      keywords.disabled = true; 
    } 
    else { 
      keywords.disabled = false; 
    } 
  }; 
}; 
</script> 

<code>
<html:form action="groupNameSearch.do" method="POST">
<table border="0" width=80%>
<tr>
<td width=10%><b>Search Type:</b></td>
<td width=20%>
<html:select property="searchType" styleId="searchType">
<html:option value="userName">My Group</html:option>
<html:option value="members">Group Members</html:option>
<html:option value="groupName">By Partial Group Name</html:option>
</html:select>
<td width=8%>
<b>Keyword:</b>
</td>
<td width=35%><html:text maxlength="40" size="40" readonly="<%=read%>" title="keyword" property="searchName" styleId="searchName" value="<%
=searchValue%>" />
</td>
<td width=15% align=left>
<html:submit title="Search" value="Search" />
</td>
</tr>
</table>
</html:form>
</code>