Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

How to send Form data to Servlets through Ajax

Avatar

Level 4

Hi , 

 

I  am trying to send form data to servlets (path based servlet ) using ajax. Here I have written the code but it's not working. When I submit the form nothing is happening just it refreshes the page. And I don't see any form data in servlet path.  Any idea how to resolve this ??

 

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.form.Button"
type="${button.type}"
id="${button.id}"
onclick="doCall()"
class="cmp-form-button"
name="${button.name}"
value="${button.value}">${button.title}</button>
<script>
function doCall() {
var details = {"firstname": $("#firstname").val()};

var userJson = JSON.stringify(details);
alert(userJson);
console.log(userJson);

var url = "/bin/form";

$.ajax({
url: url,
type: "POST",
data: userJson,
contentType: "application/json",
error: function(message) {
console.log(message);
},
success: function(data) {
console.log(data);
}
});
}
</script>

  

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Tessa_learner1, it looks that in your code you are not stopping the default submit behavior, and your data are most likely sent do endpoint pointed by action attribute of your form.

You can try below modification. I've tested it locally and it was working fine - data have been submitted without page reload to endpoint configured in JavaScript.

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.form.Button"
        type="${button.type}"
        id="${button.id}"
        class="cmp-form-button"
        name="${button.name}"
        value="${button.value}">${button.title}</button>
<script>
$(document).ready(function() {
    $(".cmp-form-button").click(function(e){
        e.preventDefault();
    
        var details = {"firstname": $("#firstname").val()};
    
        var userJson = JSON.stringify(details);
        alert(userJson);
        console.log(userJson);
    
        var url = "/bin/form";
    
        $.ajax({
            url: url,
            type: "POST",
            data: userJson,
            contentType: "application/json",
            error: function(message) {
                console.log(message);
            },
            success: function(data) {
                console.log(data);
            }
        });
    }); 
});
 </script>

Here is also topic that covers similar problem: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/servlet-post-request-using...

View solution in original post

0 Replies

Avatar

Correct answer by
Community Advisor

Hi @Tessa_learner1, it looks that in your code you are not stopping the default submit behavior, and your data are most likely sent do endpoint pointed by action attribute of your form.

You can try below modification. I've tested it locally and it was working fine - data have been submitted without page reload to endpoint configured in JavaScript.

<button data-sly-use.button="com.adobe.cq.wcm.core.components.models.form.Button"
        type="${button.type}"
        id="${button.id}"
        class="cmp-form-button"
        name="${button.name}"
        value="${button.value}">${button.title}</button>
<script>
$(document).ready(function() {
    $(".cmp-form-button").click(function(e){
        e.preventDefault();
    
        var details = {"firstname": $("#firstname").val()};
    
        var userJson = JSON.stringify(details);
        alert(userJson);
        console.log(userJson);
    
        var url = "/bin/form";
    
        $.ajax({
            url: url,
            type: "POST",
            data: userJson,
            contentType: "application/json",
            error: function(message) {
                console.log(message);
            },
            success: function(data) {
                console.log(data);
            }
        });
    }); 
});
 </script>

Here is also topic that covers similar problem: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/servlet-post-request-using...

Avatar

Community Advisor

Hi @Tessa_learner1 ,

 

Are you getting any console error, or error in logs? Are you seeing either of the console log being printed?

 

Also, have you tried debugging your servlet by putting debugger point and see if the invocation is going inside servlet. May be the invocation is going to some other servlet because of some error. Nevertheless resource type based servlets are preferable and safe.

Avatar

Community Advisor

Check in /system/console/servletresolver if your servlet is getting resolved.

 

Or put some logs here.