Redirecting to a Specific Page in a Multi-Page Form Using JavaScript Button

Introduction

This article demonstrates how to configure redirection in Joget. This includes a dynamic button inside a form grid that redirects users to a specific page in a multi-page form. Since Joget does not provide a built-in mechanism to navigate between form pages programmatically, this can be achieved using JavaScript to trigger the page navigation buttons.

How does it work?

The solution uses a Custom HTML element and JavaScript to generate a redirect button dynamically based on user input. When the generated button is clicked, a JavaScript function triggers the corresponding page navigation button in the multi-page form.

1. The form setups are as follows:
   • Child Form - as the source of the Form Grid
   • FG Form - holds the form grid
   • Main Form - holds the multi-page form
2. First, in the child form, add the following form elements:
   • A Text Field for the page number input, for example, Redirect Page No.
   • A Text Field to store the generated link, for example, Link Result. Ensure that “Sanitize Input” is disabled for this field.
   • A Custom HTML element to hold the JavaScript logic.
     
3. Insert the following script into the Custom HTML element:
   

   <script>
   // Define redirectAndClick function in the global scope
   function redirectAndClick(pageNo) {
       var button = $('button[rel="' + pageNo + '"]');
       button.trigger('click');
   }
   
   $(document).ready(function () {
       // Attach input event listener to element with ID "redirectPageNo"
       $("#redirectPageNo").on('input', function () {
           setPageRedirection($(this));
       });
   
       // Function to generate the redirect link
       function setPageRedirection($element) {
           var pageNo = $element.is("input") ? $element.val() : $element.text();
   
           if (pageNo !== null) {
               var finalLink = '<a class="btn btn-warning" onclick="redirectAndClick(' + pageNo + ')" >Redirect to page ' + pageNo + '</a>';
               $(linkResult).val(finalLink); // Set generated link into the field
           } else {
               console.log("ERROR - NO INPUT");
           }
       }
   });
   </script>

   
4. Next, in the form that holds the multi-page form, add a Custom HTML element and insert the following global JavaScript function to ensure it is accessible when the link is clicked:

<script>
// Define redirectAndClick function in the global scope
function redirectAndClick(pageNo) {
    var button = $('button[rel="' + pageNo + '"]');
    button.trigger('click');
}
</script>

This function locates the page navigation button using the rel attribute and triggers a click event to navigate to the specified page.

Expected outcome

Users can enter a page number in the form grid, which dynamically generates a clickable redirect button. When the button is clicked, the multi-page form automatically navigates to the specified page number without requiring manual navigation through the form pages.

Download sample app