Show Hide Section if the hidden field is True or False

 
1
0
-1

Hi all,

I have custom html where it check the total amount if the total is more than 1000(gtotalcur), it will put the value of  hidden field(adVisible2) to "True" or "False". Using this hidden field value i would like to show hide a section. If the value is "True" then show the section if false then hide the section.


I am able to get the value to the hidden field but the show hide section does not seem to be working even though the hidden field is "True"


Custom HTMl 

<script>
    $(document).ready(function () {
        console.log("DOM is ready");

        // Selectors
        var gtotalCur = $('#gtotalCur'); // Input field for total currency
        var adVisibleField = $('#adVisible2'); // Hidden field for 'adVisible'

        function toggleSection9() {
            // Parse value, accounting for commas
            var val = parseFloat(gtotalCur.val().replace(/,/g, '')) || 0;

            if (val > 10000) {
               adVisibleField.val("True"); // Set adVisible to true
                console.log("''adVisible' set to true");                         
            } else {
                 adVisibleField.val("False"); // Set adVisible to false
                console.log("''adVisible' set to false");
                        }
        }

        // Ensure initial setup
        toggleSection9();

        // Monitor changes in 'gtotalCur'
        gtotalCur.on('input change', function () {
            toggleSection9();
        });
    });
</script>

    CommentAdd your comment...

    1 answer

    1.  
      2
      1
      0

      Hi Hironori, you are code is correct but when you update a field value using jQuery, you need to trigger the change event for the form to recognize it and show the section.  Please refer the below changes you need to make. Hope this helps. 


      adVisibleField.val("False").trigger('change');
adVisibleField.val("True").trigger('change');


      1. hironori hasegawa

        Hi Varnaa,


        your changes you gave works on the main form. but if i create another form and load the main form using the subform the jQuery isn't triggered. any idea why?

      2. Varnaa

        I am not sure i fully understood the question, is the section that needs to be shown/hidden is inside the subform or the another main? Can you please provide more details along with screenshots so that I can try to replicate it on my end. Thank you

      3. hironori hasegawa

        I'm actually showing the form submitted so that it can be approved. In a event that total USD amount is more than USD10,000 the Approval Document section will appear but because I'm using Joget DX7 the section visibility control does not support relational operators i need to create custom jQuery to trigger true or false in a hidden value field. this works fine thanks to your changes mentioned earlier.


        Now when the user submit this form it needs a manager approval there for i created a form (Approval Form) and loaded the main form as a sub-form with in the newly created form. As you can see the sub-form does load all the information but only the hidden section does not appear.

        Which means the jQuery didn't trigger correct? Currently this is my issue.

        Thank you  in advance for your advice.

        (Main Form)

        (Approval Form)

      4. Varnaa

        Hi, I tried replicating the case but i wasn't able to replicate the issue. The section was triggered for me. Can you try checking the value of the hidden field by using a normal text field with same ID and see whether the value is properly set as "True"



        This is my custom script:

        <script>
  $(document).ready(function () {
    console.log("DOM is ready");
 
    // Selectors 
    var gtotalCur = $('#gtotalCur');
    var adVisibleField = $('#adVisible2');

    function toggleSection9() {
        var val = parseFloat(gtotalCur.val().replace(/,/g, '')) || 0;
        console.log("Current value:", val);

        if (val > 10000) {
            adVisibleField.val("True").trigger('change');
            console.log("adVisible set to true:", adVisibleField.val());
        } else {
            adVisibleField.val("False").trigger('change');
            console.log("adVisible set to false:", adVisibleField.val());
        }
    }

    toggleSection9();

    gtotalCur.on('input change', function () {
        toggleSection9();
    });
});
</script>



        and these are my console logs while loading the approval form:

        DOM is ready
Current value: 78588888
adVisible set to true: True



      5. hironori hasegawa

        Hi Varnaa,


        I have already tried put in a text field to see if the value is True or not. This works just fine but when i load this form(Form with the script) into a Subform then the custom script doesnt seem to work.

      6. Varnaa

        Yes when I load it as a subform the code seems to work fine for me. Please find the attached app. 
        APP_ajaxSelectBoxDemo-1-20241205125102.jwa

      7. hironori hasegawa

        thank you, I saw your demo app and it seem to be working.

        any idea why mine isn't? how can i debug?

      8. Varnaa

        It is indeed a mystery! However, you can try checking these potential culprits:

        1. Check for duplicate field IDs / Section IDs in your forms
        2. Look for any overlapping custom HTML/scripts
        3. Review your console logs for any javascript errors

        If these don't help, could you share a simplified version of your app? That would make it easier to debug the issue.

      9. hironori hasegawa

        As per your advice I'll check and see. Try to give you the simplified version to you by tomorrow. 

      10. hironori hasegawa

        Hi Varnaa,

        Sorry for the delay after checking i noticed that when user is entering the form the gtotalcur ID is as it is "gtotalCur" but when it goes into the approval. The ID of the field seem to have change "<input id="subform_RiskOrderApplication_grandtotalCur" name="subform_RiskOrderApplication_grandtotalCur" type="hidden" value="19,762.93" class="calFiel_6909244">" could this be ther reason why the section is not showing?

      11. hironori hasegawa

        Hi Varnaa,

        after checking the field ID and the workflow variable i think has some clash. there for i renamed the workflow variable and now it seem to be able to work.

        Thank you very much.

      12. Varnaa

        Hi Hironori, I'm glad to hear you've resolved your issue grinning face with smiling eyes 

        Regarding the ID change you mentioned earlier: It's standard behavior for subform field IDs to follow the format subform_subformID_fieldID when rendering a form within a subform. This formatting won't affect normal functionality. However, if you need to manipulate subform fields from the parent form, you'll need to use these updated ID formats to correctly target the fields within the subform.

      13. hironori hasegawa

        Hi Varnaa,

        Noted thank you for the tips.

      CommentAdd your comment...