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
4

Hi @mnikitina I am using the above code, it does work but the fist time it does not show the field based on a selection. I have to uncheck and check again to display the field. Any suggestions?

$(fd.field('ChoiceTxt1').$parent.$el).hide();
$(fd.field('ChoiceTxt2').$parent.$el).hide();
$(fd.field('ChoiceTxt3').$parent.$el).hide();

//choice 1
fd.field('Select').$on('change', function(value) {
if (value.includes('Choice 1')) {
fd.field('ChoiceTxt1').hidden = false;
} else {
fd.field('ChoiceTxt1').hidden = true;
fd.field('ChoiceTxt1').clear();
}
if (value.includes('Choice 2')) {
fd.field('ChoiceTxt2').hidden = false;
} else {
fd.field('ChoiceTxt2').hidden = true;
fd.field('ChoiceTxt2').clear();
} if (value.includes('Choice 3')) {
fd.field('ChoiceTxt3').hidden = false;
} else {
fd.field('ChoiceTxt3').hidden = true;
fd.field('ChoiceTxt3').clear();
}
});

5

Hello @aseem,

Do you mean you want to show fields based on the selected value when the form is loaded?

If so, you need to create a function and call it on from load and when field value changes:

fd.spRendered(function() {

    function hideOrShowFields() {
       //your code here
    }

    // Calling hideOrShowFields when the field value changes
    fd.field('Select').$on('change',hideOrShowFields);

    // Calling hideOrShowFields on form loading
    hideOrShowFields();

});
6

Thanks @mnikitina I am trying this for display form but it is not working, not sure what I am doing wrong here:

fd.spRendered(function() {

function loc () {

    $(".member").hide(); 
    $(".hardware").hide();
    $(fd.field('Title').$parent.$el).hide();
    
    if(fd.field('Move_x0020_Type').value.includes('Hardware'))
           
   {
        $(".hardware").show();
        $(fd.field('Title').$parent.$el).show();
    } else  {
       $(".member").show();
       
    } 
           
    }
    loc();

});

7

@aseem,

On the Display form, you can get the field value using the code:

fd.field('Field1').displayValue;
8

Thank you this worked!

1 Like