Retrieving Values from a Subform

Introduction

Retrieve values from a subform and set them in a parent form field using a simple app example.

How does it work?

1. Subform Design
   
   
   
   Ensure you have the Form ID of your subform, as it will be necessary for your custom HTML.
   
2. Parent Form: Design your parent form to include the necessary fields and a placeholder for the subform.
   
   
   
3. To retrieve values from the subform and set them in the parent form, add Custom HTML to the Parent Form and insert the following JavaScript code:
   

   <script>
       $(document).ready(function(){
           // Get the ID of the subform field
           selectmain = $(FormUtil.getField("field1")); 
           selectmain.on("change", function(){
               setTimeout(function(){
                   // Get values from the subform fields
                   var my_name = $("#field2_subform_name");
                   var my_country = $("#field2_subform_country");
                   var my_date = $("#field2_subform_date");
   
                   // Get fields in the parent form
                   var field1 = FormUtil.getField("field3");
                   var field2 = FormUtil.getField("field4");
   
                   // Set parent form fields to values from the subform
                   $(field1).val(my_name.val());
                   $(field2).val(my_country.val());
               }, 100);
           });
       });
   </script>

   The above code will dynamically update the parent form fields with the values retrieved from the subform when the subform fields change.

Expected outcome

This is the result of the above code:

Download sample app