I am using Core Form Container to build a simple form. Upon submission of the form, without reloading the page, the next section—essentially a result based on the initial input values—should appear. On the left side section, the initial input field should reappear with the exact values the user entered earlier. If the user needs to modify anything, they can do so and submit it here.
1)Aem as cloud service.
2)Core components form container.
3)Initial Input fields are -form button, form options, form text, and calendar
Thanks,
Geo
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
Hi @georhe6 ,
To achieve your requirement using Core Components Form Container, you'll need to use client-side scripting to handle form submission without reloading the page and to display the next section based on the input values. Here's a high-level overview of how you can implement this:
Here is a sample code if instead of storing the data in session storage you want to pass it as a param
<!-- HTML Structure -->
<div id="formSection">
<!-- Core Components Form Container with input fields -->
</div>
<script>
// JavaScript to handle form submission and redirection
$('#form').submit(function(event) {
event.preventDefault(); // Prevent default form submission
// AJAX request to submit form data
$.ajax({
url: '/submit-form-endpoint',
method: 'POST',
data: $(this).serialize(), // Serialize form data
success: function(response) {
// Redirect to result page with query parameters
window.location.href = '/result-page?param1=value1¶m2=value2';
},
error: function(xhr, status, error) {
// Handle errors
}
});
});
</script>
In this example, upon successful form submission, the user will be redirected to a new page (result-page) with query parameters containing the input values. On the result page, you can extract these query parameters and use them to display the result section.
On the result page (result-page), you would retrieve the input values from the query parameters and then display the result section accordingly. You can use JavaScript or server-side logic (depending on your preference and architecture) to handle this. Here's a basic example of how you might do this in Javascript:
<!-- HTML Structure of result-page -->
<div id="resultSection">
<!-- Display result section based on input values -->
</div>
<script>
// JavaScript to extract query parameters and display result section
const queryParams = new URLSearchParams(window.location.search);
const param1 = queryParams.get('param1');
const param2 = queryParams.get('param2');
// Use param1 and param2 to display the result section
</script>
Thanks,
Madhur
Hi @georhe6 ,
To achieve your requirement using Core Components Form Container, you'll need to use client-side scripting to handle form submission without reloading the page and to display the next section based on the input values. Here's a high-level overview of how you can implement this:
Here is a sample code if instead of storing the data in session storage you want to pass it as a param
<!-- HTML Structure -->
<div id="formSection">
<!-- Core Components Form Container with input fields -->
</div>
<script>
// JavaScript to handle form submission and redirection
$('#form').submit(function(event) {
event.preventDefault(); // Prevent default form submission
// AJAX request to submit form data
$.ajax({
url: '/submit-form-endpoint',
method: 'POST',
data: $(this).serialize(), // Serialize form data
success: function(response) {
// Redirect to result page with query parameters
window.location.href = '/result-page?param1=value1¶m2=value2';
},
error: function(xhr, status, error) {
// Handle errors
}
});
});
</script>
In this example, upon successful form submission, the user will be redirected to a new page (result-page) with query parameters containing the input values. On the result page, you can extract these query parameters and use them to display the result section.
On the result page (result-page), you would retrieve the input values from the query parameters and then display the result section accordingly. You can use JavaScript or server-side logic (depending on your preference and architecture) to handle this. Here's a basic example of how you might do this in Javascript:
<!-- HTML Structure of result-page -->
<div id="resultSection">
<!-- Display result section based on input values -->
</div>
<script>
// JavaScript to extract query parameters and display result section
const queryParams = new URLSearchParams(window.location.search);
const param1 = queryParams.get('param1');
const param2 = queryParams.get('param2');
// Use param1 and param2 to display the result section
</script>
Thanks,
Madhur
Thanks Madhur
Views
Likes
Replies