Core Form Container -Reading (displaying) input field values in next page(not refreshing the page).

[georhe6]

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

[Madhur-Madan · Accepted solution]

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:

1. Write client-side JavaScript to intercept the form submission event and handle it asynchronously. You can use JavaScript libraries like jQuery or vanilla JavaScript to achieve this. Prevent the default form submission behavior and instead use AJAX to submit the form data to the server.
2. To display the initial input fields with the exact values the user entered earlier, you'll need to persist the input values in the browser's session storage or local storage. When the page loads or the form is re-rendered, retrieve the stored values from storage and populate the input fields accordingly.
3. Once the form is submitted successfully, use JavaScript to dynamically display the next section based on the input values provided by the user. This can involve hiding the form section and revealing the result section. You can use CSS classes to toggle visibility or manipulate the DOM directly using JavaScript.

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&param2=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

[georhe6]

Thanks Madhur