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
Solved! Go to Solution.
Views
Replies
Total Likes
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
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
@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
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.
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
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
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