cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Show/Hide Section based on Yes/No toggle - JavaScript

Hi All, 

 

I have a webform with two sections, one with a toggle Yes/No and in the other section i have a 5 fields 

 

i want to hide the section when the toggle is at default "No" and show the section when the switched to "Yes", 

 

the form is hiding at default but not showing when i switch to yes 

 

what am i missing in the code below??

 

$(document).ready(function () {
debugger;
onDisplaySectionChange();
showHideFieldsandTab();

});

function showHideFieldsandTab() {
$("#callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
if ($("#callingonbehalfof").val() != "Yes") {
$(".section[data-name='Your_Information']").closest("fieldset").show();
$(".section[data-name='Your_Information']").closest('fieldset').find("input[type=text], textarea").val("");
$(".section[data-name='Your_Information']").closest('fieldset').find("select").val('selected');
}
else {
$(".section[data-name='Your_Information']").closest("fieldset").hide();
};

 

Any help would be great 

 

Many thanks 

12 REPLIES 12
Highlighted

Ahh ok cool i did think if i was using the wrong type on control 🙂

 

sorry still a bit confused where would i put the new bit of code? do i need to replace something?

 

var selectedValue = GetRadioSelectedValue($('#callingonbehalfof'))

  i really very new to Javascript :) like days new lol 

 

Many Thanks

Highlighted

Hi

try the following:

$(document).ready(function () {
    debugger;
    onDisplaySectionChange();
    showHideFieldsandTab();

});

function showHideFieldsandTab() {
    $("#iii_callingonbehalfof").change(onDisplaySectionChange);
}

function onDisplaySectionChange() {
    var selectedValue = GetRadioSelectedValue($('#iii_callingonbehalfof'));
    if (selectedValue != "1") {
        $("table[data-name='Your_Information']").parent().show(); /// and .hide();
    }
    else {
        $("table[data-name='Your_Information']").parent().hide(); /// and .hide();;
    }
}

GetRadioSelectedValue = function(input) {

    if (!!$(input).find("input[type=radio]")) {
        var controlName = $(input).find("input[type=radio]").first().attr("name");
        if (!!controlName) {
            return $("input[name='" + controlName + "']:checked").val();
        }
    }
    return "";
};



If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

View solution in original post

Highlighted

@OliverRodrigues  - Mate your legend!! 

 

its now working 🙂 

 

i did also change the radio box to a dropdown and that also worked 🙂 

 

thank you so much for you help 🙂 

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Users online (8,538)