creating button using <s:button> - similar to the CSS based button

[Shashank Rudra]

Hi Guys

I am having a JSP with simple form.

<form name="tbLogInForm" action = '' method="post" onKeyDown="if (window.event.keyCode==13) validateLogIn();" >

<div style='position:absolute; top:180px; left:320px; padding-top:20px; padding-left:50px;'>
		
	<div  class='ezrDivTable'>
	
		<div class='ezrDivTRHigher'>
			<div class='loginLabel'>
				User ID:
			</div>	
			
			<div class='ezrDivTD'>
				<input type='text' class='loginInpFld' size='18' maxlength='10' name="tbUserID" id='tbUserId' tabindex='1' />				
			</div>	
			
		</div>
		
		<div class='ezrDivTRHigher'>
			<div class='loginLabel'>
				Password:
			</div>	
			
			<div class='ezrDivTD'>	
				<input type='password' class='loginInpFld' size='18' maxlength='10' name="tbPassword" tabindex='2' /> 				
			</div>
		</div>
		
		<div class='ezrDivTRHigher'>
			<div class='ezrDivTD'>
				<a  class="button"    rel="nofollow">
		  			<span>Login</span>
				</a>				
			</div>		
		</div>
		
		<div class='ezrDivTR'>
			<div class='ezrDivTD'>
				<% if (msg != null) {%>
				  <span style='font-family:arial,sans-serif; font-size:12px; font-weight:bold; color:#990099;'> <%=msg%> </span>
	   			<%}%>
			</div>
		</div>
				
	</div>		
	
</div>

</form>

Here these things are to noted
1. using <a..><span> to create a button using CSS with sliding-door approach. The image can be seen in the attachment.
2. submitting the form on press of Enter key in the form area - the code in the form tag
3. submitting the form after doing a client side check for valid inputs

I want to convert this form with struts tag based form i.e. <s:form..>. However I am facing some problems in
1. converting the button HTML with <s:submit...> tags to create button
2. apply the enter key event capture and submit for there after. (onKeyDown is not a valid attribute for <s:form -tag)
3. can we still do the JavaScript validation

I am not able to figure out, as how to achieve these results. Any help in this regard will be highly appreciated. Thanks in advance guys. >

[David Newton]

Did you try using "onkeydown"? The CamelCase attribute names aren't really the norm anymore.

[Shashank Rudra]

thanks will give it a try. what about converting <span> based button to <s:submit> and retaining the CSS based display.
and other stuff -

Also here is what I have changed from form to s:form - but on press of Enter key Javascript method in not being called.

<!--<form name="tbLogInForm" action = '' method="post" onKeyDown="if (window.event.keyCode==13) validateLogIn();" >-->
<s:form name="tbLogInForm" action='login' method="post" onkeydown="if(window.event.keyCode==13) validateLogIn();" >

what I need to do differently.

any input TIA

[David Newton]

This is a reasonably complex HTML layout--you're either going to want to create your own theme or just continue doing the form's internals by hand. You might need to tweak the form element names to conform to what S2 expects, but in general the form element names are just the names of the corresponding action properties.

[Shashank Rudra]

great, wat you said about the naming standards is correct (I cross checked with the view source). So following the same here is the new form tag

<!--<form name="login" action = '' method="post" onKeyDown="if (window.event.keyCode==13) validateLogIn();" >-->
<s:form action='login' method="post" onkeydown="if(window.event.keyCode==13) validateLogIn();" >

. But still not able to get the desired result. Thanks pal for your efforts in helping me out.


Actually wat is happening here is (when I saw the view page source) The form tag is being rendered as

<form id="login" name="login" onsubmit="return true;" action="/EzRithmStrut/login.action" method="post">

As apparent the js code is being scrapped. How to retain that piece in the resulting form Tag.

[David Newton]

Looking in the form-common template it does, indeed, appear to ignore the "onkeydown" attribute (don't know why).

Which version of S2 are you using? At some point the ability to use dynamic tag attributes was added, but I don't recall when that was (or if it's a taglib-wide setting).

[Shashank Rudra]

I am using Tomcat5.5 i.e. JSP2.0. Though I am not sure - if this is what you asked for.

[David Newton]

No, I asked what version of S2 (Struts 2) you're using.

[Shashank Rudra]

sorry for being in slumber so long - but was actually not able to post it due to network latency on my side.. I am using Struts 2.0.6 here.

[David Newton]

Oh; that's pretty old--the dynamic attributes was definitely added well after that version.

[Shashank Rudra]

oh ok. thanks ne ways.