Clear Text Field when multi-choice radio button deselected

Forms SharePoint Online
1

Hi.
I designed an internal form for Social Media post request. New form opens a form with basic fields and when user selects a social media platform button (a multi-choice radio buttons in a row) a new multi-line text field shows up for the user to type the content they want posted.
I have this working, the only issue is, when user changes their mind and unticks a chosen platform.
I am struggling to clear the filed as using 'Switch' in my current code won't work.
I need to clear the filed when unselected, otherwise the text field is still saved to my Sharepoint list.

I not sure how. I am new to this and working with multi choice values in still a bit unclear to me...
Many many thanks in advance.

My code is as such:

fd.spRendered(function() {
    
        $('.linkedinGrid').hide();
        $('.facebookGrid').hide();
        $('.instaGrid').hide();
        $('.websiteGrid').hide();
        $('.twitterGrid').hide();

    function clearform(){
        if (fd.formType == 'New'){
        fd.clear();
        }
    }
clearform();

    function ShowPlatfuss() {
    fd.field('Platform').$on('change', function (props) {
        $('.linkedinGrid').hide();
        $('.facebookGrid').hide();
        $('.websiteGrid').hide();
        $('.instaGrid').hide();
        $('.twitterGrid').hide();
        
        for (var i = 0; i < props.length; i++) {
            //show fields if the option is selected
            switch (props[i]) {
                case 'LinkedIn':
                    $('.linkedinGrid').show();
                    $(fd.field('LinkedIn').$parent.$el).show();
                    break;

                case 'Facebook':
                    $('.facebookGrid').show();
                    $(fd.field('Facebook').$parent.$el).show();
                    break;

                case 'Website':
                    $('.websiteGrid').show();
                    $(fd.field('Website').$parent.$el).show();
                    break;
                
                case 'Instagram':
                    $('.instaGrid').show();
                    $(fd.field('Instagram').$parent.$el).show();
                    break;
                
                case 'Twitter':
                    $('.twitterGrid').show();
                    $(fd.field('Twitter').$parent.$el).show();
                    break;
                }
            }   
        });
    }
    //hide/show button on form load
    ShowPlatfuss();

    //hide/show button when the user changes the field
    fd.field('Platform').$on('change', ShowPlatfuss);

});
2

Hello @HypnoToad,

You can update the code as shown in the example below to show/hide fields depending on the value of a Multiple Choice field and clear it if the user unselects options.

fd.field('MultiChoiceField').$on('change', function(value) {
    if (value.includes('Choice 1')) {
        fd.field('Field1').hidden = false;
    } else {
        fd.field('Field1').hidden = true;
        fd.field('Field1').clear();
    }
    if (value.includes('Choice 2')) {
        fd.field('Field2').hidden = false;
    } else {
        fd.field('Field2').hidden = true;
        fd.field('Field2').clear();
    }
});
3

This has worked like a charm.
Thank you! Margarita, you are Plumsail's MVP!! The support you guys provide is absolutely A++

1 Like