How to use struts2 submit tag as button without submitting the form?

ajax, java, javascript, jsp, struts2

Solution

If you are using `s:submit` tag the rendered `HTML` output is either `input` or `button` tag but the type is `submit` except for the `image` type. You can use the code to execute javascript onclick event that doesn't submit the form.

<s:submit type="button" onclick="return false;"/>

Problem

I am using Struts2 framework in my application, I have one button on my JSP page. That is ``` <s:submit type="button" name="btnSave" /> ``` Now, I want this button to behave as normal HTML button type should not submit the form and execute the Scripting function on `onclick` event. That function submit the form using Ajax. But what happens is Struts2 convert it to ``` <input type="submit" id="add_btnSave" name="btnSave" value="Save"/> ``` And my form is submitted. 1) If I use the HTML button tag it will mess the GUI. As theme of my form is Ajax. This is a `head` tag with script ``` <head> <s:head theme="ajax"/> <script type="text/javascript"> $("btnSave").click(function(){ alert("aaa"); $.ajax({ url: type:"POST", dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){ alert('Error ' + textStatus); alert(errorThrown); alert(XMLHttpRequest.responseText); }, success: function(){ alert('SUCCESS'); } }); }); </script> </head> ``` My `body` tag is as followers : ``` <body> <table border="1" width="80%" align="center"> <tr> <td width="100%"> <s:tabbedPanel id="EmpDetail" useSelectedTabCookie="true"> <s:div id="one" label="Emp Reg." theme="ajax" tabindex="0" labelposition="top"> <center> <s:form name="frmEmpReg" namespace="/" method="post"> EMPLOYEE REGISTRATIOM TAB<br> <s:actionmessage /> <input type="hidden" name="empbean.id" value="<s:property value="empbean.id"/>"/> <s:textfield label="Employee First Name" name="empbean.firstName"></s:textfield> <s:textfield label="Employee Middle Name" name="empbean.middleName"></s:textfield> <s:textfield label="Employee Last Name" name="empbean.lastName"></s:textfield> <s:textfield label="Address" name="empbean.address"></s:textfield> <s:textfield label="State" name="empbean.state"></s:textfield> <s:textfield label="Employee Designation" name="empbean.designation"></s:textfield> <s:submit name="btnSave" type="submit" value="Save" align="center"/> </s:form> </center> </s:div> <s:div> .. .. Other Tabs </s:div> </s:tabbedPanel> </td> </tr> </table> </body> ``` any one have any idea of handling it with Struts2 then please help. Your help will be really appreciated.

Original source