Show/Hide Textfields in Struts 2 form

[aruna.hcu]

Hi,

In a jsp , I have a form with theme="qxhtml". In the form I have a dropdown, I need some of the textfields to be shown only when its respective dropdown menuitem is selected.

Thanks,
Aruna

[travishein]

how about some onChange() javascript on the select box, which could invoke a javascript function that modifies the display style property of the text fields.

i.e. this can be done with JavaScript, HTML outside of struts. When you get it working, surely you can embed the onClick() action into the struts select field tag.

[aruna.hcu]

Surely I am able to invoke onChange function on select tag, but the div is not hiding in the struts form unless the theme="simple". But if I use simple theme the layout changes.

The code below would explain the things:

<table width="100%">
       <!-- spacer -->       
       <s:bean name="java.util.HashMap" id="qTableLayout">
            <s:param name="tablecolspan" value="%{8}" />
       </s:bean> 
       <s:form action="AddPub"  method="POST"  enctype="multipart/form-data" theme="qxhtml">	
        <tr>
		  <td valign="top">			  	 
					    					   	
				   <s:hidden name="userid" label="User Id" theme="qxhtml"/>		    
					 	
			       <s:textfield theme="qxhtml" name="authors" size="60" maxlength="255"  label="Authors" cssStyle="margin-top:20px;">
					       <s:param name="labelcolspan" value="%{3}" /> 
                           <s:param name="inputcolspan" value="%{5}" /> 
                   </s:textfield>
                        
				 	<s:textfield theme="qxhtml" name="title" size="60" maxlength="255" label="Title" cssStyle="margin-top:10px;">
						    <s:param name="labelcolspan" value="%{3}" /> 
                            <s:param name="inputcolspan" value="%{5}" /> 
                    </s:textfield>	
                        
                   <s:select theme="qxhtml" label="Type" name="pubtype" id="pubtype" headerKey="1"
 headerValue="Select Type"  onchange="showdiv()"
list="#{'Journal':'Journal','Proceedings':'Proceedings', 'Preprint':'Preprint','Report':'Report', 
'Thesis':'Thesis'}"
                              cssStyle="margin-top:10px;" >
						    <s:param name="labelcolspan" value="%{3}" /> 
                            <s:param name="inputcolspan" value="%{5}" /> 
                  </s:select>                   
             </td>
          </tr>
          
          <tr>
             <td> 
                <s:div id="journaldiv" name="journaldiv" class="journaldiv" >      
                      
                   <s:textfield name="journalname" id="journalname"  size="50" maxlength="128" label="Name of Journal" cssStyle="margin-top:10px;">
					        <s:param name="labelcolspan" value="%{3}" /> 
                          <s:param name="inputcolspan" value="%{5}" /> 
                  </s:textfield>     
                  <s:textfield   name="journalvol" size="12" maxlength="8" label="Volume/Issue" cssStyle="margin-top:10px;">
					       <s:param name="labelcolspan" value="%{3}" /> 
                           <s:param name="inputcolspan" value="%{5}" /> 
                  </s:textfield>                        
                  <s:textfield  name="journalpage" size="12" maxlength="15" label="Page/Article #" cssStyle="margin-top:10px;">
					       <s:param name="labelcolspan" value="%{3}" /> 
                           <s:param name="inputcolspan" value="%{5}" /> 
                  </s:textfield> 
                                                          
               </s:div>            
                 
            </td>
        </tr>
</table>

The body onload calls hidediv function, but the div doesnt hide unless I give the textfields theme="simple", which ruins the layout. In the above code depending on the "pubtype" selection the respective div should show itself. onchange triggers the showdiv function, but show/hide is not working.
Below is my show div function:

<script type="text/javascript">
function showdiv(){
	alert("enter");
	select = document.getElementById("pubtype");
	alert("selection  "+select.options[select.options.selectedIndex].value);
	if(select.options[select.options.selectedIndex].value=='Journal'){

		document.getElementById('journaldiv').style.visibility = 'visible'; 		
		
	}
}
</script>

[aruna.hcu]

I am stuck at this point. Any help would be appreciated.

Thanks,
Aruna