Basically we work with Portlet Application development and need to submit form and display the data in JPS page or need to store into database.

In this blog I only illustrate simply submit the form data using ajax to portlet action methods and then display submitted data in JSP page.

Please follow below steps to make aui:form with ajax submittion.

Step 1: Create aui:form

<aui:form id="updatePatientFormId" name="updatePatientFormId"  method="post" >
     <aui:input label="First Name" fieldParam="fname" value="" name="fname" type="text" > </aui:input>
     <aui:input label="Last Name" name="lname" value="" fieldParam="lname" type="text" />
      <aui:button type="button" cssClass="btn" onClick='<%=renderResponse.getNamespace()+"updatePatientForm();"%>'  value="Save" ></aui:button>
</aui:form>

Step 2: Create actionURL

<portlet:actionURL var="updatePatient" name="updatePatient"/>

Step 3: Create updatePatientForm() function

<aui:script>
    Liferay.provide(window,'<portlet:namespace />updatePatientForm',function() {
        var fname=document.<portlet:namespace />updatePatientFormId.<portlet:namespace />fname.value;
        var lname=document.<portlet:namespace />updatePatientFormId.<portlet:namespace />lname.value;

     var A = AUI();
     var url = '<%=updatePatient.toString()%>';
     A.io.request(
     url,
     {
      //data to be sent to server
     data: {
     <portlet:namespace />fname: fname,
     <portlet:namespace />lname: lname,

     },
     dataType: 'text',
     on: {
     failure: function() {
      },
     success: function(obj) {
     var instance = this;
     //JSON Data coming back from Server
     var message = instance.get('responseData');
      if (message == 'true') {

      }
       else {
    alert(message);
           }
        }
      }
   }
  ); //END of io Request
  },
  ['aui-io']
); //End of Provide 
</aui:script>

Step 4: Create action methon in action class

public void updatePatient(ActionRequest actionRequest,ActionResponse actionResponse) throws IOException 
{       boolean message=true;
        try {
    HttpServletRequest realRequest = PortalUtil.getHttpServletRequest(actionRequest);
    HttpServletRequest originalRequest = PortalUtil.getOriginalServletRequest(realRequest);
    String fname=ParamUtil.getString(originalRequest,actionResponse.getNamespace()+"fname");
    String lname=ParamUtil.getString(originalRequest,actionResponse.getNamespace()+"lname");
    } catch (NumberFormatException e) {
        // TODO Auto-generated catch block
        message=false;

    } catch (PortalException e) {
        message=false;
        // TODO Auto-generated catch block

    } catch (SystemException e) {
        message=false;
        // TODO Auto-generated catch block

    } catch (ParseException e) {
        // TODO Auto-generated catch block
        message=false;
    }
    addProcessActionSuccessMessage=false;
    HttpServletResponse httpResp = PortalUtil.getHttpServletResponse(actionResponse);
    httpResp.setContentType("text");
    httpResp.getWriter().print(message);
    httpResp.flushBuffer();
}

Thank you.