Level 4

Solved

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

6 replies
3181 views
Translate

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

aanchal-sikkaAccepted solution

New Participant

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

A_H_M_Imrul

New Participant

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

Translate

sesmicAuthor

Level 4

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

Translate

A_H_M_Imrul

New Participant

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

Translate

Harwinder-singh

New Participant

@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

Translate

sesmicAuthor

Level 4

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.

Translate

aanchal-sikkaAccepted solution

New Participant

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.

Translate

Aanchal Sikka

Sign up

Login with SSO

Login to the community

Login with SSO