Not able to post form in Adode CQ5

Question

I am a newbie in AdobeCQ5. I am facing some trouble in posting form. Here is my Structure -

/apps/<myproject>/components/mytestcomponent

mytestcomopnent.jsp has following code -

<form id="myForm"  action="<%=resource.getPath()+".html" %>">
    <input type="text" id="t1" class="input-small" placeholder="Temprature F" />
    <input type="text" id="t2" class="input-small" placeholder="Temprature C" readonly/>
    <button type="button" id="cbtn" class="btn">Convert</button>
</form>

<script>
    $(document).ready(function() {
        $('#cbtn').click(function ()  {        
            var URL = $("#myForm").attr("action");   
            alert(URL); 
            var t1=$("#t1").val();
            var t2=$("#t2").val();
            $.ajax({
                url: URL,
                data:{'t1':t1},
                type:"post",
                success: function(data, status) {
                    $("#t2").val(data);
                },
                error: function( xhr, txtStat, errThrown ) {
                    alert("ajax  error! " + txtStat + ":::" + errThrown);
                }
            }); 
        }); 
    });    
</script>

This is giving my response code 200 (Success) but the output is not desired. My mycomponent.POST.jsp has following code -

<%
    // TODO add you code here
    String t1=request.getParameter("t1");
%>
<%= t1 %>

It gives the following output

  Content modified /content/imobile/en/jcr:content/social.html
  Status    
  200
  Message   
  OK
  Location     /content/imobile/en/_jcr_content/social.html
  Parent Location  /content/imobile/en/_jcr_content
  Path  
  /content/imobile/en/jcr:content/social.html
  Referer http://example.comt:4502/content/imobile/en.html
  ChangeLog 
 <pre></pre>
 Go Back
 Modified Resource
 Parent of Modified Resource

Please help to resolve this.

Answer 1

The JSP file handling the POST method for your component should be named POST.jsp rather than mycomponent.POST.jsp.

Please notice that if you intercept all POST requests to your component, you won't be able to edit it on the author instance using a dialog (as the dialog simply POSTs data to the component URL). To avoid it, consider using a custom selector (like form). Your form should look be declared like this:

<form id="myForm" action="${resource.path}.form.html">

and the script handling POST request should be called form.POST.jsp.

The second important thing is that you should use Java classes rather than JSP files to store business logic. In this case it means that the form.POST.jsp script can be replaced with a Sling servlet declared as follows:

@SlingServlet(
    resourceTypes="myproject/components/mytestcomponent",
    methods="POST",
    selectors="form")