Ajax Call Country Region

<%@page import="javax.portlet.ActionResponse"%>
<%@ include file="/html/reg/init.jsp" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@page import="com.liferay.portal.model.Country"%>
<%@page import="com.liferay.portal.service.CountryServiceUtil"%>

<portlet:defineObjects />

<%
  PortletURL formURL=renderResponse.createActionURL();
  formURL.setParameter(ActionRequest.ACTION_NAME, RegConstants.ACTION_FORM );
 
            /*Edit regestration form */
 
  REGForm regForm = new REGFormImpl();
  long regId =ParamUtil.getLong(request, "bookId");
 
  if (regId > 01){
   regForm = REGFormLocalServiceUtil.fetchREGForm(regId);
  }
%>


<aui:form name="fm" method="POST" action="<%=formURL.toString()%>">
<%-- <aui:input name="redirectURL" type="hidden"
    value="<%=renderResponse.createRenderURL().toString()%>"/> --%>
   
  <aui:input name="regId" type="hidden" value="<%=regForm.getRegId() %>"/>
 
  <aui:input name="userName" label="User Name" value="<%=regForm.getUserName()%>">
          <aui:validator name="required"/>      
   </aui:input>
 
   <aui:input name="email" label="Email Id" value="<%=regForm.getEmail() %>">
         <aui:validator name="required"/>
         <aui:validator name="email"/>
   </aui:input>
 
   <aui:input name="dob" label="Date Of Birth" id="dob"  value="<%=regForm.getDob()%>" >
          <aui:validator name="date"/>
   </aui:input>      
   <aui:input name="contact" label="Contact No" value="<%=regForm.getContact() %>">
             <aui:validator name="number"/>
             <aui:validator name="minLength">10</aui:validator>
              <aui:validator name="maxLength">10</aui:validator>
   </aui:input>
   <aui:select name="countryId" id="countryId" label="country"
                onChange="javascript:listRegions(this)"/>
   <aui:select  name="regionId" id="regionId" label="City" />
     

 
  <%--   <aui:input type="file" name="uploadResume" size="75"/>  --%>
 
   <aui:button type="submit" value="Submit"/>
</aui:form>

 <aui:script>
     Liferay.Util.focusFormField(
          document.<portlet:namespace/>fm.<portlet:namespace/>userName);
         
 </aui:script>
 <aui:script>
AUI().ready(function(A){
var frm = document.<portlet:namespace/>fm;
var countries = frm.<portlet:namespace/>countryId;

Liferay.Service(
'/country/get-countries',
{ active: true },
function(obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var name = obj[key].name;
var countryId = obj[key].countryId;
countries.options[key] = new Option(name,countryId);
}
}
}
);
});

function listRegions(country) {
var frm = document.<portlet:namespace/>fm;
var regions = frm.<portlet:namespace/>regionId;

var _countryId = country.value;

regions.disabled = (_countryId <= 0);

if (_countryId <= 0) {
regions.selectedIndex = 0;
} else {
// calling regions of this country
var payload = {
countryId: _countryId,
active: true
};

Liferay.Service.Portal.Region.getRegions(payload,
function(data) {

regions.options.length = data.length;
for (var i=0; i<(data.length-1); i++) {
var rgn = data[i];
regions.options[i] =
new Option(rgn.name, rgn.regionId);
}

}
);
}
}
</aui:script>


<%
    PortletURL listRegsURL=renderResponse.createRenderURL();
    listRegsURL.setParameter("jspPage","/html/reg/list.jsp");
%>
   &nbsp;|&nbsp;
   <a href="<%= listRegsURL.toString()%>">Show All Register Detail &raquo;</a>