Results 1 to 4 of 4
  1. #1
    aruna.hcu is offline Member
    Join Date
    Dec 2009
    Posts
    24
    Rep Power
    0

    Default Show/Hide Textfields in Struts 2 form

    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

  2. #2
    travishein's Avatar
    travishein is offline Senior Member
    Join Date
    Sep 2009
    Location
    Canada
    Posts
    684
    Rep Power
    6

    Default

    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.

  3. #3
    aruna.hcu is offline Member
    Join Date
    Dec 2009
    Posts
    24
    Rep Power
    0

    Default

    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:
    Java Code:
    <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:

    Java Code:
    <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>

  4. #4
    aruna.hcu is offline Member
    Join Date
    Dec 2009
    Posts
    24
    Rep Power
    0

    Default

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

    Thanks,
    Aruna

Similar Threads

  1. Cross-Browser Issue with show/hide divs
    By jmchaffie in forum New To Java
    Replies: 3
    Last Post: 03-10-2011, 09:41 AM
  2. Show/Hide Label with JToggleButton
    By ntagrafix in forum AWT / Swing
    Replies: 4
    Last Post: 11-04-2009, 02:19 AM
  3. Resize shell on show/hide controls.
    By spacetoha in forum SWT / JFace
    Replies: 1
    Last Post: 03-24-2009, 12:20 PM
  4. Form validation in struts
    By rekha in forum Web Frameworks
    Replies: 2
    Last Post: 03-19-2009, 08:55 AM
  5. enctype=multipart/form-data with form data in struts
    By vk_satheesh in forum New To Java
    Replies: 0
    Last Post: 09-19-2008, 12:48 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •