Adobe Experience Manager Sites & More

sesmic · 9/10/23

Hi,
I've created a form on page with some input fields & submit button. It's more like HTML form. There's a servlet that accepts the data in Json format & processes it in backend. Now, I want to create a service/model that will get invoke when submit button is clicked & it should take the values from each input field available on page convert it to json & post to servlet.
I'm able to achieve this by JavaScript but business demands the same via backend.

Can anyone please help me accomplish this by sharing any reference or code snippets that I could leverage.
Thanks,
sesmic

aanchal-sikka · 9/10/23

Hello @sesmic

Servlet cannot pull data from an HTML form. It has to be submitted to it.

Please refer to https://www.tutorialspoint.com/How-to-submit-an-HTML-form-using-JavaScript

If the values being entered are injected properly into <input> fields of a form, we need not compile all information. It will submitted via form.submit().
A servlet will be called and values will be available in Request params of the Servlet.

Aanchal Sikka

View solution in original post

aanchal-sikka · 9/10/23

Hello @sesmic

Servlet cannot pull data from an HTML form. It has to be submitted to it.

Please refer to https://www.tutorialspoint.com/How-to-submit-an-HTML-form-using-JavaScript

If the values being entered are injected properly into <input> fields of a form, we need not compile all information. It will submitted via form.submit().
A servlet will be called and values will be available in Request params of the Servlet.

Aanchal Sikka

Harwinder-singh · 9/10/23

@sesmic , Can you not call a servlet on submit of the form and let the servlet handle conversion of the fields into a JSON equivalent and any other input data processing(ideally delegated to a Service class) thereon?

You can check out this article on how Sling servlets work in general.

https://sling.apache.org/documentation/the-sling-engine/servlets.html

https://medium.com/@toimrank/aem-sling-servlet-ca9e5926a384

sesmic · 9/11/23

Yes, that's a good idea @Harwinder-singh! But still I would need some reference or code snippet to achieve the same like how to fetch the field data & parse into JSON.
I will look into this approach.

A_H_M_Imrul · 9/11/23

Hello @sesmic,

To add with @aanchal-sikka and @Harwinder-singh, not sure if you have any JS library (jquery or angular) in-place or not. If so you can hand over the responsibility of managing the submission to the JS library. Following is jquery example:

<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
</head>
<body>
    <form id="myForm" action="YourServletURL" method="post">
        <input type="text" name="param1" placeholder="Parameter 1">
        <input type="text" name="param2" placeholder="Parameter 2">
        <button type="submit">Submit</button>
    </form>

    <div id="response"></div>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- jQuery Script for Form Submission -->
    <script>
        $(document).ready(function() {
            $("#myForm").submit(function(event) {
                event.preventDefault(); // Prevent the default form submission

                var formData = $(this).serialize(); // Serialize form data

                $.ajax({
                    type: "POST",
                    url: $(this).attr("action"), // Servlet URL
                    data: formData,
                    success: function(response) {
                        $("#response").html(response); // Display the response from the servlet
                    },
                    error: function() {
                        $("#response").html("An error occurred.");
                    }
                });
            });
        });
    </script>
</body>
</html>

let me know if that goes with your expectation or not.

Thanks

sesmic · 9/11/23

Hi @A_H_M_Imrul ,
Thanks for the response. The solution you shared is great & works but as I mentioned there's demand for some backend solution. That's I'm looking for something like service to be specific.
Thanks again

A_H_M_Imrul · 9/11/23

Hello @sesmic,

Thanks for the clarification.

If I quote your ask "I want to create a service/model that will get invoke when submit button is clicked & it should take the values from each input field available on page convert it to json & post to servlet"

As you can see the invocation of back-end service (Servlet is this case) is actually happening here (the example I shared). The event of button-click needs to be bind from front-end (no matter what the business is).

So now what exact logic that you want to implement within the service/model? If you can provide little more insight, probably I will be able to help.

Thanks

Adobe Experience Manager Sites & More

How to invoke a service on submit button to post the input data in json format to servlet?

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe