Creating Dependent Fields Using InfoLobby Script Fields

In this tutorial, we'll use jQuery within an InfoLobby script field to dynamically show or hide a field based on the selection in another field.

Step 1: Retrieve Field Elements

Firstly, ensure you can access the required fields using their field IDs. In InfoLobby forms, field IDs are used to uniquely identify form elements.

const selectElement = $('[field-id="source"]');
const smField = $('[field-id="social-media-name"]');

Step 2: Hide the Dependent Field Initially

Initially, hide the dependent field (social-media-name) using jQuery's hide() method.

smField.hide();

Step 3: Watch for Changes in the Source Field

Set up an event listener (on() method in jQuery) to monitor changes in the source field (source). When its value changes, check the new value and adjust the visibility of the dependent field accordingly.

selectElement.on("change", function() {
    const selectedValue = $(this).val();
    if (selectedValue === 'social media') {
        smField.show();
    } else {
        smField.hide();
    }
});

Full Script Example:

return """
<script>
    $(document).ready(function() {
        const scriptElement = $('[field-id="dependednt-field"]');
        if (scriptElement.length) {
            scriptElement.hide();
        }

        const selectElement = $('[field-id="source"]');
        const smfe = $('[field-id="social-media-name"]');
        
        if (selectElement.length && smfe.length) {
            smfe.hide();
            
            selectElement.on("change", 'select', function() {
                const selectedValue = $(this).val();            
                // Example of showing or hiding smfe based on selected value
                if (selectedValue === 'Social Media') {
                    smfe.show();
                } else {
                    smfe.hide();
                }
            });
        }
    });
</script>
""";

Summary

This script uses jQuery to dynamically show or hide the social-media-name field based on the selection made in the source field. Initially, the social-media-name field is hidden. When the user selects "social media" in the source field, the social-media-name field becomes visible; otherwise, it remains hidden.

By following these steps, you can effectively create dependent fields in InfoLobby forms using script fields and jQuery, enhancing form interactivity based on user inputs.

Published: June 18, 2024
by Thaha W